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.
Link your Shopify products with your VNTANA 3D Models
Install the VNTANA Shopify App here:
VNTANA 3D Optimizer & Viewer – Quickly add 3D and AR versions of your products to… | Shopify App StoreAfter 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
In the left-hand menu, navigate to the Online Store under your Sales Channels.
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.
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.liquidfile. (See the Integration Examples section below for other types of integrations depending on your store theme).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.
-
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.
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.)
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 %}