> For the complete documentation index, see [llms.txt](https://docs.sizebay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sizebay.com/size-and-fit-data-integration/product-variants-integration/v1.md).

# V1

## Getting Started

For our script to properly integrate the variants, all of the **required metadata** described below will be fetched through the product page by our implantation team. Here's the final object's schema:

```
{
  sku: number | string;
  productId: number | string;
  source: "https://storename.com/your/catalog/url?skuId=SKU_ID&productId=PRODUCT_ID";

  images: string[]; // a list of colors (hex, hsl, rgb, etc)
  variants: { color: string; variant: string | number }[];
};

```

Let's now dissect it:

* `sku`: Product `SKU`
* `productId`: Product `ID`
* `source`: your catalog endpoint. It will be used by the Virtual Fitting Room to fetch the variants' metadata, based on their `SKU` and `PRODUCT_ID`. If your endpoint expects a different set of query parameters, please contact our team at <support@sizebay.com>.
* `variants`: As of today, our variants integration only detects the color and which variant ID it corresponds to.

After that, we'll add to the store domain's cookies the key `SIZEBAY_METADATA`, which serves as a middleware so the Virtual Fitting Room can detect the variants, thus rendering them into the screen.

### Aftermath

If everything is properly configured, this is what your Recommendation screen will look like:

![Product Variants carousel and photo slider](/files/-MeAuKTqBh1cP8WrGwBv)