Use the right identifier
A storefront product ID, SKU or variant ID is not automatically a SPREEAI garment ID. Maintain a mapping created through your ingestion or Shopify sync workflow. The garment must belong to the authenticated partner and be available for try-on.
Map a product selection
TypeScript
import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";
export const productOptions: RenderTryOnButtonOptions = {
elementId: "spreeai-try-on",
garments: [{
garmentId: "SPREEAI_GARMENT_ID",
variant: { color: "blue", fit: "regular" },
availableSizes: ["S", "M", "L"],
price: "$59.00",
}],
showSizes: true,
showPrices: true,
};variant can filter color, fit, gender and style. Documented matching is case-insensitive. Match color by its name, such as blue, rather than by a hex value.
Garment readiness
| State or condition | Integration action |
|---|---|
| Not synced / ingestion incomplete | Keep the normal product experience; do not promise try-on availability. |
| Ready but disabled in Shopify | Review and explicitly enable the intended product. Ready alone does not make it live. |
| Available garment and matching variant | Render the button for that selection. |
| No matching available outfit | Expect fallback to the first garment in the array. |
| Validation fails | No button is rendered; investigate the console and product mapping. |
Keep product data current
- Update displayed price and in-stock sizes when the product selection changes.
- Use unique container IDs for separate product buttons.
- When re-rendering a button, pass the current garment and variant selection.
- Review the returned cart data against your own catalog before creating a cart mutation.
Prepare garment assets
Use the current garment image standards for supported imagery and metadata. Resolve processing issues before enabling products; do not substitute placeholder garment IDs for production data.