Product data

The try-on needs to know two things about a product: its name and one picture of it. The script reads them from your page. You can also pass them yourself, and what you pass wins.

What the script reads from the page

First the page's JSON-LD product data, then its OpenGraph tags. Most shop platforms write both for you.

JSON-LD. A <script type="application/ld+json"> block with a Product (or a ProductGroup). It may sit inside an @graph.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "sku": "LO-1",
    "name": "Linen overshirt",
    "brand": { "@type": "Brand", "name": "Example" },
    "category": "Women > Jackets",
    "image": "https://www.example.com/img/overshirt.jpg"
  }
</script>

OpenGraph. Used when there is no usable JSON-LD product: og:title and og:image.

<meta property="og:title" content="Linen overshirt" />
<meta property="og:image" content="https://www.example.com/img/overshirt.jpg" />

If the page has neither a name nor a picture, no button is added, and the console says so.

The script does not read prices, stock or sizes.

The fields

Field	What it is	Read from the page
title	The product's name. Needed.	JSON-LD name, or og:title
imageUrl	One picture of the garment, as a full http(s) address. Needed.	JSON-LD image (the first one), or og:image
id	Your own product id. You get it back on Add to bag.	JSON-LD productID, sku or productGroupID, or product:retailer_item_id
variantId	Your id for the size or colour picked. You get it back on Add to bag.	Not read. Pass it yourself.
brand	The brand's name.	JSON-LD brand, or product:brand, og:site_name
category	What kind of garment it is.	JSON-LD category (the last part of Women > Jackets), or product:category
description	The product's description.	JSON-LD description, or og:description
url	The product page's address.	JSON-LD url or og:url, otherwise the page's own address

Long values are cut: a title at 300 characters, a description at 2,000.

For a ProductGroup, the name, brand, description and picture fall back to the group's first variant (hasVariant) when the group itself doesn't have them.

Passing it yourself

Pass product to init(). You only need the fields you want to set: the rest still come from the page.

Labbesne.push([
  'init',
  {
    product: {
      id: 'LO-1',
      title: 'Linen overshirt',
      imageUrl: 'https://www.example.com/img/overshirt.jpg',
    },
  },
])

init() only takes effect once, so the tag needs data-auto="false". See Setting it up yourself.

The selected variant

The page's product data usually names one main picture. If a shopper picks another colour, pass a function: it is called every time the try-on opens.

Labbesne.push([
  'init',
  {
    product: () => {
      const variant = shop.selectedVariant()
      return {
        variantId: variant.id,
        imageUrl: variant.imageUrl,
      }
    },
  },
])

shop.selectedVariant() stands for however your own page knows the selection.

You can also pass the product at the moment you open the try-on: Labbesne.open({ variantId, imageUrl }). What open() gets wins over the product option, and both win over the page.

The picture

Labbesne's server fetches the picture from the address you give. So:

• It must be reachable from the public internet, without a sign-in. A picture on localhost, on a private network or behind a password does not work.
• JPEG, PNG or WebP. The file's own contents are checked, not its name.
• 10 MB at most.
• It must answer within 10 seconds, with at most 3 redirects.
• Its host must be allowed for your store. Your store's own sites are. Any other host, such as a CDN, has to be added in the dashboard. See Image hosts.

When the picture can't be used, the shopper sees a message inside the try-on. The codes are in Errors.

The dashboard's Check this page reads the picture your page's own product data names. A picture you pass in code is not checked there. If its host isn't allowed, you find out from your page's error event, or from the refused list in the dashboard.