Resources

Integrations: Shopify

As a VNTANA Platform user, you can simply upload your 3D design files from 3D scanners, Clo, Browzwear, Modo, Keyshot, 3DSMax, Maya, Rhino, or other 3D design programs, and VNTANA’s smart algorithm will automatically reduce the file size to ensure your 3D models load quickly in your Shopify store. We also automatically create GLB and USDZ files so you are web and AR ready for both iOS and Android devices.

Our Shopify App allows you to easily integrate our 3D web viewer containing your 3D asset directly from the VNTANA Platform into your Shopify storefront. 

  1. Install the VNTANA Shopify App here:

  2. After installing the app, log in to your VNTANA account through the Shopify App interface. Follow the instructions in the app to pull VNTANA product information and thumbnails directly into your Shopify products.

Once you have linked your Shopify products with your VNTANA 3D models, you will need to update your Shopify theme.

Update your Shopify theme
  1. In the left-hand menu, navigate to the Online Store under your Sales Channels.

  2. In the Themes section, click on the Actions dropdown menu and click on Edit code. You will be redirected to all of the templates that define the layout and design of your Online Store.

  1. Depending on your theme, the template, section, or snippet file(s) you need to edit will differ. For example, in the Dawn Shopify theme, the product page features an image carousel, and the snippet that displays the thumbnail images is the product-thumbnail.liquid file. (See the Integration Examples section below for other types of integrations depending on your store theme).

  2. Find the file that is responsible for displaying the images on your storefront. Once you have found the file, locate the section of the code that displays the images. Add a conditional statement similar to the example provided below to display the VNTANA 3D Viewer.

{%- if media.alt == “VNTANA_3D_Viewer” and product.metafields.VNTANA_3D_Viewer != blank -%} {{ product.metafields.VNTANA_3D_Viewer.EmbedCode }} {% else %} // existing code to display thumbnail images {% endif %}
  1. Click Save.


The VNTANA 3D Viewer should now be visible on your product page! If you need assistance updating your Shopify theme, please reach out to us at support@vntana.com.

Indexing your 3D for Search

In addition to adding the VNTANA 3D Viewer to your Shopify product pages, you can also set up the product pages for indexing with Google search. The app will include two checkboxes for Add 3D and Index 3D, toggled on by default. While Index 3D is toggled, the app will add 3 additional metafields to the selected Shopify products called imageUrl, glbUrl and usdzUrl

In order for these new metafields to be used in your Shopify products, you will need to add the following code to your theme.liquid file. See above for accessing your theme for editing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% if product.metafields.VNTANA_3D_Viewer.imageUrl and
product.metafields.VNTANA_3D_Viewer.glbUrl and
product.metafields.VNTANA_3D_Viewer.usdzUrl %}
<script type=”application/ld+json”>
{
“@context”: “http://schema.org/”,
“@type”: “3DModel”,
“image”: “{{ product.metafields.VNTANA_3D_Viewer.imageUrl }}”,
“name”: “{{ product.title }}”,
“encoding”: [
{
“@type”: “MediaObject”,
“contentUrl”: “{{ product.metafields.VNTANA_3D_Viewer.glbUrl }}”,
“encodingFormat”: “model/gltf-binary”
},
{
“@type”: “MediaObject”,
“contentUrl”: “{{ product.metafields.VNTANA_3D_Viewer.usdzUrl }}”,
“encodingFormat”: “model/vnd.usdz+zip”
}
]
}
</script>
{% endif %}
Integration Examples

Image Carousel

If your theme features an image carousel like the example here: https://shop.vntana.com/, the file you need to edit is most likely under the Snippets folder of your theme. In Shopify’s Dawn theme, the file is product-thumbnail.liquid.

The below conditional statement needs to be added so that in lieu of the VNTANA thumbnail in your media section, the VNTANA 3D Viewer is displayed instead. (Note: The VNTANA thumbnail is automatically added to your media section when using our Shopify App to link products).

1{%- if media.alt == “VNTANA_3D_Viewer” and                      product.metafields.VNTANA_3D_Viewer != blank -%} 2    {{ product.metafields.VNTANA_3D_Viewer.EmbedCode }} 3{% else %} 4    // existing code to display thumbnail images 5{% endif %}

Featured Product Image

If your theme features a layout with a featured product image or with all of the product images visible at once, the file you will most likely need to edit is under the Sections folder. In Shopify’s Dawn theme, the file is product-template.liquid. Find the part of the code where you want to display the VNTANA 3D Viewer and add the following code.

1{%- if product.metafields.VNTANA_3D_Viewer != blank -%} 2    {{ product.metafields.VNTANA_3D_Viewer.EmbedCode }} 3{% endif %}

Popup window

It is also possible to add a popup window with the VNTANA 3D Viewer to your Shopify store, as seen in this example: https://shop.vntana.com/products/purse.

To add the View in AR button to the product information section of the page, the file you will most likely need to edit is under the Sections folder. In Shopify’s Dawn theme, the file is again product-template.liquid. In the product description section of the page, you can add the below code.

(Note: The styles and script to add functionality to the button were all included in this section for ease of comprehension, but the code can be split or added into different files depending on your theme’s structure and included using Shopify’s liquid syntax.)

// scroll left to right to see code 1{% if product.metafields.VNTANA_3D_Viewer != blank %} 2 <div 3 id="view-in-ar-btn" 4 style="display: flex; align-items: center; font-weight: bold; cursor: pointer; margin-top: 20px;" 5 > 6 <img src="https://static.vntana.com/assets/images/AR_cube.png" height="40"> 7 <span style="padding-left: 10px;">View in AR</span> 8 </div> 9 <div id="viewer-modal-container" style="display:none;"> 10 <div id="viewer-modal"> 11 {{ product.metafields.VNTANA_3D_Viewer.EmbedCode }} 12 </div> 13 </div> 14 15 <style> 16 #viewer-modal-container { 17 position: fixed; 18 background-color: rgba(0, 0, 0, 0.5); 19 width: 100vw; 20 height: 100vh; 21 left: 0; 22 top: 0; 23 z-index: 1; 24 } 25 #viewer-modal { 26 position: absolute; 27 left: 50%; 28 top: 50%; 29 transform: translate(-50%, -50%); 30 width: 500px; 31 height: 500px; 32 } 33 #viewer-modal iframe { 34 width: 100%; 35 height: 100%; 36 } 37 </style> 38 39 <script> 40 const viewInArBtn = document.querySelector("#view-in-ar-btn"); 41 const viewerModalContainer = document.querySelector("#viewer-modal-container"); 42 function toggleModal() { 43 if (viewerModalContainer.style.display === "none") { 44 viewerModalContainer.style.display = "block"; 45 } else { 46 viewerModalContainer.style.display = "none"; 47 } 48 } 49 viewerModalContainer.addEventListener("click", toggleModal); 50 if (viewInArBtn) { 51 viewInArBtn.addEventListener("click", toggleModal); 52 } 53 </script> 54{% endif %}

Accelerate Your
Digital Transformation

Learn how our platform can automate your 3D process.

Tap the magnifying glass to the left of your screen to search our resources.