How to delight a customer by AR Quick Look in Shopify store

on September 23, 2018

Create your own shopify store

Apple released the new iOS 12 on 17 September with new features for augmented reality. One of them, called AR Quick Look, is bound to trigger a revolution in online shopping. Shopify's e-commerce platform already supports it, so we can try the new feature right now.

What is AR Quick Look?

AR Quick Look is native support for augmented reality images in iOS Safari. It works quite simply: a user receives a model from a website via a link and then can interact with it and the environment.

The user can not only view pictures of a given product but also interact with the 3D model in the real world. In reality, this means, as an example, your customer can check how a vase looks on his/her table or whether he or she can park a new car in the garage.

Thus, the feature helps not only to amaze your buyers with modern technology but also for you to sell more and reduce returns.

Read more about our BookingMap Shopify App. Turn your standard eCommerce store into map-based service like Booking or Airbnb.

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 your current theme.

First of all, 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 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 need to build each model for your product yourself or order them from a specialist. To test the models, you can download some sample ones from Apple's website.

The second step is to modify your current 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; 
}

That's it! Now, it is time to test the feature!

Learn how to increase sales and get followers in Shopify store with Instagram feed.

Test AR Quick Look live in your Shopify store.

Test AR Quick Look live in your Shopify store.
The feature works perfectly well if you have enough lighting in your room. See some videos as examples.

Conclusion

Augmented reality is a new word in e-commerce and is poised to become a significant trend in the industry. iOS 12, which supports the feature, works on every device since iPhone 6s and provides an excellent user experience.

There are some drawbacks, however. The feature currently works only on iOS devices; there's no Android support. Even if similar functionality appears in other 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 having resources that will help with their creation. Hopefully, there will be automatic generators soon.

Regardless, augmented reality is poised to change the industry by providing more capabilities to sellers and a great experience to buyers.

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

Share This Article