Build a look & outfits

Shopify: shopper-created looks

Build a look starts on and depends on Virtual Try-On. Turn it on in Feature Settings and enable Show Build a look on the Fitting Room block. Save the theme and reload the storefront.

Shopify: merchant-created outfits

The Outfits tab is a separate beta workflow for pairing a Ready top and a Ready bottom. Select variants, name the outfit and create it. Creating an outfit does not make it live: enable it separately. Disabling an underlying product also disables the outfit.

Web SDK: request an existing outfit

Add a container with ID spreeai-look. Pass multiple garment entries, with optional variants, to request an available outfit that contains the selected products.

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-look",
    garments: [
      { garmentId: "TOP_GARMENT_ID", variant: { color: "blue" } },
      { garmentId: "BOTTOM_GARMENT_ID", variant: { color: "indigo" } },
    ],
  });
}

Check the result

• Confirm that all requested garments and pinned variants belong to an available outfit.
• Verify the outfit button and the garments shown after it opens.
• Test the no-match fallback and confirm the first garment is appropriate.
• Test cart integration separately. Shopify’s Add look to bag option adds the current product, not every item in a look.