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

2019-01-15 13:24
【デザイン管理】→【商品一覧ページ設定】ページでできること
  • 下記の商品一覧ページでの表示方法を設定できます。
    カテゴリ一覧ページ、グループ覧ページ、全商品一覧ページ、新着商品一覧ページ、
    おすすめ商品一覧ページ、ランキング商品一覧ページ
  • 各タイトル右側の「(+)全て開く」をクリックして、詳細な設定ができます。

設定の詳細については、それぞれの説明箇所にてご確認ください。

1.レイアウト
一覧の表示幅 100%幅 ブラウザのスクリーンいっぱいに表示します。
固定幅 ショップの横幅に合わせて表示します。他ページと同じ幅になります。
示設定 写真のみ 写真を並べて表示します
商品説明つき 商品画像と説明を表示し、1行表示にします
写真のみ一覧と説明付き一覧の切り替えを表示しない
チェックあり/なし 「写真のみ表示」と「商品説明付き」の切替ボタンの表示/非表示を設定します。
写真のみオプション設定
表示件数 1ページに表示する商品の件数を選択します。
サムネイル画像 正方形に加工する※画像余白のカラーコード:#FFF2CC
真ん中部分を正方形に切り出す
加工しない
画像余白の
カラーコード
画像の余白部分の色を設定します。
カラーコードを入力するか、カラーピッカーから色を選択します。
例)※画像余白のカラーコード:#FFF2CC
商品名 表示する 商品名を表示します。
一行に収まらない場合は改行せずに省略表記
チェックをつけると、長い商品名は全商品省略表記されるため、見た目が整います。
チェックあり チェックなし
表示しない 商品名を表示しません。
販売価格 表示する 販売価格を表示します。
一行に収まらない場合は改行せずに省略表記
チェックをつけると、長い販売価格は全商品省略表記されるため、見た目が整います。
チェックあり チェックなし
税込価格を表示しない
※【基本設定】→【税金設定】にて、「外税」を選択して「税込価格を併記する」にチェックがついている場合のみ表示されます。
表示しない 販売価格を表示しません。
在庫 在庫数の表示/非表示を選択します。
アイコン おすすめ商品等のアイコンの表示・非表示を選択します。
5段階評価 レビュー機能についてはこちらのページをご参照ください。 【レビュー機能について】
レビュー機能の[5段階評価]を表示する/しないを設定できます。
[0件を表示]にチェックを入れ、レビューのない商品に5段階評価欄(0件のレビュー)を表示できます。
カートに入れる
ボタン
「カートに入れる」ボタンの表示/非表示を選択します。
※バリエーションやオーダーメイド設定がある場合は、「オプション選択」ボタンが表示されます。
説明付き一覧オプション設定
表示件数 1ページに表示する商品の件数を選択します。
サムネイル画像 「加工しない 」固定です。設定を変更することはできません。
アイコン おすすめ商品等のアイコンの表示・非表示を選択します。
カートに入れる
ボタン
「カートに入れる」ボタンの表示/非表示を選択します。
※バリエーションやオーダーメイド設定がある場合は、「オプション選択」ボタンが表示されます。
お問合わせボタン 「お問い合わせ」ボタンの表示・非表示を選択します。
カートに入れるボタンの動作 商品一覧ページで「カートに入れる」をクリックした際の動作を設定します。
【購入時フォームのポップアップについて】
写真サイズ
(横幅)
商品画像の横幅を選択します。
高解像度PC
での画像
きれい 高解像度PCで閲覧する場合、画像をきれいに表示します。
一旦通常画像を表示した後、きれいな画像を読み込む
チェックあり 画像が少し速く表示されます。
チェックなし 始めからきれいな画像が表示されます。
軽いサイズ 高解像度PCで閲覧する場合、画像サイズを軽くして表示します。読み込み速度が速くなります。
ページ移動 ページ上部 商品一覧ページに遷移した際、ぺージ最上部を表示します。
ぺージ一覧 商品一覧ぺージに遷移した際、商品一覧部分を表示します。
2.表示切り替えバー

商品一覧ページ上部の、各表示切り替えバーの表示/非表示を設定します。

表示件数選択欄表示 1ページに表示する商品の件数を選択できるようにします。
写真サイズ選択欄表示 表示されている写真のサイズを選択できるようにします。
在庫有りの絞り込み表示 チェックをつけると、在庫のある商品のみが表示されるチェックボックスです。
3.表示設定

商品一覧ページでの、表示価格の設定をします。

希望小売価格表示 希望小売価格を表示します。
価格範囲表示 バリエーションやオーダーメイドを設定している場合に、「○○円〜○○円」のように価格範囲を表示します。
バリエーション画像 バリエーションに画像を設定している場合に表示します。
4. 並び順
在庫切れで購入できない商品を一覧の最後に「表示する」と設定した場合、在庫切れ購入不可商品は 商品一覧の一番後ろに表示されます。
参考FAQ
◆在庫切れ商品を、自動で商品一覧ページの最後に表示したい
5. 自由記入欄
商品一覧ページの全ページ共通で、自由な内容を表示できます。
自由記入欄表示位置 商品一覧ページの上部/下部いずれに表示するかを設定します。
※表示位置については、リンク先のサンプルページでご確認ください。
自由記入欄 表示したい内容をこちらに入力してください。
6、7、8 カテゴリ商品一覧ページ、グループ商品一覧ページ、グループ区分商品一覧ページ
商品一覧ページで、カテゴリメニュー/グループメニュー/グループ区分メニューをどの位置に表示するかを設定します。
以下、カテゴリ商品一覧にての説明ですが、グループ商品一覧とグループ区分商品一覧も設定手順は同様です。
※【デザイン管理】→【配置/画像/コメント】ページの「カラム設定」にて設定しているカラム数により、設定内容が異なります。
●1カラムの場合
サイドエリアの
カテゴリメニュー表示
表示しない 商品一覧ページでサイドエリアにカテゴリメニューを表示しません。
商品一覧ページは1カラム表示になります。
左カラム 商品一覧ページで左カラム、右カラムのいずれかに、開いているカテゴリページのカテゴリメニューを表示します。

サブカテゴリ表示
サブカテゴリの表示方法を設定します。
横に開く サブカテゴリを横に開きます。
縦に開く 全商品
リンク表示
使用する
サブカテゴリを縦に開き、全商品へのリンクを表示します。
使用しない
サブカテゴリを縦に開き、全カテゴリのリンクを表示します。
入力したタイトルが表示され、タイトルをクリックすると全カテゴリが表示されます。
右カラム
メインエリア上部の
カテゴリメニュー表示
メインエリア上部に、現在表示しているカテゴリのメニューを表示します。

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

ショップページで[商品検索]を行った後、[表示設定/絞り込み]をクリックし、カテゴリや特集(グループ)を選択して商品を絞り込むことができます。
[絞り込み検索]→[利用する]にチェックを入れて[カテゴリ絞り込み][グループ絞り込み][表示する/表示しない]を選択してください。
[ラベル設定(カテゴリ)][ラベル設定(グループ)]欄で表示するラベルを設定することもできます。

※[絞り込み検索]→[利用する]と設定した場合「表示数、画像、在庫あり、並び順、表示方法」の表示位置が変わりますのでご注意ください。

サイドメニューを表示できるテンプレートの場合、カテゴリと特集の絞り込み欄をサイドエリアに表示することができます。
[サイドメニュー絞り込み欄]にて表示位置を選択してください。(選択肢は配置/画像/コメントのカラム設定によって異なります。)

ショップ側の表示(メインエリア)

ショップ側の表示(サイドメニュー絞り込み欄・左カラムを選択した場合)

サイドエリアに、検索結果にヒットした商品が所属するカテゴリ、特集(グループ)と、件数を表示します。

10. ランキング表示

商品一覧ページ、グループ一覧ページにランキングを表示するかどうかの設定ができます。