スマートフォン用のお店ページを作り込む②
-商品一覧ページ-

1 商品一覧ページを作り込む

商品一覧ページのパーツを編集していきます。必要なパーツのご案内だけご確認ください。
また、パソコン用お店ページに表示しているパーツをまだ追加していなければ、クリックして追加した上で編集してください。
ここではPCページと連動する設定になっているパーツは、他のページでご案内するので省略します。

■「1つ下のカテゴリ一覧」のパーツを編集します

商品一覧ページの、さらに下層のカテゴリの並べ方を選択します。
  1. 1つ下のカテゴリ一覧の「編集」ボタンをクリックします。
    (上部)(下部)、両方表示する場合はどちらでも構いません。
    片方だけ表示する場合は、表示するパーツの方をクリックします。
    編集画面が開きます。
  2. 並べ方を選びます。選ぶと下のサンプルが切り替わるので、 参考にしてください。違いとしては、以下の掛け合わせです。
    • 「1列表示」 or 「2列表示」
    • 「2階層とも表示」 or 「1階層だけ表示」
    • カテゴリに属する商品数をカテゴリ名の右側に表示
  3. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  4. 画面右上の「お店ページに反映する」ボタンをクリックします。


1つ下のカテゴリ一覧(上部)と(下部)の内容は連動しています。
いずれか片方を編集すれば、両方に反映します。
よって、それぞれの表示項目を異なる設定にすることはできません。
いずれか表示する、もしくは両方に表示するしないだけを設定できます。

■「商品検索」のパーツを編集します

商品検索ボックスを表示するパーツです。
  1. 商品検索の「編集」ボタンをクリックします。
    (上部)(下部)、両方表示する場合はどちらでも構いません。
    片方だけ表示する場合は、表示するパーツの方をクリックします。
    編集画面が開きます。
  2. 商品検索コーナーにつける「見出し」を入力します。
    「商品検索」のままで構いませんが、別の呼び方で表したければ、別 の名称を入力します。
  3. 検索対象を特定の商品カテゴリに絞って検索できるようにしたい場合 にチェックします。「初期選択肢名」とは、カテゴリを指定する欄にあら かじめ表示されている文言です。
  4. 検索対象を特定の商品グループに絞って検索できるようにしたい場 合にチェックします。「初期選択肢名」とは、グループを指定する欄に あらかじめ表示されている文言です。
  5. 検索するキーワードを入力する欄です。
  6. 検索対象を価格帯で絞って検索できるようにしたい場合にチェックし ます。価格帯入力欄を表示します。
  7. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  8. 画面右上の「お店ページに反映する」ボタンをクリックします。


商品検索(上部)と(下部)の内容は連動しています。
いずれか片方を編集すれば、両方に反映します。
よって、それぞれの表示項目を異なる設定にすることはできません。

■「ページ送り」のパーツを編集します

商品数が多く複数のページに分かれた時に、次のページへ移動できるリ ンクを表示するパーツです。
また、お客さんが商品の並び替えや並び方の変更をできるようにするパ ーツでもあります。
  1. ページ送りの「編集」ボタンをクリックします。
    (上部)(下部)、両方表示する場合はどちらでも構いません。
    片方だけ表示する場合は、表示するパーツの方をクリックします。
    編集画面が開きます。
  2. 件数/ページ数:
    この一覧の全商品数と、全ページ数、そして今は何ページ目かを 表示します。
          例) 全31 件 1/2 ページ

    並び替えプルダウン:
    「商品の並び順」をお客さん自身で変更できるようにプルダウンメニ ューを表示します。メニューは以下のとおりです。

    • 標準
    • おすすめ商品順
    • 新着商品順
    • 値段の安い順
    • 値段の高い順
    • 名前: 昇順
    • 名前: 降順

    在庫あり商品の絞り込み:
    「在庫の有無による商品の絞り込み」をお客さん自身で変更できるよ うにプルダウンメニューを表示します。メニューは以下のとおりで す。

    • 在庫あり
    • 在庫なし含む
    初期表示はパソコンサイト側の設定に準じます。

    画像あり/画像なし/カタログ表示:
    商品一覧の並べ方を、お客さん自身で変更できるようにボタンを 表示します。選択肢は、1列(画像あり)、1列(画像無し)、2列(カタログ表示)です。商品名などのその他の表示項目は「商品一覧」のパーツで選択します。

    ページ送り:
    ページ送りのリンクを表示します。「前へ」「次へ」と表示します。

  3. 商品一覧ページを開いた時に表示する、標準の商品一覧の並べ方 を選びます。 選択肢は、1列(画像あり)、1列(画像無し)、2列(カタログ表示)です。商品名などのその他の表示項目は「商品一覧」のパーツで選択します。
  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。


ページ送り(上部)と(下部)は連動しています。
いずれか片方を編集すれば、両方に反映します。
また、非表示にすることもできません。

■「商品一覧」のパーツを編集します

  1. 商品一覧の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 表示したい項目にチェックを入れます。「画像あり 画像なし」の時と「カタログ表示」の時では異なる項目を表示できるため、それぞれ項目を選択します。

    商品名:
    商品の名前を表示します。

    商品画像:
    商品の画像を表示します。

    商品説明(内部用キャッチコピー):
    商品説明を表示します。表示する内容は、スマートフォン(オプショ ン)用内部用キャッチコピー を表示します。

    販売価格:
    商品を実際に販売する価格を表示します。商品一覧の時点では価格 を表示したくなければチェックを外します。

    定価と割引率:
    二重価格表示をする際にチェックします。

    個別送料無料:
    商品一覧ページで自動的に、送料が無料になるように個別登録している商品の価格の右横に「送料無料」と表示したい場合にチェックします。この場合、「販売価格」にもチェックが入っている必要があり、外れていると「個別送料無料」にはチェックできません。

    レビューの平均値:
    お客様の声の平均値を表示します。

  3. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  4. 画面右上の「お店ページに反映する」ボタンをクリックします。