样式和放置

设置 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 集成.