All posts

Shopify · Virtual try-on · Ecommerce

How to add a virtual try-on button to your Shopify store

Put a Try it on button on every Shopify product page with one Custom Liquid block. Step-by-step setup, photo tips, costs and how to know it's working.

· 4 min read

Woman in boutique talks on phone with laptop, surrounded by clothes.
Photo by Vitaly Gariev on Pexels

Search “virtual try-on Shopify” and most of what comes back is an app that wants a 3D model of every product, a monthly fee before you've seen a single result, or both. If you sell clothing or jewellery on Shopify, you don't need either. You need a button under Add to cart that lets a shopper see your product on themselves, using the product photo you already have.

This guide shows you how to add one in about five minutes, with no theme code beyond a single block you paste in the theme editor. It also covers which products and photos work best, what it costs and how to tell if it's helping.

What your shoppers will see

  1. A Try it on button on the product page, under the Buy buttons.
  2. They press it, confirm the photo is of them and that they're 18 or over, and choose a photo from their phone.
  3. About fifteen seconds later they see your product on their own photo, without leaving your shop.
  4. They close the window and they're still on the product page, one tap from Add to cart.

The shopper doesn't need an account, an app or a password. Their photo goes to Clara inside Clara's own window, the picture comes straight back to them, and neither is stored. Your theme and your Shopify store never see the photo at all, which is one less thing for you to protect.

Before you start

  • An Online Store 2.0 theme, such as Dawn or any recent theme from the Shopify Theme Store. These all have a Custom Liquid block on the product page.
  • A free Clara account, with credits to pay for your shoppers' try-ons.
  • Product photos that show the whole piece clearly. The photo tips further down cover what that means.

Step by step: add the button

1. Create your shop key in Clara

Sign in to Clara and open the virtual try-on page.

Under For shops, add your shop: choose Shopify and enter your store's web address.

Set a monthly limit. This is the most try-ons Clara will ever run for your shop in a month.

Clara shows your shop key, already filled into the snippet you'll paste next.

2. Paste the snippet into your theme

In Shopify, go to Online Store → Themes → Customize.

Use the page picker at the top to open a product page.

Under Product information, choose Add block → Custom Liquid.

Paste the snippet from Clara into the block.

3. Place it and save

Drag the Custom Liquid block so it sits under the Buy buttons.

Press Save.

Open any product on your live store and press Try it on to test it with your own photo.

Because the block is on the product template, it appears on every product that uses that template. The snippet uses the photo of the variant the shopper has selected, or the product's main photo if the variant has none, so a shopper looking at the red dress tries on the red dress.

Which products to turn it on for

Try-on is strongest where the shopper's question is “will it suit me?” rather than “will it fit me?”. That means:

  • Tops, dresses, jackets, knitwear and trousers, especially in bold colours or prints.
  • Necklaces, pendants, bracelets, bangles, rings and earrings.
  • Pieces that look very different on a hanger than on a body, such as wrap dresses or oversized shirts.

It's weaker on shoes, bags, hats and sunglasses, so if you sell those too, use a separate product template without the block for them. Shopify lets you assign a template per product in the product's Theme template setting.

Product photos that give good results

  • The whole piece in frame: laid flat, on a hanger, on a mannequin or on a plain background.
  • True colour. Heavy filters on the product photo carry through to the try-on.
  • One product per photo. A styled shot with a jacket, scarf and bag leaves the model guessing which one you mean.
  • For jewellery, a close, sharp photo where the chain, stones and clasp are easy to see.

If your main photo is a busy lifestyle shot, make a clean version the first image of the variant. A plain background version is also what Google Shopping and most marketplaces prefer, so it's worth having anyway.

What it costs, and how you stay in control

Each try-on is one AI render and uses 8 Clara credits from your account. Shoppers never pay and never see a price. Three limits keep the bill predictable:

  • Your monthly limit. When it's reached, the button stops offering try-ons until next month.
  • A per-shopper limit of 6 an hour and 15 a day, so one visitor can't use up your month.
  • Your key only works on your own store's address, and only on images your store hosts.

Start with a limit you'd be comfortable spending on a month of testing. You can raise it once you've seen which products people actually use it on.

How to tell if it's working

  1. Write down a normal week's numbers first: orders and returns on the products you'll turn it on for, and how many “how would this look on me?” messages you get.
  2. Turn it on for your best-sellers first, not the whole catalogue.
  3. After four weeks, compare the same numbers on the same products.
  4. Keep it on the products where shoppers press the button, and take it off the ones where they don't.

Turn your next take into a video people finish.

Captions timed to every word, a pinned hook and a tighter edit, all from the footage you already have.

Start free