page icon

商品グリッド(コレクションページ固有セクション)

このセクションでは、コレクションページに表示させるコンテンツの設定やサイドバーのカスタマイズができます。追加する内容には様々な種類のフィルターに加えて、プロモボックス(バナー)・カスタムHTML・サブスクリプション などがあります。

コレクションページのレイアウト補足(サイドバー)

サイドバーの位置と表示の有無の設定は、テーマ設定→コレクションページ で確認できます。 これらの設定方法については、こちらをご覧ください。
このセクションでは、コンテンツブロックを追加することでサイドバーのコンテンツを管理することができます。サイドバーには9つのコンテンツブロックがありまず。そのうち
  • フィルター (商品しぼりこみ機能)
  • 現在使用中のフィルター
  • コレクション
の3つは一つだけ追加することができます。

商品グリッド

コレクションページの"コンテンツ幅"を"ボックス幅"または"フル幅"で指定できます。

コンテンツの幅

ボックス幅

フル幅

コレクション:ボックス幅
"1ページに表示する商品数"を4〜24の範囲で設定し、コレクションページに表示される商品数を設定できます。
コレクション:表示商品数設定

フィルター

 
ここで、"フィルター" か "タグ"どちらのフィルターオプションを使用するかの設定ができます。 デフォルトでは、Shopify管理画面 -> メニュー -> コレクションと検索の絞り込み で設定されたフィルターがテーマで表示されます。テーマエディタで設定されたタグ("タグ" ブロック)によるフィルタを表示するには、"デフォルトのフィルターを有効にする"オプションのチェックを外してください。
💡
サイドバーで使用できるのは、"フィルター" または "タグ"のどちらか一方のみです。
このブロックでは、フィルターに適用される"フィルター"ブロックに関する一般的な設定を行うことができます。"フィルター"ブロックの設定方法は、こちらをご覧ください。
"フィルターのカウンターとリセットボタンを表示する"オプションを有効にすると、各フィルターブロックに適応させているフィルターの数とリセットボタンが表示されます。
コレクション:フィルターのリセットボタン設定
各商品のバリエーションに関して、購入可能な商品の数をサイドバーに表示するには、オプション"商品の数のカウンターを表示する"を有効にしてください。
コレクション:カウンター表示の設定
"無効になっているフィルターを隠す"オプションにより、在庫切れの商品のバリエーションを非表示にしたり、購入不可として表示させることができます。
コレクション:無効になっているフィルターの表示例
"利用可能なフィルターを丸いチェックボックスで表示"を有効にすると、 "利用可能"フィルタのデザインを、丸みを帯びたチェックボックスに変更することができます。
コレクション:利用可能なフィルターを丸いチェックブックスで表示の例
"価格フィルターのタイプ"では、価格フィルターの表示方法を
  • スライダーとインプット
  • スライダー
  • インプット
のいずれかに設定できます。
💡
注意:テーマ設定→通貨 で"従来の通貨変換方式を有効にする。"オプションを有効にすると、価格フィルタに適用できるオプションは"スライダー"のみとなります。
コレクション:価格フィルター(スライダー)の設定例

並べ替え方法

このブロックは、"デスクトップのみ表示"または"デスクトップとモバイル"のオプションにおいて、"並べ替え"の方法を表示することができます。 コレクション内の商品を「おすすめ」・「ベストセラー」・「安い順」・「高い順」などで並べ替えることができるようになります。 ストアで "並べ替え"オプションを非表示にするには、"隠す"オプションを選択してください。
コレクション:並べ替えの表示

インフォーメーション

ここでは、検索結果の件数を"デスクトップのみ"または"デスクトップとモバイル"のどちらで表示するかを選択できます。もしくは、"隠す"オプションを設定することで表示を無効にすることができます。
コレクション:インフォーメーション表示の例

グリッド

このブロックでは、デスクトップとモバイルで "グリッドボタンを表示" するかどうか、オプションを無効にするかどうかを選択することができます。
グリッド表示ボタンのオプションは、コレクションページ上で表示されます。
  • 1行に1アイテムボタンを表示 (モバイルのみ)
  • 1行に2アイテムボタンを表示
  • 1行に3アイテムボタンを表示
  • 1行に4アイテムボタンを表示
  • 1行に6アイテムボタンを表示
  • リストボタンの表示(デスクトップのみ)
の選択肢からチェックマークをつけ外しすることで、グリッドのボタン表示の調整を行えます。
コレクション:グリッドボタンの表示

商品リストタイプのデザイン

このテーマには、2つのリストデザインがあります。

デザイン #1

デザイン #2

コレクション:商品リストタイプ デザイン#1

ツールチップを有効にする

このオプションを有効にすると、コレクションページのグリッドボタンにtooltipsが表示されるようになります。
コレクション:ツールチップ表示の例

画面のサイズによる表示商品数の調整

ここでは画面の大きさに対して表示する商品の数を調整できます。

デフォルトでの1行の表示商品数 (エクストララージ画面)

ここでは、特大画面に表示する商品数をドロップダウンリストから選択することができます。

デフォルトでの1行の表示商品数(ラージ画面)

ここでは、デスクトップに表示する商品の数をドロップダウンリストで選択することができます。

デフォルトでの1行の表示商品数 (ミディアム画面)

ここでは、ノートパソコンほどの画面に表示する商品の数をドロップダウンリストで選択することができます。

デフォルトでの1行の表示商品数 (スモール画面)

ここでは、タブレット程度の大きさの画面に表示する商品の数をドロップダウンリストで選択することができます。

デフォルトでの1行の表示商品数(エクストラスモール画面)

ここでは、スマートフォンサイズの画面に表示する商品の数をドロップダウンリストで選択することができます。

商品グリッド上での現在使用中のフィルター

選択したフィルターをデスクトップ、モバイル、またはその両方で表示するなどの設定をする場合、
  • "モバイルのみ"
  • "デスクトップのみ"
  • "デスクトップとモバイル"
の中から1つを選択することができます。また、"隠す"を選択して、このオプションを無効にすることもできます。
コレクション:商品グリッド上での現在使用中のフィルターの表示例

フィルターセクション

このブロックでは、"フィルターセクションのタイトルを大文字にする"オプションを有効にすることで、フィルターのタイトルを大文字で表示するかどうかを選択することができます。各フィルターブロックをボーダー線で区切るには、"フィルターセクションのボーダーを表示"オプションにチェックを入れます。
これらのオプションを両方とも有効にすると、コレクション・ページは以下のような表示になります。
コレクション:フィルターセクションのオプション設定例