Shopify VR and AR: The Key to Immersive Shopping Experiences

By 2020 customer experience (CX) will be the primary brand differentiator.

Walker Info

And what better way to deliver outstanding online shopping experiences than to seamlessly recreate an in-store customer experience? This is exactly what embedding Virtual Reality (VR) and Augmented Reality (AR) into your Shopify store will do for your business. But before you can add VR and AR to your store, you need to have 3D models of your products. Today, we will talk about 3D models in the context of e-commerce, Shopify VR, Shopify AR and how these technologies can benefit you. We have a lot of ground to cover, so let’s dive in!

3D models and how they are integrated into VR and AR in the context of e-commerce

A 3D model of a product is a virtual representation of that product in three dimensions - length, width, and height.

3D models allow customers to explore and interact with products online in a way that only brick-and-mortar stores could offer before: customers can spin the 3D model in 360 degrees and examine the item from all angles.

And if you throw VR and AR into the mix, 3D models allow customers to experience products in a way that physical stores cannot possibly offer. When 3D models are rendered in AR or VR, they allow customers to turn their personal space (like their living room, for example) into a showroom.

Say you want to buy a new sofa but have no idea how it would look in your home. You can see a 3D model of the sofa in AR or VR and get a better idea of how it would look by your table or that lamp you love so much! Keep in mind that the AR and the VR experiences will be completely different.

For example, since AR is mostly phone and tablet-based, you will not need a headset. Essentially, you will use your phone or tablet’s camera to visualize a 3D version of the sofa in your living room. You will be able to interact with the 3D model - size it up, rotate it, move it around and examine it from different angles. But you won’t feel like the sofa is actually in the room. Instead, you will feel like looking at the sofa through your phone or tablet's camera.

Now, for a VR experience, you will need a headset which makes VR a bit more inaccessible. But when a 3D model of the sofa is rendered in VR, you will feel like the sofa is actually in front of you. You will be able to approach it, explore it in detail, and get a better sense of its exact size and scale. In other words, the shopping experience will be much more immersive.

Either way, 3D models are essential for both experiences.

So, the question is: How can merchants create 3D models of their products?

According to Shopify, 3D modeling is one of the biggest barriers to getting started with VR and AR. In Shopify’s experience, the two best ways to turn a product into 3D are photogrammetry and converting CAD (Computer-Aided Design) files. Read more

To make 3D modeling easier for merchants, Shopify is building a partner network of 3D modeling partners (like Sayduck, Zee Agency, and CGTrader), and 3D app partners (like Tapcart).

To sum up, you have two options to get 3D models of your products:

• You can create the 3D models of your products in-house using photogrammetry or CAD files. You can also use a 3D modeling software like Maya, Blender, ZBrush, Photoshop, or ThreeKit. Before you start, we recommend reading this Shopify guide to 3D modeling. Note that creating the 3D models in-house is a viable option only if you have a 3D artist on your team.
• You can work with a 3D modeling partner and outsource the task.

But the best is yet to come! Shopify is not only making it easier for merchants to get 3D models of their products, they are also making it possible for them to upload and store their 3D models directly in Shopify!

By the end of the year, Shopify merchants will be able to upload and store their 3D models the same way they upload and store images (JPEG and PNG files). Merchants will also be able to associate the 3D models with different product variants (like colors and sizes, for example). Thus, in Shopify's words, store owners will be able to create better product listings, tell more powerful brand stories, reduce returns and win the attention (and, might I also add, the hearts) of their customers. The feature was announced at Unite 2019. (Learn more about this and other features that were announced at this year's Unite.)

Our vision is that technologies like Augmented Reality will fundamentally change how we shop in the future. By offering a new API for managing 3D content, and unlocking 3D modelling and storage tools, our merchants will be empowered to work alongside specialized partners to bring new immersive 3D-enabled commerce to their customers at scale for the first time.

Shopify

Shopify VR

Thinking of VR in e-commerce, only in the sense of walking around a virtual store, is a very limiting view of how VR can improve retail.

Daniel Beauchamp, head of the Shopify VR/AR team

You can also use it to create an emotional bond between your brand and customers, and even build an intelligent testing environment for your products – all leading to more informed and immersive customer experiences.

This is what the Shopify VR/AR team proved by creating a VR experience for a product from Shopify merchant StandDesk. To complete the project, Shopify integrated a 3D model of the product into VR and:

• Enabled customers to see the product exactly as it would appear in real life and get a better sense of its scale and details.
• Enabled customers to customize it within VR – all changes were immediately reflected on the product page.
• Kept the checkout process user-friendly – customers didn’t need to worry about entering a credit card in VR. They just had to take off their VR headsets and complete the standard Shopify checkout process.

Since Shopify used WebVR to build this proof of concept, all this is experienced directly in the browser - no apps or plugins required. See the product sample page

To experience the product in VR, you have to use mobile headsets (Shopify recommends using Google’s Daydream View or Samsung’s Gear VR because they natively support WebVR), or desktop headsets (like Vive and Oculus Rift). If you don’t have a VR headset, you won’t be able to view the product in VR. However, you will still be able to interact with the 3D model.

Ultimately, with this project, Shopify proved that “3D and Virtual Reality could be seamlessly embedded into Shopify stores”. But VR in e-commerce is still a fairly new concept and a lot of tools and apps need to be developed before the technology becomes available to all store owners. To facilitate the adoption of VR for Shopify, Shopify has made parts of the VR technology they’ve developed available to all merchants. The e-commerce giant is also looking for 3D artists and VR developers to join its Partner program and help scale VR to all store owners. Until this happens, you will need a custom solution if you want to add VR to your Shopify store.

Here are a few things you can do:

• You can contact a Shopify Expert who can build a VR experience for your store. Webowski is one of the handful of Shopify experts with experience in 3D/VR/AR technology. An example of Webowski's best work is the 3D product builder developed for Santamaria Shirt Makers.
• You can contact a VR developer who is familiar with A-frame – Mozilla’s VR framework that can be easily integrated with Shopify. Here are some of the developers we have screened and believe are good with this technology: C. Van Wiemeersch, Gabriel Baker, Vishnu Ganti, and Andres Cuervo.
• Last but not least, you can consider using WebVR - the open specification that Shopify used to build the proof of concept around the StandDesk (it allows customers to experience a product in VR directly in their browsers). To build the proof of concept, the Shopify VR team used Sketchfab (a bank for high-quality 3D models), and PlayCanvas (an external VR framework with awesome collaborative features). Daniel Beauchamp said that the Shopify VR/AR team also looked at A-frame and Clara.io but chose to work with PlayCanvas exactly because of its collaborative features which “sped up debugging a lot”.

VR is still in its early days and it will continue to develop at warp speed. Within the next few years, we can expect wider consumer adoption as more and more people are investing in VR headsets. Ultimately, this means that the earlier you adopt the technology, the sooner it will start paying off. And the sooner you will set yourself apart from your competitors...

Shopify AR

Unlike VR, AR doesn’t allow people to completely escape their physical environment. It simply enriches it by adding virtual objects to it (such as videos or 3D graphics, for example). It is less immersive but much more accessible as it is widely adopted on mobile. This means that you can target a much larger audience.

The applications of AR in e-commerce are numerous - from 3D visualizations of products in real-life environments, to post-purchase contextual product recommendations and 360-degree product walkthroughs. Read more

In a minute, we will discuss some of the most common applications of AR in e-commerce and Shopify in particular. But first, let’s take a closer look at Shopify AR.

Shopify AR provides a toolkit which includes:

• A services marketplace of 3D modeling partners. This was announced on September 17, 2018, by Daniel Beauchamp. Read more
• A 3D Warehouse App which merchants can use to store 3D models of their products and let customers view these products in AR. To let customers view products in AR you have to: (1) Install the 3D Warehouse app, (2) Create 3D models of your products and add them to the 3D Warehouse app, (3) Enable AR Quick Look in your Shopify Theme, and (4) Add an AR badge to your 3D products. Read a detailed step-by-step guide
• Support for AR Quick Look (Apple’s latest AR technology, aka Apple’s ARKit). In September 2018, Shopify added support for AR Quick Look and made it available to all Shopify merchants. See AR Quick Look in action

We’re committed to making the incredible business potential unlocked by augmented reality more accessible for small businesses. That’s why we’ve built a services marketplace to help our merchants create 3D models of their products. With Apple’s recent announcement of AR Quick Look, we can now enable these 3D models to be viewable in AR directly through the Safari browser on iOS 12 devices - without the need for a separate mobile app or a clunky headset.

Source: Shopify

See Shopify AR in action

Now that we’ve covered what is possible with Shopify AR, let’s take a closer look at some of the ways you can apply AR to your Shopify store depending on your industry.

Furniture & Home Decor

If you sell furniture and home decor, adding AR to your Shopify store will help you deliver more informed shopping experiences. Especially if you don’t have a physical showroom or a pop-up store where customers can see how your products look in real life.

Remember the example of the sofa? AR allows customers to place photorealistic 3D models of your products in their own homes, offices, etc. In this way, your customers can get a better idea of how the product they want to purchase fits into their space. This will significantly ease their buying decisions and, respectively, it will benefit your bottom line.

The Shopify VR/AR team augmented Magnolia Market’s native app with AR and the result illustrates perfectly how this concept works. You can offer the same interactive shopping experiences to your customers with the Shopify AR toolkit, or an AR platform like Augment. Augment easily integrates with Shopify (read a step-by-step guide) and all you need to get started is an Augment account and 3D models of your products. See Augment in action

Fashion industry

If you sell apparel online, you probably have to deal with returns and exchanges on a daily basis because a product “didn’t fit”. Enter AR. You can use AR to enable your customers to virtually “try on” clothes and accessories, take photos and share them on social media. This will help your customers make more informed decisions and will increase their buying confidence. Respectively, it will significantly reduce returns.

With Avametric you can deliver accurate 3D renderings of clothing and accessories and enable your customers to visualize them on customizable digital mannequins. Avametric offers custom solutions – they can augment your native app with AR or build an AR app for your store. See how Avametric works

Beauty industry

AR’s “try on” capabilities go beyond fashion. If you sell beauty products you can enable your customers to virtually “try on” makeup – they can upload a photo or a live video and see how a specific eyeliner, mascara or lip gloss would look on them in real-time. By seeing realistic representations of the products customers can easily choose the color or shade that fits them best. You can enable such experiences with the help of ModiFace. They’re the brilliant minds behind Sephora Virtual Artist and are trusted by other leading companies in the beauty industry such as Estée Lauder and L’Oréal.

Here’s what ModiFace offers:

• Patented Beauty AR software development kit (SDK) – photo-realistic video & photo SDK for makeup, hair, and skin simulation in real-time. Available for Android, iOS, Windows, and Web.
• Incredibly accurate 3D facial feature tracking and analysis for videos and photos.
• Fully custom AR module for Android, iOS & Windows apps – ModiFace can help you create a customized experience with precise product simulation and integrate all AR features with your existing mobile application. See an example
• E-commerce AR module for the web – your customers will be able to test any product on their photo or live video directly on your website. The module is accessible through any browser and can be deployed seamlessly and quickly. See a sample image

Similar to VR, AR is still in its early days and is developing rapidly. The technology is becoming more popular by the minute. Consumer interest and demand are growing exponentially. It is expected that by 2020 AR will acquire 1 billion users (source: New gen apps). Embedding AR into Shopify is growing in popularity as well. Dozens of brands have already experienced the benefits of this powerful technology.

Source: Shopify

If you want to see AR in action and read the stories of some of the brands that are leveraging its power, you should check out the following articles:

• 10 Shopify Stores You Can Browse in Augmented Reality Today
• Augmented Reality Brings a New Dimension of Engagement to the Customer Experience

Conclusion

By 2021, the combined market size of augmented and virtual reality is expected to reach 215 billion U.S. dollars.

New gen apps

And here is why...

VR and AR empower immersive in-store like shopping experiences and enable customers to navigate them themselves. Today, customers can fully experience and explore products from the palms of their hands and the comfort of their own homes. And thanks to technologies like WebVR and WebAR, they don’t even need to install apps or plugins which makes their shopping experiences even more frictionless.

Ultimately, VR and AR make questions like “Should I buy this product?” a no-brainer! Therefore, by adding VR and AR to your store, you can deal with buyers’ reluctance in a more efficient way, retain existing customers better, attract new ones and increase your sales.

And even though today we can only scratch the surface of VR and AR, one thing is certain - as technology improves, the experiences it empowers are going to become even more enhanced! Therefore, we can confidently say that adopting VR and AR will give you a cutting edge over your competitors!

So... are you going to add VR or AR (or both!) to your Shopify store? What frameworks, tools, apps, or services do you plan to use? Let us know in the comments!