コレクションページ

コレクションとは、特定の商品をカテゴリーにグループ化するために作成するページで、スマートコレクションと手動コレクションを使用できます。

コレクションページにはデフォルトで、テーマエディタに [コレクションバナー] セクションと [商品グリッド] セクションが用意されています。

コレクションバナーセクションの設定

[コレクションバナー] セクションには、表示中のコレクションの説明および関連するサムネイルが表示されます。

コレクションページのコレクションバナーセクションの設定

設定	説明
コレクションの説明を表示する	コレクションの説明を表示します。
コレクションの画像を表示する	コレクション画像を表示します。
カラースキーム	このセクションに適用する色のセットです。カラースキームの詳細はこちらを参照してください。

## 商品グリッドセクションの設定 {#product-grid-show-product-rating}

[商品グリッド] セクションには、表示中のコレクションに含まれる商品が表示されます。

コレクションページの商品グリッドセクションの設定

設定	説明
ページあたりの商品数	各ページに表示する商品の数。4の倍数 (8～36) で選択します。
デスクトップでの列数	デスクトップコンピューターで表示する商品の列数を設定します。1～6に設定します。
カラースキーム	このセクションに適用する色のセットです。カラースキームの詳細はこちらを参照してください。
画像比	商品グリッドに表示される商品の記事のサムネイルの画像比を設定します。以下のオプションから選択します。 画像に合わせる - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。 縦長 - 画像を2:3の比率で使用できるようにトリミングします。 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
画像の形状	商品画像の形状を次から1つ選択します。 デフォルト - 商品画像を長方形に変更します。 アーチ ‐ 商品画像の上部に丸みを持たせます。 ブロブ ‐ 商品画像を6つの不揃いな形状 (ブロブ) の1つに変更します。マウスオーバーするとユニークなアニメーションが表示されます。 左向き山形印 - 商品画像を左側に尖りがある山形に変更します。 右向き山形印 - 商品画像を右側に尖りがある山形に変更します。 ひし形 - 商品画像をひし形に変更します。 平行四辺形 - 商品画像を向かい合う2辺が平行な平行四辺形に変更します。 丸形 - 商品画像を円形または楕円形に変更します。マウスオーバーするとユニークなアニメーションが表示されます。
マウスオーバー時に2番目の画像を表示する	お客様がデスクトップコンピューターで商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
販売元を表示する	各商品の販売元を表示します。
商品の評価を表示	商品の平均評価を星印で、レビュー数を括弧内に表示します。例：★★★★★ (8)。これには商品レビューアプリも必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに対して必要です。
クイック追加	[クイック追加] オプションを有効にすると、お客様は商品カードのアイテムをカートに追加できます。以下のオプションから選択します。 なし - クイック追加機能を表示しません。 標準 - 商品カードに以下のクイック追加ボタンのいずれかを表示します。 カートに追加 - 単一バリエーション商品の場合。お客様がこのボタンをクリックすると、商品が自動的にカートに追加されます。 オプションを選択 - バリエーションがある商品の場合。お客様がこのボタンをクリックすると、ポップアップダイアログが表示され、そこでバリエーションを選択し、購入手続きを進めることができます。 一括 - クイック注文リスト機能を表示します。
絞り込みを有効にする	商品グリッドを絞り込むオプションを使用可能にする場合は、このオプションを選択します。
デスクトップの絞り込みレイアウト	デスクトップコンピューターでの絞り込みの表示方法を設定します。[水平]、[垂直]、[ドロワー] のレイアウトから選択します。
並べ替えを有効にする	お客様に商品の表示順をソートするオプションを提供したい場合は、このオプションを選択します。
モバイルでの列数	モバイルデバイスで表示する商品の列数を設定します。1列または2列に設定します。
上部の余白	セクションの上部の余白の量を設定します。
下部の余白	セクションの下部の余白の量を設定します。

[商品グリッド] セクションの設定と同様に、商品カードのテーマ設定の一部を表示およびカスタマイズすることもできます。また、セクション固有のカスタムCSSを追加することもできます。