商品詳細ページ設定(HTML5テンプレートメニュー)

2019-01-15 11:50
【デザイン管理】→【商品詳細ページ設定】ページでできること
  • 商品詳細ページでの表示方法を設定できます。
  • 各タイトル右側の「(+)全て開く」をクリックして、詳細な設定ができます。

設定の詳細については、下図の赤枠をクリックして、それぞれの説明箇所にてご確認ください。

1.レイアウト
サイドエリア表示設定 【デザイン管理】→【配置/画像/コメント】→「サイドエリア表示設定」は、2カラムor3カラム設定時のみ表示されます。
表示 商品詳細ページは、1カラムで表示されます。
非表示 商品詳細ページは、2カラムで表示されます。
レイアウト
設定
商品詳細ページでのレイアウトを画像から選択してください。
商品説明の下にもカートに入れるボタンを表示

「表示する」にチェックをつけると、商品詳細ページで2箇所にカートボタンが表示されます。
※レイアウト3、5、6、7では表示されません。

表示する 表示しない
メイン写真
大きい画像
写真サイズ(横幅) メイン写真の、一番大きい画像サイズを選択します。
写真加工 正方形に加工する
※画像余白のカラーコード:#FFF2CC
真ん中部分を正方形に切り出す
加工しない
画像切り替え
横にスライド スライド送りボタンを押すと、画像を横にスライドします。
フェードイン
フェードアウト
スライド送りボタンを押すと、画像が切り替わる際は徐々に消え、徐々に次の画像が現れます。
スライド送り動作 スライド送り動作を、瞬時/速い/標準/遅め/遅いより選択してください。
サムネイル画像
サムネイル
画像
表示する
写真サイズ
(横幅)
サムネイル画像の横幅を選択します。
写真加工 ↑上記の「写真加工」欄をご確認ください。
大きい画像の
切り替え
サムネイル画像にマウスをのせてメイン画像を切り替えるか、クリックして切り替えるかを選択します。
表示しない メイン画像のみ表示されます。 スライド送りボタン
スライド送りボタンの位置を選択します。
画像余白のカラーコード:
【デザイン管理】→【商品一覧ページ設定】→レイアウト→表示設定→写真のみオプション設定→「画像余白のカラーコード」にて設定してください。
他の写真 写真サイズ
(横幅)
「他の写真」の画像(横幅)を選択してください。
写真加工 ↑上記の「写真加工」欄をご確認ください。
画像余白の
カラーコード
【デザイン管理】→【商品一覧ページ設定】→レイアウト→表示設定→写真のみオプション設定→「画像余白のカラーコード」にて設定してください。
並び順設定 商品名等の並び順を設定します。
図のように、上下ボタンをクリックするか、ドラッグ&ドロップで移動できます。
2.表示設定
商品詳細ページでの表示内容を設定します。
商品名 商品詳細ページでの商品名の表示/非表示を選択します。
バリエーション選択形式 バリエーションが設定されている商品の、バリエーション選択方法を設定します。
詳細はサンプルページにてご確認ください。
バリエーション表の表示 在庫一覧
バリエーション在庫一覧表の表示方法を選択します。
設定の詳細は下記FAQをご参照ください。
バリエーション在庫表の表示
バリエーションが2つの場合に項目名を縦と横に並べる
詳細はサンプルページにてご確認ください。
バリエーション画像 バリエーションの画像も商品写真に表示する場合はチェックを入れてください。
設定の詳細は下記FAQをご参照ください。
商品バリエーションに画像を設定したい
価格範囲表示 バリエーションやオーダーメイドを設定している場合に、「○○円〜○○円」のように価格範囲を表示します。
※オーダーメイドのみ設定時には表示されません。
数量欄表示 購入時の数量選択方法を設定します。
リストボックス ※最大99 テキストボックス ※最大9999
お問合わせ
ボタン
お問い合わせボタンの表示・非表示を設定します。
非表示に設定した場合、「売価を指定しない」に設定した商品の商品詳細ページでは「販売価格はお問い合わせください。 」も非表示になります。
ボタン下部
自由記入欄
[カートに入れる][お問い合わせ][お気に入り登録]ボタンの下部に任意の内容を設定できます。HTMLタグ使用可能です。
アイコン おすすめ商品等のアイコンの表示・非表示を選択します。
ラベル設定 他の写真 「他の写真」のタイトルを変更できます。
関連商品 「関連商品」のタイトルを変更できます。
関連商品表示 表示する/表示しない・・・関連商品の表示、表示を選択します。
ランキング表示 表示する/表示しない・・・ランキングの表示、表示を選択します。
商品詳細ページでのランキング表示について
レコメンド設定 写真のみ レコメンドの設定
スライド 「レコメンド」にて、スライドを自動再生するかしないかを設定します。
3.レビュー
5段階評価:レビュー機能の[5段階評価]を表示する/しないを設定できます。
[0件を表示]にチェックを入れ、レビューのない商品に5段階評価欄(0件のレビュー)を表示できます。
最新レビュー:[最新レビュー]の表示する/しないと、表示件数を設定できます。
4.ソーシャルツール
商品詳細ページで表示する各ソーシャルツールの設定をします。
5.自由記入欄

商品詳細ページの全ページ共通で、自由な内容を表示できます。

自由記入欄表示位置 商品詳細ページの上部/中部/下部いずれに表示するかを設定します。
※表示位置については、リンク先のサンプルページでご確認ください。
自由記入欄 表示したい内容をこちらに入力してください。