ルックと衣装を構築する

Shopify: 買い物客が作成したルックス

ルックの構築は仮想試着から始まり、仮想試着に依存します。機能設定でオンにして有効にします 表示する ルックを構築する フィッティングルームブロックにあります。テーマを保存し、ストアフロントをリロードします。

Shopify: 商人が作成した衣装

[Outfits] タブは、Ready トップスと Ready ボトムスをペアにするための別個のベータ版ワークフローです。バリエーションを選択し、衣装に名前を付けて作成します。衣装を作成してもそれが有効になるわけではありません。個別に有効にします。基礎となる製品を無効にすると、衣装も無効になります。

Web SDK: 既存の衣装をリクエストします

ID を使用してコンテナを追加する spreeai-look。選択した製品を含む利用可能な衣装をリクエストするには、複数の衣服エントリをオプションのバリアントとともに渡します。

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-look",
    garments: [
      { garmentId: "TOP_GARMENT_ID", variant: { color: "blue" } },
      { garmentId: "BOTTOM_GARMENT_ID", variant: { color: "indigo" } },
    ],
  });
}

結果を確認する

• リクエストされたすべての衣服とピン留めされたバリエーションが利用可能な衣装に属していることを確認します。
• 衣装のボタンと、開いた後に表示される衣服を確認してください。
• 一致しないフォールバックをテストし、最初のガーメントが適切であることを確認します。
• カートの統合を個別にテストします。 Shopify のバッグにルックを追加オプションでは、ルック内のすべてのアイテムではなく、現在の製品が追加されます。