スタイルと配置 | SDK 2.0

Web SDK ボタンのスタイルを設定する

TypeScript

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% までの下部にアンカーされたシートです。 744px 以下では全画面になります。移行後に既存のダイアログ CSS オーバーライドを再確認します。

アクセシビリティとページの動作

ボタンにはわかりやすいラベルと十分なコントラストを使用します。
キーボードアクセス、フォーカスの復元、エスケープとスクロールの動作をテストします。
実際のスマートフォンでレイアウト、ズームされたテキスト、狭い画面を確認してください。
SPREEAI がロードできない場合でも、製品情報とチェックアウトを使用できるようにします。

Shopifyの配置

Shopify のテーマエディターでアプリブロック設定を使用します。 Web SDK スタイルオプションを Shopify アプリ構成にコピーしないでください。参照 Shopify統合.

出典参照