で構築する
SPREEAI.

Shopify アプリ

ストアがShopifyで動作し、カスタムバックエンドを必要としない場合は、マネージドアプリを使用してください。現在のオンボーディングフローでは、契約とサブスクリプションの完了後にストアが接続されます。セットアップ画面にAPIキーをコピーする必要はありません。

1. 公式 SPREEAI アプリをインストールし、管理された同意フローを完了します。
2. 初期カタロググループを同期し、製品の準備状況を確認します。
3. 複製したテーマの配置とスタイルをカスタマイズします。
4. 対象となる商品、バリエーション、モバイルでの行動、カートへの追加を検証します。
5. ブランドと QA の承認後にのみ公開します。

公式 Shopify オンボーディング ガイドを開く

Web SDK クイックスタート

使用 @spreeai/web-sdk カスタム配置、スタイル設定、イベント、サイズ設定、カートの動作などに対応しています。

npm install @spreeai/web-sdk@3.0.0

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

一度初期化し、対象となる製品のみをレンダリングし、文書化されたクライアント コールバックを既存の分析に接続します。現在のインターフェイスを確認します。 公式Web SDK APIリファレンス

APIアクセス

公開されているSwaggerリファレンスは、オンボーディング時に承認されたサーバーサイドワークフローにのみ使用してください。機密情報はサーバー上に保管し、テスト環境と本番環境へのアクセス権限を分離し、認証情報は必要最小限の環境に限定してください。

承認された公開リファレンスに存在しない直接 REST エンドポイント、Webhook、または認証動作は、パートナー エンジニアリングが確認するまで利用できないものとして扱う必要があります。

承認されたパブリック API リファレンスを開く

衣料品アセットのベースライン

• JPEGまたはPNG。最小 2,000 × 2,000 ピクセル、約 4K が推奨されます。
• 画像ごとに 1 つの衣服が配置され、きれいなエッジとニュートラルで均一な照明が中央に配置されています。
• 正面図が必要です。そのエクスペリエンスが有効になっている場合は、背面ビューが推奨されます。
• ファイル名およびカタログレコードには、安定したSKU、スタイル、または衣料品IDが含まれています。
• 手、ハンガー、スタイリングの小道具、透かし、または無関係な衣服がアイテムを妨げないでください。
• エクスペリエンスを有効にする前に、バリアントマッピングを確認しました。

QAとリリース

• 最新のモバイルブラウザとデスクトップブラウザで、顧客体験全体をテストしてください。
• 製品とバリエーションのマッピング、衣料品の準備状況、カートの動作を確認します。
• キーボード アクセス、フォーカス順序、アクセス可能な名前、およびフォールバック動作を確認します。
• SPREEAI を有効にする前と後の商品ページのパフォーマンスを測定します。
• 実行ロード、空、利用不可、タイムアウト、および再試行の状態。
• 同意文言と顧客画像の承認済みの取り扱いを確認します。
• 生産前にエンジニアリング、コマース、QA、ブランドの承認を取得します。

トラブルシューティング

ボタンが表示されません

SDK の初期化、クライアント ID、ホスト要素 ID、製品適格性、ガーメントの準備状況、バリアント マッピングを確認します。次に、トークンを共有せずにブラウザ コンソールとネットワーク エラーを確認します。

間違った製品またはバリエーションが表示されます

店頭の製品 ID とバリアント ID を、SPREEAI に送信されたレコードと比較します。買い物客がバリエーションを変更すると、表示されるリクエストが変更されることを確認します。

エクスペリエンスが遅いか、利用できません

動作確認済みの製品をテストし、動作環境を確認し、ブロックされたリクエストを検査し、正常なブラウザセッションと比較します。サポートのために、タイムスタンプと再現可能な手順を記録してください。

開発者サポートを受ける

電子メール support@spreeai.com 環境情報、製品または衣類のID、ブラウザまたはデバイス、おおよそのタイムスタンプ、想定される動作、再現手順を記載してください。機密情報や顧客の画像は含めないでください。