ブランドやカテゴリ別に、商品ページのデザインをかえる

商品詳細ページのデザインを、簡単な操作で変更する方法をご紹介します。

たとえばラグジュアリーブランド商品には、1カラムで写真をリッチに見せるデザイン、普及価格帯ブランドの商品には2カラムでカートを上部に表示するデザイン、など商品に最適なレイアウトを、簡単な操作で行えます。

レイアウト変更機能と、レイアウトの割当機能を併用します。

＜目次＞

• ブランドやカテゴリ別に、「商品詳細」画面を異なるデザインで表示する方法（設定手順）

＜レイアウト変更の参考情報＞

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

＜関連情報＞

• レイアウトの操作方法：レイアウト変更
• レイアウト割当機能の利用方法：
  割当名を設定する-「レイアウト割当」機能で、ブランドやカテゴリごとに、表示デザインや表示内容を変える（商品詳細・商品グループ・フリーページ用レイアウト）

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

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

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

レイアウトを変更したい商品の「商品詳細」画面の、以下の設定画面で、使用したいレイアウトの割当名を指定します。

• 運用＞商品管理＞商品情報（レイアウト・SEO設定）-レイアウト割当-レイアウト割当名
• 運用＞商品管理＞商品データ一括登録から、CSVファイルでの一括登録も可

割当名を指定した商品の「商品詳細」画面を確認します。

割当名を指定した商品の「商品詳細」画面が、割当名が合致するレイアウトにて、ECサイトに表示されます。

各デバイスでの設定を繰り返します。

「スマートフォン用」「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/タブレット）用のレイアウトを例に説明します。

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

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

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