バリエーション表示のパターンを商品ごとにかえる
＜目次＞
商品バリエーションの表示について
商品詳細画面
商品詳細バリエーション表示は、「商品詳細レイアウト」に配置された「バリエーション表示用のカートパーツ」により決まります。
商品を表示している「商品詳細用レイアウト」に、以下のバリエーション表示用のシステムパーツをいずれか1つ必ず配置 します。
バリエーション表示は、以下の5種類のいずれかになります。
※ バリエーション価格登録がある場合は、各バリエーションに価格が表示されます。
商品一覧（商品グループ・検索結果一覧）
バリエーション表示は、以下の2種類のいずれかになります。
カートに入れる］ボタンを押下すると、以下のようなモーダルが表示され、「商品詳細」画面に遷移することなくカート投入ができます。
- ただし、バリエーション価格が設定されている場合は、［カートに入れる］ボタンではなく［詳細を見る］ボタンが表示されます。 以下のようなモーダルは表示されず、必ず「商品詳細」画面へ遷移します。
バリエーション自体の表示設定について
バリエーションの登録から表示設定までの一連の流れは、「バリエーション」設定の流れをご覧ください。
表示イメージや表示変更については、パーツごとに、以下をご覧ください。
商品詳細バリエーション表示の変更方法
バリエーション表示を変更したい「レイアウト」の確認
該当商品の運用＞商品管理＞商品情報「商品レイアウト・SEO設定（コマースクリエイター）」-レイアウト割当にてご確認いただけます。
スマートフォン最適化サイトなどで複数のテーマを使用している場合は、それぞれのテーマ（PC用・スマートフォン用など）で任意のバリエーション表示ができます。 その場合、それぞれのテーマのレイアウトで変更作業が必要となります。
変更する商品詳細の「レイアウト」を開く
コマースクリエイター＞テーマ一覧から、ご利用中テーマのレイアウト一覧へ遷移します。
コマースクリエイター＞テーマ＞レイアウト一覧にて「種類：商品」で検索するボタンを押下します。
該当の「商品詳細」レイアウトの 変更するボタンを押下します。
「バリエーション表示用のカートパーツ」の配置エリアを開く
コマースクリエイター＞テーマ＞レイアウト変更へ遷移します。
パーツ配置エリアで以下の手順で開きます。
※ 以下スタートアップテーマでの配置を例に説明します。
パーツ配置エリアで他にレイアウトパーツがあれば 開くボタンを押下し、現在配置されているカートボタンパーツを探します。
「スタートアップテーマ(PC/タブレット)ー商品詳細（横2列レイアウト）／商品詳細（上横1列・下横2列レイアウト）」の場合は、初期状態で 「商品名・価格など商品情報（レイアウトパーツ）」の中 に配置されています。
「バリエーション表示用のカートパーツ」の探し方
パーツ配置エリアにあるレイアウト確認ボタン 押下して、「bodyに含まれるパーツ」タブを押下すると、すべての配置パーツ名が表示されます。
パネルパーツについてはパネルパーツに含まれるパーツも出力されます。
パーツ検索エリアで、配置したい「バリエーション表示用のカートパーツ」を検索する
パーツ配置エリアにてカートパーツを配置したい階層を開いた状態で、パーツ検索エリアで「キーワード：カート」で検索する、または 検索条件を表示するボタンを押下して、「種類：システムパーツ」を指定して検索します。
「バリエーション表示用のカートパーツ」を配置する
使用したい「バリエーション表示用のカートパーツ」をドラッグ＆ドロップするか、 配置するボタンを押下してパーツエリアに配置します。
現在バリエーション表示用のシステムパーツ（初期は「カート・バリエーションごとにカートボタンパーツ」）が配置されている場所に並べます。（配置を変えずに入れ替えできます。）
使用しない「バリエーション表示用のカートパーツ」を外す
使用しないバリエーション表示用のシステムパーツの 操作するボタンから「 パーツを外す」を選択して、使用するバリエーション表示用のシステムパーツのみが配置されている状態にします。
保存する
レイアウト画面右下の［保存する］ボタンを押下します。
スマートフォン最適化サイトなどで複数のテーマを使用している場合は、すべてのテーマ（PC用・スマートフォン用など）で同様の作業を行います。
確認する
ECサイトを表示するか、プレビューボタンからバリエーションが登録された商品の商品詳細ページを確認します。
任意のバリエーション表示用パーツで表示されることを確認してください。
初期設定パーツに関する補足
「カート・バリエーション選択スライダーパーツ」が初期設定であるのは、以下の「レイアウト」です。
その他は、「カート・バリエーションごとにカートボタンパーツ」が配置されています。
- 2023.07.11バージョンアップ以降に、新規で店舗発行された店舗様のすべての「商品詳細」レイアウト
- 2023.07.11バージョンアップ以降に、新規追加した「商品詳細」レイアウト（※既存店舗様含む）
商品ごとに最適なカートパーツを表示する（レイアウト割当機能を利用）
レイアウト割当機能を利用し、商品ごとに商品詳細画面に表示するカートを指定できます。
バリエーション表示用のカートパーツ」を差し替えた商品詳細レイアウトを複数用意し、商品のバリエーションに適した商品詳細レイアウトを設定します。
（バリエーション表示システムパーツ選択例）
| 商材 | システムパーツ | 説明 |
|---|---|---|
| 服 | カート・バリエーションごとにカートボタンパーツ | カラー・サイズ別で表示できるため |
| シューズ | カート・バリエーション表組パーツ | カラー・サイズ別で、かつサイズ数が多い商材に適するため |
| 雑貨 | カート・セレクトボックスのみパーツ | カラーのみ選択するため |
商品詳細レイアウトを複製する
任意のバリエーション表示用パーツを配置するために、商品詳細レイアウトを複製します。
「種類：商品詳細」レイアウトの 複製するボタンを押下します。
レイアウト複製モーダルが表示されます。
レイアウト名を入力し「レイアウトを複製する」ボタンを押下します。
「レイアウトを複製する」ボタンを押下した時点で新しいレイアウトが追加されています。
複製したレイアウトにて、「バリエーション表示用のカートパーツ」を差し替える
複製したレイアウトにて、パーツ配置エリアに配置されている「バリエーション表示用のカートパーツ」を差し替えます。
手順はこちらをご覧ください。
割当名を設定する
「バリエーション表示用のカートパーツ」を差し替えた商品詳細レイアウトに割当名を設定します。
［変更］ボタンを押下すると、レイアウト割当モーダルが表示されます。
任意の割当名を入力してOKボタンを押下します。
割当名がパーツ配置エリアの上に表示されます。
割当名を設定したレイアウトを「有効にする」
パーツ検索エリアの上にある「有効にする」チェックを選択します。
「有効にする（デフォルトレイアウトにする）」と表示されている場合は、割当名が設定されていません 。
現在ECサイトに反映している商品に表示される可能性があるので、必ず確認してください。
保存する
レイアウト画面右下の「保存する」ボタンを押下します。
スマートフォン最適化サイトなどで複数のテーマを使用している場合は、すべてのテーマ（PC用・スマートフォン用など）で同様の作業を行います。
また、ほかのバリエーション表示を使用したい場合は、同様にレイアウトを複製します。
レイアウトは上限数10,000まで追加できます。
保存する
運用＞商品管理＞商品詳細「商品レイアウト・SEO設定（コマースクリエイター）」を開きます。
レイアウト割当にあるレイアウト割当名の「割当名一覧」ボタンを押下すると、商品詳細レイアウトに登録されている割当名が表示されます。
割当名を選択することで、商品を表示する商品詳細レイアウト（配置したバリエーション表示パーツ）を選択できます。
登録する
画面下の「登録する」ボタンを押下します。
「レイアウト割当」欄の「利用中のレイアウト」に、「レイアウト割当名」が設定されている商品詳細レイアウトが表示されます。
- 商品の割当名設定は、運用＞商品管理＞商品データ一括登録から、商品一括登録用ファイル（コマースクリエイター）にて一括登録も可能です。
確認する
ECサイトを表示するか、プレビューボタンからバリエーションが登録された商品の商品詳細ページを確認します。
任意のバリエーション表示用パーツで表示されることを確認してください。
【参考例】レイアウト割当機能を利用した表示例
レイアウト割当機能を利用すれば、以下のように商材ごとにバリエーション表示を変更できます。
バリエーション表示システムパーツ選択例
| 商材 | システムパーツ | 割当名（例） | レイアウト（例） |
|---|---|---|---|
| 服 | カート・バリエーションごとにカートボタンパーツ | バリエーションごと | 商品詳細（バリエーションごとにカートボタン） |
| シューズ | カート・バリエーション表組パーツ | 表組 | 商品詳細（表組） |
| 雑貨 | カート・セレクトボックスのみパーツ | セレクトボックスのみ | 商品詳細（セレクトボックスのみ） |
商品一覧のバリエーション表示変更
「バリエーション表示用のカートパーツ」の変更
変更手順は、商品詳細画面と同様です。
商品グループの場合は、［商品詳細バリエーション表示の変更方法-手順2］のコマースクリエイター＞テーマ＞レイアウト一覧にて「商品グループ」を選択してください。
商品グループごとに最適なカートパーツを表示する（レイアウト割当機能を利用）
商品グループでも、商品グループごとに最適な「バリエーション表示用のカートパーツ」を表示できます。
［商品ごとに最適なカートパーツを表示する（レイアウト割当機能を利用）］を参考に、商品グループレイアウトを複製し、任意のバリエーション表示パーツを配置してください。
商品グループへのレイアウト割当は、運用＞商品管理＞商品グループ管理（レイアウト・SEO設定）-レイアウト割当-レイアウト割当名にて行います。
