ブランドやカテゴリ、商品ごとに最適なレイアウト配置を整える

以下の方法を参考にして、カラム数、表示内容などを変更します。
スタートアップテーマをお使いの場合は、あらかじめ用意されているレイアウトもありますのでご活用ください。

• スタートアップテーマの商品詳細レイアウトを活用する
  • 横2列レイアウト
  • 横1列レイアウト
  • 上横1列・下横2列レイアウト
  • 上横2列・下横1列レイアウト
• レイアウトのパーツ配置を操作して、独自のデザインに変更する
  • パーツの表示順を変更する
  • パーツを別のレイアウトパーツに移動する
  • レイアウトから多数のパーツを一度に外す

「レイアウト割当」機能を利用して、レイアウトを適用する

1. 利用したいレイアウトの「レイアウト変更」画面を開きます。





2. 「割当名」を設定します。







3. レイアウトを変更したい商品の「商品詳細」画面の、以下の設定画面で、使用したいレイアウトの割当名を指定します。
• 運用＞商品管理＞商品情報（レイアウト・SEO設定）-レイアウト割当-レイアウト割当名
• 運用＞商品管理＞商品データ一括登録から、CSVファイルでの一括登録も可



4. 割当名を指定した商品の「商品詳細」画面が、割当名が合致するレイアウトにて、ECサイトに表示されます。
5. 「スマートフォン用」「PC/その他用」など、複数のテーマを使用している場合は、テーマで利用中になっているすべてのテーマに、同じ割当名を設定したレイアウトを用意します。
   利用中のテーマに、該当の「割当名」が設定されたレイアウトがない場合、デフォルトレイアウトが適用されます。

スタートアップテーマでは、PC・タブレット用に4種類のデザインレイアウトを用意しています。
それぞれレイアウトパーツとCSSにてあらかじめデザインしています。

※「横2列」とあるレイアウトは、対応するブラウザ幅の場合（PC・タブレット想定）に横方向の段組みが設けられています。
ブラウザ幅が狭い場合は、横1列となります。（レスポンシブ対応）

横2列レイアウト

商品詳細エリア（システムパーツ）内にレイアウトパーツを2つ配置。
その配下にシステムパーツを配置。
CSSデザインによって横2列のレイアウトにしています。

CSSデザインのために、上位階層であるメインエリア（レイアウトパーツ）にfs-l-product2というclassを追加しています。

左が「商品画像・商品説明など（レイアウトパーツ）」、右が「商品名・価格など商品情報（レイアウトパーツ）」です。

※青い点線は段組みを確認するためのもので、実際には表示されていません。

レイアウトパーツ（「商品画像・商品説明など」と「商品名・価格など商品情報」）にはそれぞれHTMLタグが設定されています。
HTMLタグの設定は、レイアウトパーツの操作するボタンから「パーツを変更する」を選択し、表示される「レイアウトパーツ設定」モーダルにて確認・変更できます。

横1列レイアウト

商品詳細エリア内にシステムパーツが配置されています。

上位階層であるメインエリア（レイアウトパーツ）にfs-l-productというclassを追加しています。

※青い点線は段組みを確認するためのもので、実際には表示されていません。

上横1列・下横2列レイアウト

商品詳細エリア（システムパーツ）内にレイアウトパーツを3つ配置。
その配下にシステムパーツを配置。
CSSデザインによって上1列、下横2列のレイアウトにしています。

CSSデザインのために、上位階層であるメインエリア（レイアウトパーツ）にfs-l-product3というclassを追加しています。

上が「商品画像など（レイアウトパーツ）」左が「商品説明など（レイアウトパーツ）」、右が「商品名・価格など商品情報（レイアウトパーツ）」です。

レイアウトパーツ（「商品画像など」「商品説明など」「商品名・価格など商品情報」）にはそれぞれHTMLタグが設定されています。
HTMLタグの設定は、レイアウトパーツの操作するボタンから「パーツを変更する」を選択し、表示される「レイアウトパーツ設定」モーダルにて確認・変更できます。

上横2列・下横1列レイアウト

商品詳細エリア（システムパーツ）内にレイアウトパーツを3つ配置。
その配下にシステムパーツを配置。
CSSデザインによって上横2列、下横1列のレイアウトにしています。

CSSデザインのために、上位階層であるメインエリア（レイアウトパーツ）にfs-l-product4というclassを追加しています。

左が「商品画像など（レイアウトパーツ）」、右が「商品名・価格など商品情報（レイアウトパーツ）」、下が「商品説明など（レイアウトパーツ）」です。

レイアウトパーツ（「商品画像など」「商品名・価格など商品情報」「商品説明など」）にはそれぞれHTMLタグが設定されています。
HTMLタグの設定は、レイアウトパーツの操作するボタンから「パーツを変更する」を選択し、表示される「レイアウトパーツ設定」モーダルにて確認・変更できます。

パーツの表示位置を変更することで、デザイン（コンテンツの表示位置）を簡単に変更することができます。
パーツの配置を変更したい場合は、レイアウト変更で配置を変更したいパーツを操作します。

※各システムパーツはレイアウトパーツの中に初期配置されています。
それぞれのシステムパーツについて、詳しくは「商品詳細」レイアウトのシステムパーツをご覧ください。
※以下スタートアップテーマ（PC/タブレット）用のレイアウトを例に説明します。

パーツの表示順を変更する

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



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



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



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



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



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



7. パーツの表示順を変更するボタンをマウスで選択し、パーツを配置したい位置まで移動します。



8. レイアウト画面右下の「レイアウトを保存する」ボタンを押下します。
   ECサイトまたはプレビューで確認すると、表示順が変更されます。

パーツを別のレイアウトパーツに移動する

パーツはレイアウトパーツ内でしか移動できません。
別のレイアウトパーツや上の階層へ移動させる場合は、パーツ配置エリアからいったんパーツを外し、再度パーツを配置します。

1. 移動したいパーツの操作するボタンから「パーツを外す」を選択し、パーツをいったんレイアウトから外します。
2. システムパーツを配置したいレイアウトパーツ（配置先）の開くボタンを押下します。
   必要な場合は、いったんパーツ配置エリアのパンくずから、上の階層のレイアウトパーツへ移動します。



3. レイアウト変更画面のパーツ一覧に配置したいパーツを表示します。
   パーツ検索の検索条件でキーワードにパーツ名を指定するか、検索条件からパーツの種類を選択して検索します。





4. 配置先のレイアウトパーツ内パーツ配置エリアに、パーツをドラッグ&ドロップします。



5. ECサイトまたはプレビューを表示し、現在の表示を確認します。
   レイアウトのプレビューするボタンを押下して、プレビューモーダルにて、プレビューを表示するボタンを押下します。
   プレビューについて詳しくは、commerce creator 管理画面概要-プレビューをご覧ください。

レイアウトから多数のパーツを一度に外す

レイアウトパーツを「パーツを外す」ボタンから外すとレイアウトパーツは削除されます。
レイアウトパーツが削除されると、配置されていたパーツがすべてレイアウトから外れた状態になります。
これを利用して、多数のパーツを一度にレイアウトから外すことができます。

レイアウトパーツ以外のパーツは、レイアウトから外した場合でも、削除されません。
コマースクリエイター＞テーマ＞レイアウト変更の右側にあるパーツ検索からパーツ検索結果一覧に表示し、ドラッグ&ドロップまたはパーツ配置エリアへ移動ボタンを押下すれば、再度パーツ配置エリアに配置できます。

レイアウトパーツはパーツ配置エリアの下にある「レイアウトパーツを追加する」ボタンから追加できます。
詳しくはレイアウトパーツをご覧ください。