How to Build Effective AR Ecommerce Experiences

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.

基于“增大化现实”技术的电子商务几乎使顾客试穿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 toa recent report by Statista.

Jason Stokes, founder and CEO of Shopify Plus agencyEastside Co, saysthe technology is gaining traction in ecommercespecifically 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, fromIkea’s AR appthat lets you try a table for size in your dining room toSpecsavers’ functionalitythat 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.

How AR can help merchants boost conversion rates

A recent study表明,顾客使用基于“增大化现实”技术而visitin吗g 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%.

Thepotential conversion lift for merchantsthat add AR to their online stores is therefore significant, as demonstrated by two case studies of merchants who collaborated with Shopify PartnerModelry:

Rebecca Minkof

When fashion brandRebecca Minkof adopted the use of 3D modeling and ARon 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.

Gunner Kennels

Direct-to-consumer companyGunner, 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 ARto 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,” cautionsDaniel 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 PartnerAngle 3D(whose Shopify appAngle 3D Configuratorprovides 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 tohire 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

即使我们现在的智能手机带在我们的订单ckets 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 asSubstance Painterhas 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 tothe guide in Shopify’s help centeranduse this checklistto make sure that a 3D model is ready to be delivered to a merchant or a 3D partner.

Best practices for integrating AR into ecommerce stores

Once the 3D model has been created, you need to integrate it into the AR experience of the merchant’s online store. Again, there are several best practices to consider to optimize its impact.

It’s important to note thatmost Shopify themes support 3D models out of the box, enabling you to offer an in-browser 3D experience that works in all modern browsers and devices, which allows zooming, spinning, and the inspection of every little detail. For these features to appear on the front-end of the merchant’s store, you might need to update their theme to be able to upload 3D model files through the product section of the Shopify admin.

So whether you’re using Shopify’s native support or customizing the experience, what do you need to keep in mind?

Shopify Plus agencyWe Make Websitesrecently worked with toy company Hasbro on a temporary AR experience that enabled customers to view how collectables would look in their own space to make informed purchasing decisions.

Reflecting on the lessons the team learned from the project, We Make Websites’ design and experience director Kerrin Meek says: “The key to successful ecommerce design is ensuring the experience is user-friendly, accessible, and adds value to the customer journey. It should be intuitive, easy to use, and work on multiple devices to maximize the benefits of the technology.”

The key to successful ecommerce design is ensuring the experience is user-friendly, accessible, and adds value to the customer journey. It should be intuitive, easy to use, and work on multiple devices to maximize the benefits of the technology.

If you create a custom experience, the technical integration of AR into the ecommerce platform must also be done with consideration to avoid any negative impact on website performance, Meek adds. To make the process easier, keep the experience simple and focused on value, balancing form and function. And if you use Shopify’s built-in 3D functionality, it already supports lazy loads and has little impact on website performance.

Shopify Plus partner agencyDisco Labs, meanwhile, recently worked with merchant The Sheet Society to design and implement theirBed Builder. The project gives customers the ability to mix and match a wide range of color, design, and material options to create the ideal bedding setup for their home. On a smartphone, customers can use the camera to preview what the various combinations would look like on their own bed through an augmented reality experience.

Disco Labs’ founder and CEO Gavin Ballard acknowledged there was some initial apprehension about the scale of the project.

“It was our first AR project, and we knew Shopify's native AR support had improved, but we needed to take a custom approach due to the dynamic nature of the bed builder's options,” he explains. “We had eight products in 10 sizes, each with eight materials and 20+ color options. This gave us a baseline of over 64 million possible bed configurations, something that wasn’t possible to generate 3D models for in advance!”

Disco Labs and The Sheet Society decided to bring AR solutionVarianton board for the Shopify integration. Variant’s dynamic generation technology allowed the team to map all possible component and material options into a single 3D file, and have that file rendered dynamically on demand as customers updated their bundle options.

“Once we had Variant up and running, the actual integration into the Shopify front end was actually pretty straightforward,” Ballard remembers. “We just needed to map our existing set of options to the corresponding Variant configuration, write some JavaScript to detect the AR capabilities of the browser being used, and render a link to Variant’s dynamically generated endpoint for AR-capable devices.”

Ballard shared his top three takeaways from the project to help you master your own AR integrations:

Validate the use case

“We knew AR would be a winner for The Sheet Society because of the success of the first phase of the Bed Builder and ongoing customer demand. However, we’ve seen plenty of other AR projects fail as they didn’t validate it was something their customers would actually find useful.”

Ensure you have a repeatable work pipeline for updates

“Just like any other content, AR content needs to be manageable by the merchant at scale. They can’t be blocked by needing to bring in a developer every time they want to add a new material or color option.”

Invest time in making your solution extendable

“There’s a fine line between building stuff you’re not going to need and planning for the future. For AR projects, I’d err on the side of spending a little more time than usual thinking about how the system could be extended down the line and ensuring your codebase is flexible enough to adapt.”

Adding an AR experience to an online store should be carefully planned. As is the case with every new technology, merchants shouldn’t add it for the sake of it, just because it’s trendy, but work with partners to make sure the medium is right for the project. Once the value of adding AR to the strategy has been established, the focus should be firmly on the user experience as well as workflows that enable merchants to update and extend the AR experience in the future.

Creating a more engaging shopping experience for merchants

As the technology is becoming more sophisticated and smartphones more powerful, AR experiences will become more affordable for merchants of all sizes. Especially for direct-to-consumer brands, a virtual try-on or view-in-place experience can be a decisive factor in a customer’s purchasing decision. Not only does it make shopping more fun, but it also helps the customer to shop with more confidence.

The time is right to educate your clients about the potential of integrating AR experiences in their online stores. Carefully consider the value it can provide to customers, following the best practices outlined in this article, and AR can give your clients or users a competitive edge and make a significant difference to their bottom line.

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.

Sign up