• Explore. Learn. Thrive. Fastlane Media Network

  • ecommerceFastlane
  • PODFastlane
  • SEOfastlane
  • AdvisorFastlane
  • LifeFastlane

How To Build Effective AR Ecommerce Experiences

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.

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.

Sign up

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:

Rebecca Minkof

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.

GIF of a woman's hand holding an iPhone displaying a black handbag on a table as an AR ecommerce experience.
To implement augmented reality technology on their ecommerce site, Rebecca Minkoff collaborated with Shopify Plus and 3D product visualization expert Modelry (Source: Modelry).

Gunner Kennels

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.

A shopper using Gunner's AR experience on their smartphone to visualize what the kennel they've selected would look like next to their dog on the back of a pickup truck.
Shoppers can use Gunner’s AR functionality on their smartphone to check if they’re choosing the right size kennel for their pet (Source: Shopify Plus).

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.

A 3D model of a brown shoe with rough polygons.
The progress of an AR project Eastside Co worked on recently, from rough polygons…
The 3D model of the shoe in grayscale with many more detailed polygons, now also featuring two straps with heart-shaped buckles.
…to adding more detailed polygons…
The finished render of the 3D model against a gray background, now with black and pink block coloring with silver heart buckles .
…to creating a render of the 3D model…
The 3D model of the black and pink shoes placed in the AR experience, on a wooden table with one shoe on its side.
…to how the 3D model appears in the AR experience (Source: Eastside Co).

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 that most 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 agency We Make Websites recently 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 agency Disco Labs, meanwhile, recently worked with merchant The Sheet Society to design and implement their Bed 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.

A customer holding a smartphone displaying the AR experience for The Sheet Society, which shows what the selected product would look like on their own bed.
The Sheet Society’s Bed Builder uses AR to let customers try out different colors and styles, which gives customers confidence in their purchasing decision, while also reducing potential returns (Source: The Sheet Society).

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 solution Variant on 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

This article originally appeared on the Shopify Web Design and Development blog and is made available here to educate and cast a wider net of discovery.
Prev
eCommerce Company Salaries Explained
ecommerce company salaries

eCommerce Company Salaries Explained

Next
What’s New At Aspire: Instagram Direct Messaging
what’s-new-at-aspire:-instagram-direct-messaging

What’s New At Aspire: Instagram Direct Messaging

You May Also Like
Share to...