Resources

Integrations: Shopify

Shopify store owners can now install the VNTANA Automated 3D CMS application from the Shopify App Store here.

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. After installing the app, log in to your VNTANA account through the Shopify App interface, and follow the instructions on screen. You will then need to make a small update to your Shopify store’s theme to display our 3D viewer in your storefront. You can follow the steps below as a general guideline for how to implement the custom code, but depending on your store’s theme, the actual template that requires editing and the actual code snippet may differ. If you need assistance updating your Shopify store template code, please contact us at support@vntana.com.

 

Editing your Shopify Theme
  1. Once you have logged in to your store, 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.
  1. Find the template, section, or snippet that is responsible for displaying the thumbnail images on your storefront. For example, in a generic Shopify store with no custom themes, that snippet is the media.liquid file.
  2. Once you have found the file, locate the section of the code that displays the images. You will need to add a conditional statement similar to the example provided below in order to display the VNTANA 3D viewer whenever the alt text for a thumbnail equals “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 %}

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.