V1

1.0.0-BETA, 1.0.0, 1.0.5

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 [e-mail].

• 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