コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]

バリエーション表示のパターンを商品ごとにかえる

目次

商品バリエーションの表示について

商品詳細画面

商品詳細バリエーション表示は、「商品詳細レイアウト」に配置された「バリエーション表示用のカートパーツ」により決まります。
商品を表示している「商品詳細用レイアウト」に、以下のバリエーション表示用のシステムパーツいずれか1つ必ず配置します

バリエーション表示は、以下の5種類のいずれかになります。

バリエーション価格登録がある場合は、各バリエーションに価格が表示されます。


商品一覧(商品グループ・検索結果一覧)

バリエーション表示は、以下の2種類のいずれかになります。
[カートに入れる]ボタンを押下すると、以下のようなモーダルが表示され、「商品詳細」画面に遷移することなくカート投入ができます。

ただし、バリエーション価格が設定されている場合は、[カートに入れる]ボタンではなく[詳細を見る]ボタンが表示されます。
以下のようなモーダルは表示されず、必ず「商品詳細」画面へ遷移します。

商品詳細バリエーション表示の変更方法

バリエーション表示を変更したい「レイアウト」の確認

該当商品の運用>商品管理>商品情報「商品レイアウト・SEO設定(コマースクリエイター)」-レイアウト割当にてご確認いただけます。

スマートフォン最適化サイトなどで複数のテーマを使用している場合は、それぞれのテーマ(PC用・スマートフォン用など)で任意のバリエーション表示ができます。その場合、それぞれのテーマのレイアウトで変更作業が必要となります。

変更する商品詳細の「レイアウト」を開く

コマースクリエイター>テーマ一覧から、ご利用中テーマのレイアウト一覧へ遷移します。

コマースクリエイター>テーマ>レイアウト一覧にて「種類:商品」で検索するボタンを押下します。

該当の「商品詳細」レイアウトの変更するボタンを押下します。

「バリエーション表示用のカートパーツ」の配置エリアを開く

コマースクリエイター>テーマ>レイアウト変更へ遷移します。
パーツ配置エリアで以下の手順で開きます。
※以下スタートアップテーマでの配置を例に説明します。

1.「メインエリア」の開くボタンを押下
2.「コンテンツエリア」の開くボタンを押下
3.「商品詳細エリア(システムパーツグループ)」の
開くボタンを押下
4.「商品名・価格など商品情報(レイアウトパーツ)」の
開くボタンを押下
5.初期配置されている「カート・バリエーション選択スライダーパーツ」があらわれます。(※補足

パーツ配置エリアで他にレイアウトパーツがあれば開くボタンを押下し、現在配置されているカートボタンパーツを探します。
「スタートアップテーマ(PC/タブレット)ー商品詳細(横2列レイアウト)/商品詳細(上横1列・下横2列レイアウト)」の場合は、初期状態で「商品名・価格など商品情報(レイアウトパーツ)」の中に配置されています。

「バリエーション表示用のカートパーツ」の探し方

パーツ配置エリアにあるレイアウト確認ボタンボタンを押下して、「bodyに含まれるパーツ」タブを押下すると、すべての配置パーツ名が表示されます。パネルパーツについてはパネルパーツに含まれるパーツも出力されます。

パーツ検索エリアで、配置したい「バリエーション表示用のカートパーツ」を検索する

パーツ配置エリアにてカートパーツを配置したい階層を開いた状態で、パーツ検索エリアで「キーワード:カート」で検索する、または検索条件を表示するボタンを押下して、「種類:システムパーツ」を指定して検索します。

「バリエーション表示用のカートパーツ」を配置する

使用したい「バリエーション表示用のカートパーツ」をドラッグ&ドロップするか、配置するボタンを押下してパーツエリアに配置します。
現在バリエーション表示用のシステムパーツ(初期は「カート・バリエーションごとにカートボタンパーツ」)が配置されている場所に並べます。(配置を変えずに入れ替えできます。)

パーツ検索結果からドラッグしてパーツ配置エリアにドロップ
パーツエリアに並べて配置

使用しない「バリエーション表示用のカートパーツ」を外す

使用しないバリエーション表示用のシステムパーツの操作するボタンから「パーツを外す」を選択して、使用するバリエーション表示用のシステムパーツのみが配置されている状態にします。

バリエーション表示用のシステムパーツを入替

保存する

レイアウト画面右下の[保存する]ボタンを押下します。
スマートフォン最適化サイトなどで複数のテーマを使用している場合は、すべてのテーマ(PC用・スマートフォン用など)で同様の作業を行います。

確認する

ECサイトを表示するか、プレビューボタンからバリエーションが登録された商品の商品詳細ページを確認します。
任意のバリエーション表示用パーツで表示されることを確認してください。


<初期設定パーツに関する補足>

「カート・バリエーション選択スライダーパーツ」が初期設定であるのは、以下の「レイアウト」です。
その他は、「カート・バリエーションごとにカートボタンパーツ」が配置されています。

  • 2023.07.11バージョンアップ以降に、新規で店舗発行された店舗様のすべての「商品詳細」レイアウト
  • 2023.07.11バージョンアップ以降に、新規追加した「商品詳細」レイアウト(※既存店舗様含む)

商品ごとに最適なカートパーツを表示する(レイアウト割当機能を利用)

レイアウト割当機能を利用し、商品ごとに商品詳細画面に表示するカートを指定できます。
「バリエーション表示用のカートパーツ」を差し替えた商品詳細レイアウトを複数用意し、商品のバリエーションに適した商品詳細レイアウトを設定します。

(バリエーション表示システムパーツ選択例)
商材 システムパーツ 説明
カート・バリエーションごとにカートボタンパーツ カラー・サイズ別で表示できるため
シューズ カート・バリエーション表組パーツ カラー・サイズ別で、かつサイズ数が多い商材に適するため
雑貨 カート・セレクトボックスのみパーツ カラーのみ選択するため

商品詳細レイアウトを複製する

任意のバリエーション表示用パーツを配置するために、商品詳細レイアウトを複製します。
「種類:商品詳細」レイアウトの複製するボタンを押下します。

レイアウト複製モーダルが表示されます。
レイアウト名を入力し「レイアウトを複製する」ボタンを押下します。
「レイアウトを複製する」ボタンを押下した時点で新しいレイアウトが追加されています。

複製したレイアウトにて、「バリエーション表示用のカートパーツ」を差し替える

複製したレイアウトにて、パーツ配置エリアに配置されている「バリエーション表示用のカートパーツ」を差し替えます。
手順はこちらをご覧ください。

割当名を設定する

「バリエーション表示用のカートパーツ」を差し替えた商品詳細レイアウトに割当名を設定します。

[変更]ボタンを押下すると、レイアウト割当モーダルが表示されます。
任意の割当名を入力してOKボタンを押下します。

割当名がパーツ配置エリアの上に表示されます。

割当名を設定したレイアウトを「有効にする」

パーツ検索エリアの上にある「有効にする」チェックを選択します。
「有効にする(デフォルトレイアウトにする)」と表示されている場合は、割当名が設定されていません。
現在ECサイトに反映している商品に表示される可能性があるので、必ず確認してください。

保存する

レイアウト画面右下の「保存する」ボタンを押下します。

スマートフォン最適化サイトなどで複数のテーマを使用している場合は、すべてのテーマ(PC用・スマートフォン用など)で同様の作業を行います。

また、ほかのバリエーション表示を使用したい場合は、同様にレイアウトを複製します。
レイアウトは上限数10,000まで追加できます。

バリエーション表示を変更したい商品に割当名を設定する

運用>商品管理>商品詳細「商品レイアウト・SEO設定(コマースクリエイター)」を開きます。
レイアウト割当にあるレイアウト割当名の「割当名一覧」ボタンを押下すると、商品詳細レイアウトに登録されている割当名が表示されます。
割当名を選択することで、商品を表示する商品詳細レイアウト(配置したバリエーション表示パーツ)を選択できます。

登録する

画面下の「登録する」ボタンを押下します。
「レイアウト割当」欄の「利用中のレイアウト」に、「レイアウト割当名」が設定されている商品詳細レイアウトが表示されます

商品の割当名設定は、運用>商品管理>商品データ一括登録から、商品一括登録用ファイル(コマースクリエイター)にて一括登録も可能です。

確認する

ECサイトを表示するか、プレビューボタンからバリエーションが登録された商品の商品詳細ページを確認します。
任意のバリエーション表示用パーツで表示されることを確認してください。

【参考例】レイアウト割当機能を利用した表示例

レイアウト割当機能を利用すれば、以下のように商材ごとにバリエーション表示を変更できます。

(バリエーション表示システムパーツ選択例)
商材 システムパーツ 割当名(例) レイアウト(例)
カート・バリエーションごとにカートボタンパーツ バリエーションごと 商品詳細(バリエーションごとにカートボタン)
シューズ カート・バリエーション表組パーツ 表組 商品詳細(表組)
雑貨 カート・セレクトボックスのみパーツ セレクトボックスのみ 商品詳細(セレクトボックスのみ)

商品一覧のバリエーション表示変更

「バリエーション表示用のカートパーツ」の変更

変更手順は、商品詳細画面と同様です。

商品グループの場合は、[商品詳細バリエーション表示の変更方法-手順2]のコマースクリエイター>テーマ>レイアウト一覧にて「商品グループ」を選択してください。

商品グループごとに最適なカートパーツを表示する(レイアウト割当機能を利用)

商品グループでも、商品グループごとに最適な「バリエーション表示用のカートパーツ」を表示できます。
商品ごとに最適なカートパーツを表示する(レイアウト割当機能を利用)]を参考に、商品グループレイアウトを複製し、任意のバリエーション表示パーツを配置してください。

商品グループへのレイアウト割当は、運用>商品管理>商品グループ管理(レイアウト・SEO設定)-レイアウト割当-レイアウト割当名にて行います。

【参考】レイアウト変更-割当名(商品詳細・商品グループ・フリーページ用レイアウト)をご覧ください。