ID #1951

Q.商品一覧ページ設定(HTML5テンプレートメニュー)

【デザイン管理】→【商品一覧ページ設定】ページでできること
  • 下記の商品一覧ページでの表示方法を設定できます。
    カテゴリ一覧ページ、グループ覧ページ、全商品一覧ページ、新着商品一覧ページ、
    おすすめ商品一覧ページ、ランキング商品一覧ページ
  • 各タイトル右側の「(+)全て開く」をクリックして、詳細な設定ができます。
設定の詳細については、下図の赤枠をクリックして、それぞれの説明箇所にてご確認ください。
1.レイアウト
一覧の表示幅 100%幅 ブラウザのスクリーンいっぱいに表示します。
固定幅 ショップの横幅に合わせて表示します。他ページと同じ幅になります。
示設定 写真のみ 写真を並べて表示します
商品説明つき 商品画像と説明を表示し、1行表示にします
写真のみ一覧と説明付き一覧の切り替えを表示しない
チェックあり/なし 「写真のみ表示」と「商品説明付き」の切替ボタンの表示/非表示を設定します。
写真のみオプション設定
表示件数 1ページに表示する商品の件数を選択します。
サムネイル画像 正方形に加工する※画像余白のカラーコード:#FFF2CC
真ん中部分を正方形に切り出す
加工しない
画像余白の
カラーコード
画像の余白部分の色を設定します。
カラーコードを入力するか、カラーピッカーから色を選択します。
例)※画像余白のカラーコード:#FFF2CC
商品名 表示する 商品名を表示します。
一行に収まらない場合は改行せずに省略表記
チェックをつけると、長い商品名は全商品省略表記されるため、見た目が整います。
チェックあり チェックなし
表示しない 商品名を表示しません。
販売価格 表示する 販売価格を表示します。
一行に収まらない場合は改行せずに省略表記
チェックをつけると、長い販売価格は全商品省略表記されるため、見た目が整います。
チェックあり チェックなし
税込価格を表示しない
※【基本設定】→【税金設定】にて、「外税」を選択して「税込価格を併記する」にチェックがついている場合のみ表示されます。
表示しない 販売価格を表示しません。
在庫 在庫数の表示/非表示を選択します。
アイコン表示
おすすめ商品等のアイコンの表示・非表示を
選択します。
5段階評価 レビュー機能については下記ページをご参照ください。
参照:
レビュー機能の[5段階評価]を表示する/しないを設定できます。
[0件を表示]にチェックを入れ、レビューのない商品に5段階評価欄(0件のレビュー)を表示できます。
カートに入れる
ボタン
「カートに入れる」ボタンの表示/非表示を選択します。
※バリエーションやオーダーメイド設定がある場合は、「オプション選択」ボタンが表示されます。
説明付き一覧オプション設定
表示件数 1ページに表示する商品の件数を選択します。
サムネイル画像 「加工しない 」固定です。設定を変更することはできません。
アイコン表示
おすすめ商品等のアイコンの表示・非表示を
選択します。
カートに入れる
ボタン
「カートに入れる」ボタンの表示/非表示を選択します。
※バリエーションやオーダーメイド設定がある場合は、「オプション選択」ボタンが表示されます。
お問合わせボタン
「お問い合わせ」ボタンの表示・非表示を選択します。
カートに入れるボタンの動作 商品一覧ページで「カートに入れる」をクリックした際の動作を設定します。
参照:
写真サイズ
(横幅)
商品画像の横幅を選択します。
高解像度PC
での画像
きれい 高解像度PCで閲覧する場合、画像をきれいに表示します。
一旦通常画像を表示した後、きれいな画像を読み込む
チェックあり 画像が少し速く表示されます。
チェックなし 始めからきれいな画像が表示されます。
軽いサイズ 高解像度PCで閲覧する場合、画像サイズを軽くして表示します。読み込み速度が速くなります。
ページ移動 ページ上部 商品一覧ページに遷移した際、ぺージ最上部を表示します。
ぺージ一覧 商品一覧ぺージに遷移した際、商品一覧部分を表示します。
2.表示切り替えバー
商品一覧ページ上部の、各表示切り替えバーの表示/非表示を設定します。
表示件数選択欄表示 1ページに表示する商品の件数を選択できるようにします。
写真サイズ選択欄表示 表示されている写真のサイズを選択できるようにします。
在庫有りの絞り込み表示 チェックをつけると、在庫のある商品のみが表示されるチェックボックスです。
3.表示設定
商品一覧ページでの、表示価格の設定をします。
希望小売価格表示 希望小売価格を表示します。
価格範囲表示 バリエーションやオーダーメイドを設定している場合に、「○○円〜○○円」のように価格範囲を表示します。
4. 並び順
在庫切れで購入できない商品を一覧の最後に「表示する」と設定した場合、在庫切れ購入不可商品は 商品一覧の一番後ろに表示されます。
参照:

5. 自由記入欄
商品一覧ページの全ページ共通で、自由な内容を表示できます。
自由記入欄表示位置 商品一覧ページの上部/下部いずれに表示するかを設定します。
※表示位置については、リンク先のサンプルページでご確認ください。
自由記入欄 表示したい内容をこちらに入力してください。
6、7、8 カテゴリ商品一覧ページ、グループ商品一覧ページ、グループ区分商品一覧ページ
商品一覧ページで、カテゴリメニュー/グループメニュー/グループ区分メニューをどの位置に表示するかを設定します。
以下、カテゴリ商品一覧にての説明ですが、グループ商品一覧とグループ区分商品一覧も設定手順は同様です。
※【デザイン管理】→【配置/画像/コメント】ページの「カラム設定」にて設定しているカラム数により、設定内容が異なります。
●1カラムの場合
サイドエリアの
カテゴリメニュー表示
表示しない 商品一覧ページでサイドエリアにカテゴリメニューを表示しません。
商品一覧ページは1カラム表示になります。
左カラム 商品一覧ページで左カラム、右カラムのいずれかに、開いているカテゴリページのカテゴリメニューを表示します。
サブカテゴリ表示
サブカテゴリの表示方法を設定します。
横に開く サブカテゴリを横に開きます。
縦に開く 全商品
リンク表示
使用する
サブカテゴリを縦に開き、全商品へのリンクを表示します。
使用しない
サブカテゴリを縦に開き、全カテゴリのリンクを表示します。
入力したタイトルが表示され、タイトルをクリックすると全カテゴリが表示されます。
右カラム
メインエリア上部の
カテゴリメニュー表示
メインエリア上部に、現在表示しているカテゴリのメニューを表示します。

●2カラム、3カラムの場合
カテゴリメニュー
表示方法
メインエリア上部
メインエリア上部に、現在表示しているカテゴリのメニューを表示します。
サイドカラム最上部
サイドカラム上部に、現在表示しているカテゴリのメニューを表示します。
全商品リンク表示 使用する
サブカテゴリを縦に開き、全商品へのリンクを表示します。
使用しない
サブカテゴリを縦に開き、全カテゴリのリンクを表示します。
入力したタイトルが表示され、タイトルをクリックすると全カテゴリが表示されます。
通常位置
カテゴリメニューは通常位置(トップページと同様の位置)に表示します。
最終更新: 2017-07-20 11:41