キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

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

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

商品バリエーション表示パーツの変更

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

商品詳細バリエーション表示を変更するには、「商品詳細レイアウト」に配置された「バリエーション表示用のシステムパーツ」を差し替えます。商品を表示している「商品詳細用レイアウト」に配置されたパーツによって、下記いずれかのバリエーション表示を使用するかを設定できます。

商品詳細のバリエーション表示は、以下の4種類のいずれかになります。
バリエーション表示用のシステムパーツの中から選んで商品詳細レイアウトにいずれか1つを必ず配置してください

商品を表示している「レイアウト」は商品レイアウト・SEO設定(コマースクリエイター)-レイアウト割当にてご確認いただけます。
バリエーション表示ごとの設定変更は構築メニュー>ページ設定>商品ページ設定-バリエーション表示設定 (コマースクリエイター)で行えます。

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

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

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

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

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

コマースクリエイター>テーマ>レイアウト変更へ遷移します。
パーツ配置エリアで「メインエリア」の開くボタンを押下します。

パーツ配置エリアで「コンテンツエリア」の開くボタンを押下します。(スタートアップテーマのみ)

パーツ配置エリアで「商品詳細エリア(システムパーツグループ)」の開くボタンを押下します。

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

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

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

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

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

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

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

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

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

商品詳細レイアウトは商品ごとに指定できます。
「バリエーション表示用のシステムパーツ」を差し替えた商品詳細レイアウトを複数用意し、商品のバリエーションに適した商品詳細レイアウトを設定します。(レイアウト割当機能を利用します。)これによって、商品ごとにバリエーション表示方法を変更できます。

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

商品ごとにバリエーション表示方法を変更

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

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

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

バリエーション表示パーツを配置した商品詳細レイアウトに割当名を設定します。

レイアウト割当モーダルが表示されますので、任意の割当名を入力してOKボタンを押下します。割当名を商品情報に登録することで、任意の商品詳細レイアウトを指定できます。

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

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

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

スマートフォン最適化サイトなどで複数のテーマを使用している場合は、すべてのテーマ(PC用・スマートフォン用など)で同様の作業を行います。
また、ほかのバリエーション表示を使用したい場合は、同様にレイアウトを複製します。レイアウトは上限数10,000まで追加できます。

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

画面下の「登録する」ボタンを押下すると、「レイアウト割当」欄の「利用中のレイアウト」に、「レイアウト割当名」が設定されている商品詳細レイアウトが表示されます。
なお、商品の割当名設定は、運用メニュー>商品管理>商品データ一括登録から、商品一括登録用ファイル(コマースクリエイター)にて一括登録できます。

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

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

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

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

商品一覧のバリエーション表示は、以下の2種類のいずれかになります。バリエーション表示用のシステムパーツの中から選んで商品詳細レイアウトに配置してください。

  • カート・バリエーションごとにカートボタンパーツ
  • カート・セレクトボックスのみパーツ

商品グループごとに商品一覧レイアウトを指定できますので、商品グループごとにバリエーション表示方法を変更できます。商品グループレイアウトを複製し、任意のバリエーション表示パーツを配置してください。

商品グループごとにレイアウトを変更するには、レイアウト変更-割当名(商品詳細・商品グループ・フリーページ用レイアウト)をご覧ください。
バリエーション表示ごとの設定変更は構築メニュー>ページ設定>商品ページ設定-バリエーション表示設定 (コマースクリエイター)で行えます。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。