Augmented reality (AR) poses a huge opportunity for brands to create more engaging customer experiences online, address changing shopping behaviors, and boost conversion rates while reducing return rates—all at the same time.
AR ecommerce enables customers to virtually try on and test products through their digital device, which helps them make better purchasing decisions. For example, customers can preview what products such as furniture will look like in their homes or—in the case of clothing, jewelry, and beauty products—on their bodies before ordering them.
While AR has been around for a while, the technology has become easier to integrate, and there are a lot more devices an AR ecommerce experience can work on than ever before: By 2024 there will be an estimated 1.7 billion mobile AR user devices worldwide, according to a recent report by Statista.
Jason Stokes, founder and CEO of Shopify Plus agency Eastside Co, says the technology is gaining traction in ecommerce specifically as online businesses see the benefits it can bring: “In lieu of customers being in a physical shop with a real-life product to view, AR bridges that gap.”
In lieu of customers being in a physical shop with a real-life product to view, AR bridges that gap.
Stokes explains that, from Ikea’s AR app that lets you try a table for size in your dining room to Specsavers’ functionality that allows you to try on virtual glasses, merchants are beginning to see how AR can increase conversion rates and minimize returns.
In this article, you’ll learn how to build effective AR ecommerce experiences for your merchant clients, including best practices for both creating 3D models and integrating AR into ecommerce stores.
Build apps for Shopify merchants
Whether you want to build apps for the Shopify App Store, offer custom app development services, or are looking for ways to grow your user base, the Shopify Partner Program will set you up for success. Join for free and access educational resources, developer preview environments, and recurring revenue share opportunities.
How AR can help merchants boost conversion rates
A recent study has shown that customers who used AR while visiting an ecommerce site spent around 20% more time browsing and viewed 1.28 times more products compared to customers who didn’t use AR. Crucially, their likelihood of making a purchase during their session also went up by almost 20%.
The potential conversion lift for merchants that add AR to their online stores is therefore significant, as demonstrated by two case studies of merchants who collaborated with Shopify Partner Modelry:
When fashion brand Rebecca Minkof adopted the use of 3D modeling and AR on its product pages, the company found that shoppers who interacted with a 3D model were 44% more likely to add it to their cart and 27% more likely to place an order than those who hadn’t, and when customers viewed a product—like a handbag—in AR and virtually placed it in front of them, they became 65% more likely to make a purchase.
Direct-to-consumer company Gunner, which specializes in heavy-duty kennels that keep pets safe during transportation, experienced a similar conversion boost. Gunner added Shopify’s native support for 3D models and AR to its site, enabling shoppers to virtually place a kennel beside their dog to gauge its size. As a result, the company experienced a 3% increase in cart conversions, a 40% increase in order conversions, and a 5% reduction in returns.
So, how can you support merchants in considering AR in their strategy and in implementing effective AR experiences on their ecommerce stores? We asked a few Shopify Partners, including app developers and AR experts, for their tips to help you get started. Let’s first take a look at how to create a 3D model of your client’s product—an essential part of any AR experience.
Best practices for creating a 3D model
To create an effective AR experience for your client, you first need a 3D model of the product you’d like to showcase. This 3D model can then be uploaded to the merchant’s product page to be viewed and interacted with by customers—without the need to download an additional app.
Theoretically, merchants could just create their own 3D models.
“There are scanning tools that claim you can just take a few photos of a product and BAM!, a beautiful 3D model is made,” cautions Daniel Beauchamp, principal AR/VR engineer at Shopify. “But that’s not always the case. The models that are produced with these tools normally need to be cleaned up and aren’t always best suited for ecommerce use cases, when you want the product to look as crisp as possible.”
Other merchants turn to marketplaces for freelance services like Fiverr but Maël Valma, founder and developer at Shopify Partner Angle 3D (whose Shopify app Angle 3D Configurator provides merchants with a 3D product customization and AR experience), warns that the 3D artists on some freelance platforms don’t always have the expertise to create 3D models for the web.
“Unfortunately, merchants often receive very low-quality 3D models through services like Fiverr,” he says. “Maybe the 3D artists you find on there can build something for a 3D movie or create a static 3D render but often they come back with models that are 1 GB in size, and that just doesn’t work on the web.”
The best solution for merchants is to hire a Shopify expert to create a 3D model. So, if you want to help your client with creating a 3D model for an excellent AR ecommerce experience, here are a few points to consider:
Try to get access to the physical product to work from
Eastside Co’s Jason Stoke points out that getting your hands on the actual product you’re creating a 3D model for can be hugely beneficial.
“Sometimes photos just can’t capture the types or feel of materials used in the product and that can be important in making the product look right further on down the line,” he says.
Take photos and videos of the product from all angles
Reference photos and videos can help capture some details of the surfaces, Stokes explains. Collecting enough information about the product before you start the 3D modeling process ensures visual accuracy as you’ll be able to see components from all sides, and you aren’t working only from written measurements.
Begin modeling with simple shapes
Taking a low-resolution model and increasing the number of polygons smooths the model out, Stokes advises.
A polygon is a geometric shape that is created by connecting three or more line segments into a closed-form, like a square, triangle, or hexagon. In 3D it’s usually triangles, and every model can be divided into a number of polygons—the so-called polygon count or polycount. The smaller the polygons, the smoother the model and the higher the polycount.
Optimize your 3D model for the web
For AR experiences on online stores you need a high-quality 3D model that is also optimized and compressed.
“On Shopify, there’s a size limit for 3D models and that’s for a very good reason because it needs to load really fast on the website,” says Angle 3D’s Maël Valma. “It also still needs to look good, so it’s a trade-off between quality and size.”
In general, the file size of a 3D model for a Shopify merchant is typically around 4 MB and shouldn’t exceed 15 MB.
Here are a couple of ways to optimize the file size of a 3D model:
Keep the 3D model's polycount as low as possible
Even though the smartphones we now carry in our pockets are incredibly powerful computing devices, Stokes warns that they would have a very hard time rendering millions of polygons all at once. Because augmented reality renders the model in real time, it’s important to keep the polygon count at manageable levels while maintaining all the details of the product.
“The key is to find the balance, so that the 3D model is still smooth,” Valma recommends. “Most of the time reducing the polygon count is the solution that significantly decreases the size of the 3D model.”
Create high-quality, optimized textures
The second thing Valma always suggests to his customers is to work on the textures. Ideally, these should be JPEGs as they are less heavy and can be compressed without affecting the quality of the image.
Modern-day, real-time renderers export textures using a workflow called physically based rendering (PBR).
“This means that the lighting and rendering engine tries to accurately map the way light behaves when hitting the surface of a model based on the material of that surface,” Stokes explains. “Modern texturing software such as Substance Painter has made creating realistic materials very easy.”
Textures consist of several layers to indicate characteristics such as roughness and metalness.
“3D is all about tricking the eye,” Valma says. “So each of these layers is included in the 3D model, and the more textures you have and the more complex they are, the more it will increase the size of the model, which will slow down the loading of the 3D model.”
To optimize each layer, Valma suggests striking a balance between reducing the texture resolution and compressing the file, depending on the 3D model you’re working with.
“It’s best practice to ensure your textures are square and sized to the power of two, so for example 512 x 512 pixels, “Valma explains. “A 4096 x 4096 dimension would be a 4k texture, which is really high-definition and looks amazing but won’t perform well. Generally, we work with 2k textures, so 2048 x 2048 pixels. Experiment with the size and check if the textures still look good.”
To learn more about the standards that you need to keep in mind when creating 3D models for merchants, refer to the guide in Shopify’s help center and use this checklist to make sure that a 3D model is ready to be delivered to a merchant or a 3D partner.