Shopify Augmented Reality. AR Quick Look

What is AR Quick Look?

AR Quick Look is native support for augmented reality images in iOS Safari. Not only does it allow the user to view pictures of a given product, but they can also interact with its 3D model in the real world. Simply put, your customer can see how a new vase would look on their table or whether their new car would fit in the garage before even buying those things. Usually, people find it convenient. And all they have to do is get the model they need via a link on a website.

Thus, the feature helps reduce product returns and amaze your buyers with modern technology.

Bring AR shopping to your website.

To add AR Quick Look to your Shopify store, you need to tune up the 3D Warehouse app and do some coding work on the theme.

Firstly, go to the app page, enter your store URL, and install the app in your admin.

The key to a great user experience is a high-quality model. You can use '.gltf,' '.glb,' or the new Apple '.usdz' file format. Unfortunately, there is no tool to generate models automatically, so you will need to build each product model by yourself or order them from a specialist. You can download some samples from Apple's website to test the models.

The second step is to modify your Shopify theme to enable AR Quick Look:

Add the main script to the head of 'theme.liquid'.

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

Then add a script to the top of 'product-template.liquid'.

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

and an AR badge one line above the main 'img' tag

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

The final step: add a CSS to the bottom of 'theme.scss.liquid'

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

Your new feature is ready. It's time to test it!

Test AR Quick Look live on your Shopify store.

Please remember that the feature only works perfectly if you have enough light in the room. See the videos below.

Sell your products anywhere with Shopify. Click the link and start a free trial!

Conclusion

Augmented reality shopping is a new word in e-commerce, but it is poised to become a significant trend in the industry. iOS 12, supporting AR Quick Look, works on any device since the iPhone 6s and provides an excellent user experience.

There are some drawbacks, however. For now, the feature works only on iOS devices; there's no Android support. Even if similar functionality becomes available in newer system versions, old smartphones may not support it.

The second issue is the models. They are impossible to generate, so you should focus on the resources for creating them. Hopefully, automatic generators will be released soon.

Regardless, augmented reality is about to change the industry by providing more opportunities to sellers and a fantastic experience for buyers.

Want to test it? Try the examples in our sandbox.