商品グリッド(コレクションページ固有セクション)
商品グリッド
このセクションでは、コレクションページに表示させるコンテンツの設定やサイドバーのカスタマイズができます。追加する内容には様々な種類のフィルターに加えて、プロモボックス(バナー)・カスタムHTML・サブスクリプション などがあります。
サイドバーの位置と表示の有無の設定は、*テーマ設定→コレクションページ* で確認できます。 これらの設定方法については、こちらをご覧ください。
このセクションでは、コンテンツブロックを追加することでサイドバーのコンテンツを管理することができます。サイドバーには9つのコンテンツブロックがありまず。そのうち
- 現在使用中のフィルター
- コレクション
- フィルター
の3つは一つだけ追加することができます。
商品グリッド
コレクションページの”コンテンツ幅”を”ボックス幅”または”フル幅”で指定できます。
コンテンツの幅
ボックス幅
フル幅
“1ページに表示する商品数”を4〜24の範囲で設定し、コレクションページに表示される商品数を設定できます。
フィルター
ここで、”フィルター” か “タグ”どちらのフィルターオプションを使用するかの設定ができます。
デフォルトでは、Shopify管理画面 -> メニュー -> コレクションと検索の絞り込み で設定されたフィルターがテーマで表示されます。テーマエディタで設定されたタグ（”タグ” ブロック）によるフィルタを表示するには、”デフォルトのフィルターを有効にする”オプションのチェックを外してください。
このブロックでは、フィルターに適用される”フィルター”ブロックに関する一般的な設定を行うことができます。”フィルター”ブロックの設定方法は、こちらをご覧ください。
“フィルターのカウンターとリセットボタンを表示する”オプションを有効にすると、各フィルターブロックに適応させているフィルターの数とリセットボタンが表示されます。
各商品のバリエーションに関して、購入可能な商品の数をサイドバーに表示するには、オプション”商品の数のカウンターを表示する”を有効にしてください。
“無効になっているフィルターを隠す”オプションにより、在庫切れの商品のバリエーションを非表示にしたり、購入不可として表示させることができます。
“利用可能なフィルターを丸いチェックボックスで表示”を有効にすると、 “利用可能”フィルタのデザインを、丸みを帯びたチェックボックスに変更することができます。
“価格フィルターのタイプ”では、価格フィルターの表示方法を
- スライダーとインプット
- スライダー
- インプット
のいずれかに設定できます。
並べ替え方法
このブロックは、”デスクトップのみ表示”または”デスクトップとモバイル”のオプションにおいて、”並べ替え”の方法を表示することができます。
コレクション内の商品を｢おすすめ｣・｢ベストセラー｣・｢安い順｣・｢高い順｣などで並べ替えることができるようになります。
ストアで “並べ替え”オプションを非表示にするには、”隠す”オプションを選択してください。
インフォーメーション
ここでは、検索結果の件数を”デスクトップのみ”または”デスクトップとモバイル”のどちらで表示するかを選択できます。もしくは、”隠す”オプションを設定することで表示を無効にすることができます。
商品カウント(現在ご利用いただけません)
グリッド
このブロックでは、デスクトップとモバイルで “グリッドボタンを表示” するかどうか、オプションを無効にするかどうかを選択することができます。
グリッド表示ボタンのオプションは、コレクションページ上で表示されます。
- 1行に1アイテムボタンを表示 (モバイルのみ)
- 1行に2アイテムボタンを表示
- 1行に3アイテムボタンを表示
- 1行に4アイテムボタンを表示
- 1行に6アイテムボタンを表示
- リストボタンの表示(デスクトップのみ)
の選択肢からチェックマークをつけ外しすることで、グリッドのボタン表示の調整を行えます。
商品リストタイプのデザイン
このテーマには、2つのリストデザインがあります。
デザイン #1
デザイン #2
ツールチップを有効にする
このオプションを有効にすると、コレクションページのグリッドボタンにtooltipsが表示されるようになります。
画面のサイズによる表示商品数の調整
ここでは画面の大きさに対して表示する商品の数を調整できます。
デフォルトでの1行の表示商品数 (エクストララージ画面)
ここでは、特大画面に表示する商品数をドロップダウンリストから選択することができます。
デフォルトでの1行の表示商品数(ラージ画面)
ここでは、デスクトップに表示する商品の数をドロップダウンリストで選択することができます。
デフォルトでの1行の表示商品数 (ミディアム画面)
ここでは、ノートパソコンほどの画面に表示する商品の数をドロップダウンリストで選択することができます。
デフォルトでの1行の表示商品数 (スモール画面)
ここでは、タブレット程度の大きさの画面に表示する商品の数をドロップダウンリストで選択することができます。
デフォルトでの1行の表示商品数(エクストラスモール画面)
ここでは、スマートフォンサイズの画面に表示する商品の数をドロップダウンリストで選択することができます。
商品グリッド上での現在使用中のフィルター
選択したフィルターをデスクトップ、モバイル、またはその両方で表示するなどの設定をする場合、
- “モバイルのみ”
- “デスクトップのみ”
- “デスクトップとモバイル”
の中から1つを選択することができます。また、”隠す”を選択して、このオプションを無効にすることもできます。
フィルターセクション
このブロックでは、”フィルターセクションのタイトルを大文字にする”オプションを有効にすることで、フィルターのタイトルを大文字で表示するかどうかを選択することができます。各フィルターブロックをボーダー線で区切るには、”フィルターセクションのボーダーを表示”オプションにチェックを入れます。
これらのオプションを両方とも有効にすると、コレクション・ページは以下のような表示になります。
