Shopify AR powered by 3D Warehouse

Caution

The 3D Warehouse app is being deprecated and won't be available to install. You can upload 3D models directly from the Products page. Learn more about Product media.

Shopify AR lets customers using the Safari browser on iOS 12 devices 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.

To let customers 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

Note

The 3D Warehouse app is being deprecated and won't be available to install. You can upload 3D models directly from the Products page. For more information on adding media to your products, learn more about Product media.

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 let you view the object from any angle.

You can hire a Shopify expert to help you to make 3D models of your products. In the Shopify Experts Marketplace, browse experts who offer the 3D model creation service, select an expert, and contact them.

Using the expert contact form, provide details about your project. If you want to provide product photos and product dimensions now, then make sure you follow the linked guidelines.

When you contact an expert, you're not committing to hire a Shopify expert. This step only submits a request the expert who then can review your request. If an expert decides to work with you, then they'll contact you with more information about their fees and how you can start working together.

If you haven't provided product photos and product dimensions already as part of your job request, then the expert requests 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:

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 50 mm lens. For small to medium size products, use a 70 mm or 100 mm 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:

She installs the 3D Warehouse app, then uses Experts Marketplace to hire 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:

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

• 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: Check the quality of the model

When a Shopify expert provides you with a 3D model, you should check that you're happy with its quality. The expert should provide you with instructions for previewing the model.

Check the model from all angles. You can use the glTF Viewer to preview your 3D models. While reviewing your model, consider the following questions:

• Does the model's shape match the product reference photos that you provided to the expert?
• Are all parts of the model proportional to the rest?
• If you're able to preview the model in augmented reality, then does the scale of the model look correct compared to the rest of the scene?
• Does the model look like it's made from the same materials as the product?
• Do the model's materials look stretched, blurry, or distorted?
• Are there details like scuffs or scratches to make the model's materials seem more realistic?
• If parts of the product are transparent, reflective, or give off light, then do they look right?
• Do the edges all look realistic? Are any of them too sharp and need to be softened?
• If there are any decorative details, such as a logo or some text, then are they easy to see?
• Are there any gaps or holes where there shouldn't be any?
• Does the 3D model meet the technical requirements for the Shopify platform?
  • The 3D model needs to be a GLB file.
  • The GLB file should be approximately 4 MB.
  • The GLB file must not exceed 15 MB.

The Shopify expert should build the 3D model according to certain standards. To learn more about those standards so that you can better review a model, see Creating 3D models for merchants.

If you think that the quality of the model isn't good enough, then contact the Shopify expert and explain what is wrong with it.

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

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

Note

If you can't see the AR image after you've added it to the 3D Warehouse app, then contact Apple support.

Steps:

1. From your Shopify admin, click Settings > Apps and sales channels.

2. From the Apps and sales channels page, click 3D Warehouse.

3. Click Open app.

4. Click Add 3D Model.

5. In the Title field, enter a title for the 3D model.

6. In the Linked Product field, select the product and variant that this 3D model is associated with, then click Select product.

7. Click Upload File and select the .usdz file provided by the Shopify Expert.

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

Note

If you upload a .gltf file, then you're prompted to add additional files in the Linked Files section. Click Upload File to upload the linked texture resources provided by your expert.

Accepted file types

Shopify experts provide two different file types for each 3D model, a .usdz file and a .gltf or .glb file. These different file types are used by different platforms and features. For example, for customers to view 3D products in the Safari browser on iOS 12 devices, you need to upload a .usdz file. The best way to make sure that your online store is compatible with future augmented reality and 3D features is to upload both file types.

Step 5: 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 lets customers using the Safari browser on iOS 12 devices view your 3D products.

Steps:

1. From your Shopify admin, click Settings > Apps and sales channels.

2. From the Apps and sales channels page, click Online store.

3. Click Open sales channel.

4. Next to your current theme, click Actions > Edit code.

5. In the Layout folder, click {/} theme.liquid.

6. Find the <head> tag. It should be near the top of the file.

7. On the next line, paste the following code:

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

1. Click Save.
2. In the Sections folder, click {/} product-template.liquid.
3. 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>

1. Click Save.

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

Step 6: 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:

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

Steps:

1. From your Shopify admin, click Settings > Apps and sales channels.

2. From the Apps and sales channels page, click Online store.

3. Click Open sales channel.

4. Next to your current theme, click Actions > Edit code.

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

6. Find the section of the template associated with your product photo. Look for keywords like ProductPhoto or featured_image:

   

7. Within the product photo section, find the first <img... > tag.

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

1. Click Save.
2. 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.
3. 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;
}

1. Click Save.

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