Styling & placement

Style the Web SDK button

import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";

export const brandedButton: RenderTryOnButtonOptions = {
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
  className: "product-try-on",
  features: {
    tryOnButton: {
      text: "Try it on you",
      backgroundColor: "#171717",
      textColor: "#ffffff",
      borderRadius: "6px",
      padding: "14px 24px",
      fontSize: "16px",
      width: "100%",
    },
  },
};

features.tryOnButton applies inline styles and overrides the default stylesheet. Its text value also takes precedence over button.text. Use className for your additional button class.

Supported style fields

text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border and boxShadow.

Dialog behavior

The v3 hosted dialog is a bottom-anchored sheet, up to 1000px wide and 95% of the viewport height. At 744px or narrower, it is full screen. Re-check any existing dialog CSS overrides after migrating.

Accessibility and page behavior

• Use a descriptive label and sufficient contrast for the button.
• Test keyboard access, focus restoration, Escape and scroll behavior.
• Check layout on real phones, zoomed text and narrow screens.
• Keep product information and checkout usable if SPREEAI cannot load.

Shopify placement

Use the app block settings in the theme editor for Shopify. Do not copy Web SDK styling options into the Shopify app configuration. See Shopify integration.