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 Verge3D apps on product pages as app blocks.
Replacing product media with a Verge3D visualization.
Adding configurable products to a cart with Puzzles.

Installation

To install Verge3D theme app extension, simply:

One.
Two.
Three.

Specifying Applications

Use the Applications admin menu to access Verge3D Applications screen:

App Block

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

Replacing Product Media with 3D

This feature allows you to replace the entire product media block with 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 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 %}

Adding Configurable Products to a Cart

This feature allows you to add configurable products to a Shopify cart. Enable Verge3D embeds with App embeds → Verge3D Product API. Specify Allowed Hostname (Origin) if you're going to use your own server (not needed for Verge3D Network).

Got Questions?

Feel free to ask on the forums!