商品カスタマイザー：連携オプション機能を使ったデザインの表示

あなたの商品のカスタマイズサービスでは、顧客が1つ以上のパーツを選択してカスタマイズできるデザインを提供しているかもしれません。連携オプション機能を使うと、パーツの内容、特徴、または属性をオプションとして設定でき、対応するパーツ（画像やテキストなどの実際のパーツ）が最終デザインに表示され、顧客が効果をプレビューできます。これにより、カスタマイズサービスがより直感的で動的な体験になります。

利用例

例1

顧客は説明テキスト付きの画像を選択し、プレビューではその画像がデザイン全体に重ねられた様子が表示されます。

例2

顧客はキャラクターの肌の色をカラーチップから選択し、プレビューではその肌の色のキャラクター画像が表示されます。


 

例3

顧客はドロップダウンメニューからテキストを選択し、それが商品画像に表示されます。

この機能の仕組み

このカスタマイズ体験を実現するために、実際には2つのオプションセットを作成します。1つ目は顧客が操作するためのもので、シンプルなカラーチップやテキストのドロップダウン、またはカスタマイズの選択肢を明確に表すものです。2つ目は最終的な商品画像を表示するためのものです。そして、それらを連携させて、各セットのオプションを対応させます。例えば、1つ目のセットが猫のキャラクターのカラーチップで、白、黒、オレンジ、グレーの順に並んでいるとします。2つ目のセットでは、同じ順序で猫の画像（白猫、黒猫、オレンジ猫、グレー猫）を用意します。こうすることで、顧客がオレンジ色を選択すると、プレビューでオレンジ猫の画像が商品画像に重ねて表示されます。

一般的な手順は以下の通りです：

1. 顧客が最初に見る選択肢のセット（A）を作成します。これらの選択肢はレンダリングには使用されないため、キャンバスエリアの外に移動してください。
2. レンダリング用の2番目のセット（B）を作成します。このオプションを非表示にするを必ず選択してください。これにより、商品ページにオプションとして表示されません。
   
3. セットAのパーツで連携オプションのドロップダウンメニューから「B」を選択して、セットAとBを連携させます。AとBの選択肢の順序が正しく一致していることを確認してください。