Verge3D for Shopify

Verge3D comes with an extension for Shopify, one of the most popular e-commerce systems in use.

Verge3D for Shopify offers the following features:

Embedding 3D interactive sections on product pages, aka Verge3D Viewer sections
As an alternative approach, replacing entire product media (gallery) with Verge3D apps
Adding configurable products to the cart with Puzzles

Installation

There are two liquid (Shopify scripting language) scripts located in the shopify folder of the Verge3D installation folder.

verge3d-viewer.liquid — implements Verge3D Viewer sections which can be added to the product pages
verge3d-api.liquid — custom product APIs, required for using Verge3D Shopify puzzles

To install these scripts, go to the Shopify theme editor, click on the […] button, then select Edit code from the menu:

Click on the sections list with right mouse button, then select Upload... from the menu:

Choise one (or both) above-mentioned liquid scripts, wait until they appear in the sections list, then press Save.

Installation complete!

Adding App URLs

To display your product in 3D, you need to specify a URL to the corresponding Verge3D app. To do it, in the product settings, add a new Verge3D URL (custom.verge3d_url) metafield of type URL using the Add definition button. Once the metafield appears, assign its value to a full URL path of the Verge3D app that represents this product. The app itself should be uploaded either to Verge3D Network or your own hosting.

Verge3D liquid scripts will use that value to display 3D interactive on the product pages. If nothing is specified for the URL metafield, the product page will look as usual (with conventional 2D media gallery imagery etc.)

Adding Sections with Verge3D Apps

This feature allows you to embed Verge3D applications to Shopify product pages. Use Add section → Verge3D App Viewer to add a new section with 3D visualization.

Adding Verge3D App Viewer section to Shopify product page

This section supports the following params:

Aspect Ratio: Aspect ratio of the Verge3D Viewer.
Minimum Height: If you set the Aspect Ratio to Custom, use this parameter to specify the minimum height of the Verge3D Viewer.
Maximum Width: Use this parameter to specify the maximum width of the Verge3D Viewer.

Replacing Product Media with 3D Visualization

If the above-mentioned method does not suit your goals, you can use an alternative approach described here. It allows you to replace the entire product media block with a Verge3D application.

Replacing media gallery with Verge3D app in Shopify

You need to edit the source code of your theme. E.g. for the Dawn theme, you need to edit the sections→main-product.liquid file. Find the line there the them inserts the product gallery:


    {% render 'product-media-gallery', variant_images: variant_images %}

and replace it with the following code:


    {% if product.metafields.custom.verge3d_url != blank %}
      <!-- replace entire media gallery with Verge3D -->
      <div class="verge3d-iframe-container" style="width: 100%; aspect-ratio: 16/9;">
        <iframe
          src="{{ product.metafields.custom.verge3d_url }}"
          width="100%"
          height="100%"
          frameborder="0"
          allow="fullscreen; xr-spatial-tracking"
          allowfullscreen
          style="border: none;"
          title="3D view of {{ product.title }}"
        ></iframe>
      </div>
    {% else %}
      {% render 'product-media-gallery', variant_images: variant_images %}
    {% endif %}

After saving, the default media gallery imagery will become a 3D visualization area.

Adding Configurable Products to the Cart

This feature allows you to add configurable products to the Shopify cart with Puzzles.

Shopify cart look having cusomizable items

To enable it, click Add section → Verge3D Product API to add a new (invisible) section to all product pages. This section will handle requests from the add to cart puzzle.

Adding Verge3D Product API section to Shopify product page

The section supports a single param — Allowed Hostname (Origin). You only need to change it if you're going to use your own server — leave the default https://cdn.soft8soft.com if you're using Verge3D Network.

Once you added the Verge3D Product API section, you can use the Shopify puzzles in your application. See here for more information.

Got Questions?

Feel free to ask on the forums!