Upload 3D models to Shopify

How to upload 3D models to Shopify

Shopify is one of the first e-commerce solutions that enables merchants to link 3D models to products in the store. By doing this, customers can get a better feel of what the product looks like, how big it is and also what it looks like in their real environment. With shopify, webshop visitors have the possibility of viewing the product interactively using Augmented Reality (AR), by using their smartphones.

In this article, we will tell you how to realize this, from installing the right app to your shopify website, to adding the AR badge to your 3D products.

Step 1: Install the 3D Warehouse application

Shopify has a large amount of apps that you can use to bring your store to life. One of them is the 3D Warehouse app, which allows you to store 3D models of your products on shopify. In order to make use of this, you need to sign-up for the app. Here you have to enter your myshopify.com store domain and install the app. After the installation is complete, you can access 3D Warehouse on the Apps page of your store admin.

Step 2: Add 3D models to the 3D Warehouse app

To add 3D models to 3D warehouse, you first need to upload the files to the 3D Warehouse app. For this you can follow these steps:

  • Open 3D Warehouse and click Add 3D Model
  • Give the 3D Model a Title, for example “Office desk brown”
  • Select the product, for example “Office desk”, and maybe a variant, in this example “brown” that this 3D model represents, in the Linked Product field.
  • Click Upload File and select the 3D model file (.usdz / .gltf / .glb) that you would like to upload. If you upload a .gltf file, you also have to add texture resources in the linked files section. When you are done, click Save.

If you do not have 3D models yet, please take a look at our service. We provide accurate and detailed 3D models of your products suitable for all major Augmented Reality platforms. We are a partner of Shopify and can get you exactly the files you need to get started with 3D for Shopify!

Step 3: Setup AR Quick Look in your theme

To make full use of your 3D models, you can allow your customers to virtually place your products in their own environment using Augmented Reality! For this, you need to edit your theme to enable AR Quick Look. AR Quick Look allows customers that use iOS 12 or higher to view your 3D products in AR. Follow the steps below to set this up:

  • Click Online Store from your Shopify Admin.
  • Click Actions > Edit code
  • Click {/} theme.liquid in the layout folder
  • Go to the <head> tag near the top of the file.
  • On the line under this tag, paste the following code and click save
<script
src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
crossorigin="anonymous"
></script>
  • In the Sections folder, click {/} product-template.liquid.
  • Paste the following code at the top of the file and click save
<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{  variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

If you use more than one product template, make sure you paste this code also to those template files.

Step 4: Add the AR badge to your 3D products

An AR badge is an icon at the top-right corner of your product image that shows customers that they can place the product in their own environment using Augmented Reality:

To make sure this is visible for your products, you need to follow the steps below:

  • Click Online Store from your Shopify Admin.
  • Click Actions > Edit code
  • Click {/} theme.liquid in the sections folder
  • Search for keywords like ProductPhoto or featured_image to identify the section that is associated with your product photo.
  • Within this section, find the first <img…> tag
  • Paste the following code on the line above this tag and click save
 <div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>
  • Open the CSS file of your theme. This file is usually in the Assets folder and has a title like {/}theme.scss.liquid.
  • At the bottom of the file, add the following code and click save
.ar-quicklook-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}

To test your 3D model in Augmented Reality, open your online store on a device running iOS 12 and navigate to the product page. Tap the AR badge in the product image to view it in 3D.

If you have any questions or remarks regarding this article, please let us know.

Comments (1)

It’s great that you are getting thoughts from this post
as well as from our argument made at this time.

Leave a comment