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.
Setting up the App
Once the App is installed, it is recommended that you first use it to link a VNTANA Asset to one of your Shopify Products. This is because the App works by adding metafields to your Shopify field which indicate when the viewer components should appear. This way you don’t have unintended visuals on your page for any Shopify Products without a viewer. See the section below on Using the App to see how it works.
With a Product linked, you can now update the theme to allow for the Viewer to appear for the Product. There are three possible options, two of which are the simple and default ways to handle it, requiring no code edits, while the third would require you to find and edit part of the theme code.
Customizing Your Theme
To begin, you will need to navigate to the Themes section of your Online Store and click the Customize button on the theme you wish to add viewers to.
When in the customize view of your theme, you’ll first want navigate to the Products view to customize your Product page template.
Next, change the Preview product to the Product you used the App to link a viewer to (click the Change button in the above image).
View in Your Space Button
The first option to add a Viewer to your Product pages is to implement a button which will open the Viewer in a modal. To do this, find the Add block button within the page section you wish to add the button to. We recommend adding it to the Product Information section, however you may add if where you like. A pop-up will appear with options of blocks to add, click the Apps switch and select the VNTANA 3D Button block to add it to the page.
This will add a block containing the button and a description. With the block selected you can make edits to certain parameters in the right panel, in this case both the title and description can be edited or even omitted (the icon will always remain).
Important: In order for the modal to appear when a user clicks the button you must enable an option in your theme under the App Embeds section. See the App Embed section below on how to do this.
Adding the Viewer
The second option if you would prefer, is to simply add the viewer directly into the page. You can alternatively select the VNTANA Viewer block instead. This can also be added to the Product information section, but we’d recommend a separate section for itself.
With the viewer block selected you can adjust the size. The options are:
Width – The horizontal size of the viewer
Width Units – Determines whether the entered width value is in pixels or a percent of the parent container (100% meaning it stretches the full width of the container).
Height – The vertical size of the viewer
This is always in pixels as the height is determined by the contents and thus can’t have a percent without appearing too small.
App Embeds
In addition to the two blocks, there are two App Embeds available, one of which is necessary for the 3D Button block to function. Generally, App Embeds are just changes an app needs to make to the theme that don’t necessarily carry a visual element to them. To access the App Embeds provided by the VNTANA App, click the App Embeds button in the left most panel.
You may see a lot of embeds depending on the apps you have installed, so you may need to search for VNTANA to find them. It is recommended to just enable both embeds, but to go over them:
VNTANA 3D Indexing: This enables the Index 3D option found within the App to work by adding a schema to your Product pages that Google can pick up to index the page as having 3D.
VNTANA Viewer Modal: This allows the the event triggered by clicking the 3D Button to open the Viewer in a modal and must be enabled for the button to work.
Editing Your Theme
If you do not currently use an Online Store 2.0 theme or want a different type of implementation altogether, the final option is much more open ended but requires knowledge of editing your theme’s code. How this is done is up to you and your vision for the presentation, however the typical method would be to add logic that replaces an image in your image gallery/carousel with the Viewer by using the Embed Code metafield added to a Product via the App. As each theme may be different, the exact spot that would need to be edited isn’t the same across all themes.
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 [email protected].
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-thumbnail.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-thumbnail.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 %}