樣式和放置

設定 Web SDK 按鈕的樣式

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 套用內聯樣式並覆蓋預設樣式表。其 text 值也優先於 button.text。使用 className 為您的附加按鈕類別。

支援的樣式字段

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

對話行為

v3 託管對話方塊是一個底部錨定的工作表,寬度最大為 1000 像素,高度為視窗的 95%。 744 像素或更窄時,它是全螢幕。遷移後重新檢查任何現有的對話方塊 CSS 覆蓋。

輔助使用和頁面行為

• 使用描述性標籤並為按鈕提供足夠的對比度。
• 測試鍵盤存取、焦點恢復、Escape 和滾動行為。
• 檢查真實手機上的佈局、縮放文字和窄螢幕。
• 如果 SPREEAI 無法加載,請保持產品資訊和結帳可用。

Shopify放置

使用 Shopify 主題編輯器中的應用程式區塊設定。請勿將 Web SDK 樣式選項複製到 Shopify 應用程式配置中。參見 Shopify 集成.