Shopify without a developer

You can put Labbesne on a Shopify shop by pasting one line into your theme. There is no Labbesne app in the Shopify App Store yet, so this is done in the theme's code editor. It takes a few minutes.

This page says plainly what works that way and what doesn't.

What you get

The Try it on button, next to your Add to cart button, on product pages.
The product's name and picture, read from the product page.
The whole try-on: the shopper's photo, and the picture of them wearing the garment.

What you don't get without code

Add to cart inside the try-on. The result shows the picture, and the shopper can save it. To buy, they close the try-on and use your own Add to cart button. Putting an Add to cart button on the result needs a few lines of code: see For a developer below.
The right picture for a second colour. The script reads the picture your product page names as its main one. If a shopper picks another colour, the try-on still uses the main picture. Fixing that needs code: see Product data.
Hiding the button on some products. The button shows on every product page that has a name and a picture, including products that can't be tried on, such as a candle or a gift card. Hiding it on those needs a change to the theme.

We have not tested every Shopify theme. If the button does not appear on yours, see If the button doesn't appear.

Install

Make a store in the Labbesne dashboard. Give it your shop's address as shoppers see it, for example https://www.example.com. If shoppers reach your shop on more than one address, add each one under Sites and key.
Copy the tag from the store's Install page.
In Shopify admin, go to Online Store → Themes. On your theme, open the menu and choose Edit code.
Open layout/theme.liquid. Find the line </head>.
Paste this just above </head>, with the tag you copied in the middle:
liquid
```
{% if template.name == 'product' %}
<script
  async
  src="https://app.labbesne.com/sdk/v1.js"
  data-key="pk_your_store_key"
></script>
{% endif %}
```
The first and last lines keep the script to product pages. Without them the script also runs on your home page and collection pages, where it has no product to try on.
Save, then open a product page on your shop.
Allow the host your pictures are on. Back on the store's Install page, paste a product page's address and press Check this page. On Shopify a product picture's address is usually under your shop's own domain, or on the shared host cdn.shopify.com. Which one depends on your theme. If the check says the picture is on a host that isn't allowed, press the button it offers. See The picture's host below.
Try it yourself: tap Try it on, take a photo, and wait for the picture.

To take it off again, delete those lines and save.

Try it on a copy first

In Online Store → Themes, duplicate your theme and edit the copy. Preview it, and publish it when the button looks right.

The picture's host

Labbesne fetches a product's picture only from your store's sites and from the hosts you allow in the dashboard. A shop's own sites are always allowed. Anything else has to be added, under Image hosts on the store's Sites and key page.

If your pictures' addresses start with your shop's own address, as shoppers see it, there is nothing to add.
If they start with another address of your shop, for example without www, or your myshopify.com address, allow that host. The match is exact: www.example.com does not cover example.com.
If they start with cdn.shopify.com, allow cdn.shopify.com. Know what that means: it is shared by many shops, so it allows every picture on it, not only yours.

You don't have to work out which it is. Check this page names the host, and so does the Try-ons were refused notice on Sites and key after a shopper was refused.

Until the host is allowed, the button shows, and a shopper who takes their photo is then told "This item can't be tried on". No credit is taken.

If the button doesn't appear

Check the address. The dashboard's Install page has Check this page: paste a product page's address. It says if the page is not on the store's list of sites.
Place the button yourself. In the theme editor (Customize), add a Custom Liquid block to the product section where you want the button, with this in it:
html
```
<div data-labbesne-button></div>
```
Write to us. Send the address of a product page to hello@labbesne.com and we will look.

More causes are in Troubleshooting.

For a developer

Everything in The SDK works on Shopify. The two things shops ask for first:

Add to cart on the result. Shopify themes keep the selected variant's id in the product form, and Shopify's cart accepts it at /cart/add.js. A sketch, to adapt and test on your theme:

html

<script>
  window.Labbesne = window.Labbesne || []
  Labbesne.push([
    'on',
    'addToBag',
    async () => {
      const id = document.querySelector('form[action*="/cart/add"] [name="id"]')?.value
      if (!id) return { ok: false, message: 'Pick a size first.' }
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items: [{ id, quantity: 1 }] }),
      })
      return { ok: response.ok }
    },
  ])
</script>

Your theme's cart drawer and cart count will not know about the new line until the theme refreshes them. How to do that differs from theme to theme.

The selected colour's picture. Pass product as a function that returns the selected variant's picture. See Product data.

Shopify without a developer ​

What you get ​

What you don't get without code ​

Install ​

The picture's host ​

If the button doesn't appear ​