Shopify AR powered by 3D Warehouse

Shopify AR allows customers on iOS 12 devices to view realistic and interactive versions of your products in augmented reality (AR). With AR you can provide your customers with a better sense of the size, scale, and detail of your products. The 3D Warehouse app enables AR experiences by allowing you to upload 3D models and link them to products on your store.

Viewing a vase in 3D

To allow customers to view your products in AR, install the 3D Warehouse app, get 3D models of your products, add the 3D models to the app, edit your theme to enable AR Quick Look, and then add the AR badge to your 3D products.

Step 1: Install the 3D Warehouse app

You can install the 3D Warehouse app using the sign-up page.

Steps:

  1. Open the sign-up page.
  2. Enter your myshopify.com store domain.
  3. Click Install.
  4. Review the details, then click Install app.

You can access the 3D Warehouse app on the Apps page of your Shopify admin.

Step 2: Get 3D models of your products

Before customers can view your products in AR, you need 3D models of your products. 3D models are virtual representations of an object or surface in three dimensions. They allow you to view the object from any angle.

You can get 3D models of your products through the Shopify Partner Program.

Steps:

  1. From your Shopify admin, click your account menu, then click Hire a Shopify expert:

    Hire a Shopify expert

  2. Click to expand the New functionality section.

  3. Click Create 3D models of your products for augmented reality (starting at $100 USD).

  4. Respond to the required questions. If you want to provide product photos and product dimensions now, then make sure you follow the linked guidelines.

  5. Click Send job.

When you submit a job request, you are not committing to hire a Shopify Expert. This step only submits a description of your project to available experts, who will then review your request. If an expert decides to work with you, then they will contact you with more information about their fees and how to start the process.

If you haven't provided product photos and product dimensions already as part of your job request, then the expert will request them from you. Follow the specifications below when taking photos and measurements.

Product photos

3D models are created using photos. To create the 3D model, the Shopify Expert needs photos of your products from multiple angles:

Product photo angles

When taking photos of your product, follow these guidelines:

  • Make sure that your product is well lit.
  • Make sure that your whole product is in focus.
  • If possible, don't use a cellphone camera. For large products like furniture, use a camera with a 50mm lens. For small to medium size products, use a 70mm or 100mm lens.
  • Take extra photos of any unique details or textures.
  • Give the photo files clear titles like blue vase - top, or blue vase - left and store them in a clearly labelled folder.

Product dimensions

To create accurate 3D models, the Shopify Expert needs detailed measurements of your product. When providing measurements, follow these guidelines:

  • Describe each dimension of your product in clear, simple terms.
  • Provide the measurements in mm.
  • Include a diagram to show which dimensions the measurements correspond to.
  • If you have technical drawings or CAD files associated with your product, include those as well.

Example of getting 3D models made

Naomi is selling this blue vase:

Vase

She installs the 3D Warehouse app, then uses the Services Marketplace to find a Shopify Expert to create a 3D model of the vase. Naomi provides the expert with six high-quality photos taken with a camera with a 70mm lens:

Product photo angles

Naomi gives the expert a measurement diagram with corresponding product dimensions in millimeters:

Vase

  • The height of the vase (1) is ____mm
  • The top of the vase to the bottom of the neck (2) is ____mm
  • The bottom of the neck to the bottom of the vase (3) is ____mm
  • The diameter of the mouth of the vase (4) is ____mm
  • The width of the lip of the mouth (5) is ____mm
  • The diameter of the bottom of the neck (6) is ____mm
  • There are 8 hexagonal faces on the vase
  • The height of the hexagonal faces (8) are ____mm
  • The width of the hexagonal faces (9) are ____mm
  • The diameter of the widest part of the vase (10) is ____mm
  • The diameter of the bottom of the vase (11) is ____mm
  • The diameter of the foam feet are ____mm

The Shopify Expert uses these photos and dimensions to create a 3D model of the blue vase. The expert sends Naomi a .glb and a .usdz file for her to add to the 3D Warehouse app.

Step 3: Add a 3D model to the 3D Warehouse app

Once you have the 3D Warehouse app installed and have sourced a 3D model, you need to add the model to the 3D Warehouse app.

Steps:

  1. From your Shopify admin, click Apps.
  2. Click 3D Warehouse.
  3. Click Add 3D Model.
  4. In the Title field, enter a title for the 3D model.
  5. In the Linked Product field, select the product and variant that this 3D model is associated with, then click Select product.
  6. Click Upload File and select the .usdz file provided by the Shopify Expert.
  7. Click Save.

Repeat the upload process for the .gltf or .glb file that your Shopify Expert provided. Make sure you link it to the same product so that you have both 3D model file types associated with the product.

Accepted file types

Shopify Experts provide two different file types for each 3D model, a .usdz file and a .gltf / .glb file. These different file types are used by different platforms and features. The best way to make sure that your online store will be compatible with future augmented reality and 3D features is to upload both file types.

Step 4: Edit your theme to enable AR Quick Look

You need to edit your theme code to enable AR Quick Look, which is the feature that allows customers using iOS 12 devices to view your 3D products.

Steps:

  1. From your Shopify admin, click Online Store.
  2. Next to your current theme, click Actions > Edit code.
  3. In the Layout folder, click {/} theme.liquid.
  4. Find the <head> tag. It should be near the top of the file.
  5. On the next line, paste the following code:

    <script
      src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
      crossorigin="anonymous"
    ></script>
  6. Click Save.

  7. In the Sections folder, click {/} product-template.liquid.

  8. Paste the following code at the top of the file:

    <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>

    Quicklook library added to product template

  9. Click Save.

If you use more than one product template, then add the code to those template files as well.

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

Customers using iOS 12 devices know that they can view your product in 3D when they see the AR badge overlay:

AR badge overlay

You need to edit your theme code to display the AR badge on product images.

Steps:

  1. From your Shopify admin, click Online Store.
  2. Next to your current theme, click Actions > Edit code.
  3. In the Sections folder, click {/} product-template.liquid.
  4. Find the section of the template associated with your product photo. Look for keywords like ProductPhoto or featured_image:
    Product photo liquid
  5. Within the product photo section, find the first <img... > tag.
  6. On the line above that tag, paste the following code:

      <div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

    Product photo liquid with code

  7. Click Save.

  8. Open the file that contains your theme's CSS. This file is usually in the Assets folder and most often has a title such as {/}theme.scss.liquid.

  9. At the very bottom of the file, paste the following code:

    .ar-quicklook-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
    }
  10. Click Save.

To test your 3D model, 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.

Ready to start selling with Shopify?

Try it free