Size-aware fit | SDK 2.0

Shopify configuration

Size-aware fit starts on and works independently of Virtual Try-On. Add the SPREEAI Find your size block near the product’s size picker, save the theme and test an enabled product. Turning Size-aware fit off hides the button and stops size recommendations.

Web SDK configuration

enableSizingRecommendation requests the sizing recommendation flow inside try-on. showSizes displays supplied available sizes; showPrices displays the supplied price. All three default to false. Showing size labels alone does not enable a recommendation.

TypeScript

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-try-on",
    garments: [{
      garmentId: "YOUR_READY_GARMENT_ID",
      availableSizes: ["XS", "S", "M", "L"],
      price: "$89.00",
    }],
    enableSizingRecommendation: true,
    showSizes: true,
    showPrices: true,
    defaultUnits: "metric",
  });
}

Data and behavior

Supply the current in-stock size labels and display price from your storefront.
Confirm the product’s required fit and sizing data is supported through onboarding.
Use defaultUnits to choose metric or imperial measurements in the profile.
Keep the brand’s size chart available. A visual preview or recommendation does not guarantee physical fit.

Standalone sizing

The returned v3.0.0 SDK exposes renderTryOnButton(). It does not expose a callable renderSizingButton(), even though sizing-related types remain in the package. Use the supported embedded flow or Shopify block.

Cart verification

On Shopify, Enable Add to bag starts off. When enabled, verify the current product is added in the size selected in the fitting room. On custom web, validate the callback data and map it to your own cart’s product and variant IDs.

Source references