How to Delight a Customer with AR Quick Look on Your Shopify Store

on September 23, 2018

On September 17, Apple released the latest iOS 12 with new features for augmented reality. One of them, AR Quick Look, is bound to bring about a revolution in online shopping. It is already supported on Shopify, so we can try the feature right now.

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.

Have you encountered any difficulties? Contact us!

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

Bring augmented reality to your Shopify 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.

First of all, go to the app page, enter your store URL, and install the app in your admin.

The key to 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. To test the models, you can download some samples from Apple's website.

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" crossorigin="anonymous" ></script>

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.

Test AR Quick Look live on your Shopify store.
Please keep in mind, the feature only works perfectly if you have enough light in the room. See the videos below.

Conclusion

Augmented reality 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 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 an amazing experience to buyers.

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