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

商品詳細レイアウトのパターン

×

マニュアル閲覧上の注意

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

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

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

商品詳細レイアウトのパターン

スタートアップテーマの商品詳細レイアウト

スタートアップテーマではPC・タブレット用の商品詳細のレイアウトとして下記4パターンをご用意しています。それぞれレイアウトパーツとスタートアップテーマのCSSにてデザインしております。

レイアウト パーツ配置
横2列レイアウト画面幅に応じて、横に2列配置されるオーソドックスなレイアウトです。
横1列レイアウトすべてのシステムパーツを縦一列に並べる、横に段組みしていないレイアウトです。
上横1列・下横2列レイアウト上段が横1列、下段が画面幅に応じて横に2列に配置できるレイアウトです。
上横2列・下横1列レイアウト上段が画面幅に応じて横に2列、下段が横1列に配置できるレイアウトです。

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

横2列レイアウト

商品詳細エリア(システムパーツ)内にレイアウトパーツを2つ配置し、その配下にシステムパーツを配置、CSSデザインによって横2列のレイアウトにしています。左が「商品画像・商品説明など(レイアウトパーツ)」、右が「商品名・価格など商品情報(レイアウトパーツ)」です。

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

レイアウトパーツにはそれぞれHTMLタグが設定されています。
HTMLタグの設定は、レイアウトパーツの操作するボタンから「パーツを変更する」を選択し、表示される「レイアウトパーツ設定」モーダルにて確認・変更できます。

レイアウトパーツ 初期設定されているHTMLタグ
「商品画像・商品説明など(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--1">
商品名・価格など商品情報(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--2">

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

横1列レイアウト

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

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

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

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

商品詳細エリア(システムパーツ)内にレイアウトパーツを3つ配置し、その配下にシステムパーツを配置、CSSデザインによって上1列、下横2列のレイアウトにしています。上が「商品画像など(レイアウトパーツ)」左が「商品説明など(レイアウトパーツ)」、右が「商品名・価格など商品情報(レイアウトパーツ)」です。

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

レイアウトパーツにはそれぞれHTMLタグが設定されています。
HTMLタグの設定は、レイアウトパーツの操作するボタンから「パーツを変更する」を選択し、表示される「レイアウトパーツ設定」モーダルにて確認・変更できます。

レイアウトパーツ 初期設定されているHTMLタグ
「商品画像など(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--1">
「商品説明など(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--2">
「商品名・価格など商品情報(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--3">

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

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

商品詳細エリア(システムパーツ)内にレイアウトパーツを3つ配置し、その配下にシステムパーツを配置、CSSデザインによって上横2列、下横1列のレイアウトにしています。左が「商品画像など(レイアウトパーツ)」、右が「商品名・価格など商品情報(レイアウトパーツ)」、下が「商品説明など(レイアウトパーツ)」です。

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

レイアウトパーツにはそれぞれHTMLタグが設定されています。
HTMLタグの設定は、レイアウトパーツの操作するボタンから「パーツを変更する」を選択し、表示される「レイアウトパーツ設定」モーダルにて確認・変更できます。

レイアウトパーツ 初期設定されているHTMLタグ
「商品画像など(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--1">
「商品名・価格など商品情報(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--2">
「商品説明など(レイアウトパーツ)」<div class="fs-l-productLayout__item fs-l-productLayout__item--3">

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

スタートアップテーマ PC・タブレット用商品詳細レイアウトの使用法

パーツの配置変更

システムパーツはレイアウトパーツの中に初期配置されています。それぞれのシステムパーツについて、詳しくは「商品詳細」レイアウトのシステムパーツをご覧ください。

パーツは表示位置を変更できます。パーツの配置を変更したい場合は、レイアウト変更で配置を変更したいパーツを操作します。

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

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

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

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

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

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

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

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

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

ECサイトを表示している場合は、レイアウト画面右下の「レイアウトを保存する」ボタンを押下します。
ECサイトまたはプレビューを再読み込み(リロード)すると、表示順が変更されます。

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

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

移動したいパーツの操作するボタンから「パーツを外す」を選択し、パーツをいったんレイアウトから外します。

システムパーツを配置したいレイアウトパーツ(配置先)の開くボタンを押下します。必要な場合は、いったんパーツ配置エリアのパンくずから、上の階層のレイアウトパーツへ移動します。

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

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

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

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

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

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

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

項目表示について

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

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

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

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

×

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

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

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