コレクションページ

コレクションページを編集するには、テーマエディターの上部のページ選択から コレクション > デフォルトのコレクション を開きます。初期状態では コレクションの見出し（バナー） と コレクション（商品グリッド） の 2 つのセクションで構成されています。設定の範囲は、コレクション・検索・一覧のページにすべて載っています。

コレクションの名前、画像、説明を表示します。

設定	選択肢・範囲	補足
コレクションの画像を出す	オン・オフ	Shopify 管理画面でコレクションに設定した画像を使います。
画像の置き方	横に並べる、重ねる、上、色の面と棚
高さ	小、中、大、画面、画像に合わせる	重ねるの場合。
背景を暗くする強さ	0〜80 %	重ねるの場合。文字を読みやすくするために画像を暗くします。
文字の位置	左上から右下までの 9 か所	重ねるの場合。
見出しの大きさ	小、中、大、特大の見出し
横の揃え	始まりの側、中央
説明を出す、商品の数を出す（「128 点」）	オン・オフ
サブコレクション、サブコレクションの型	コレクション、チップ・画像つき	見出しの下に、関連するコレクションへのリンクを並べます。
大きな見出し	文字	コレクション名の上に大きく 1 行表示します（英単語など）。コレクションのメタフィールドに接続すると、コレクションごとに変えられます。
特集の番号	文字	名前の上に「No.03」のように表示します。コレクションのメタフィールドに接続すると、コレクションごとに番号を振れます。
章の扉にする	オン・オフ	メインメニューの第 1 階層からリンクしているコレクションで、見出しに章番号とメニューの項目名を表示します。

色の面と棚

画像の置き方 を 色の面と棚 にすると、バナー全体が淡い色の面になり、コレクションの商品の一部が棚の上に並びます。

棚に並べる商品の数：2〜6
棚の商品の大きさ：小、中、大
面の色：空欄の場合は、コレクションのメタフィールド custom.field_colour を、それもなければパレットの桜色を使います。

棚に並ぶ商品は、custom.cutout の切り抜き画像（背景が透明な .png）があればそれを使い、面の上に直接立たせて柔らかい影を付けます。切り抜き画像がない場合は、最初の商品写真を色の面になじませて表示します。なじみが最もよいのは白背景の写真です。写真の縁は少しずつ透けるようにしているので、グレーやクリーム色の背景でも四角い縁は目立ちません。影まで自然に見せたいときは、切り抜き画像を用意してください（メタフィールド）。

商品グリッド

設定	選択肢・範囲	補足
列数（PC）	2〜6
列数（スマホ）	1、2
1ページの商品数	8〜48（4 刻み）
ページ送り	ページ番号、もっと見る、無限スクロール	どの方式でもページへのリンクはページ内に残すので、検索エンジンや JavaScript が動かない環境でもすべての商品にたどり着けます。無限スクロールは自動読み込みを 3 回行うと止まります。商品ページから戻ると、元のスクロール位置に戻ります。
絞り込み	オン・オフ
絞り込みの置き方	サイドバー、ドロワー、横	スマホでは、絞り込みは画面の下から開きます。
絞り込みの件数	オン・オフ
値がこの数を超えたら「もっと見る」	3〜20	項目の多い絞り込みを、この数で折りたたみます。
最初に開いておくグループ	なし、最初だけ開く、すべての人	サイドバーの場合。
並び替え	オン・オフ
列数の切り替えボタン	オン・オフ	お客様が列数を切り替えられるようにします。
コレクションのメニュー（空で出さない）	メニュー	絞り込みの上にリンクの一覧を表示します（ほかのコレクションへのリンクなど）。見出しはメニューの見出しで付けられます。スマホでの表示方法はスマホでのメニューの出し方（ドロワー、選択までスクロール）で選びます。
画像の比率、ホバーの動き		このグリッドだけ、テーマ設定と別の値にできます。

絞り込み

絞り込みには Shopify の標準機能をそのまま使っています。表示する項目（在庫状況、価格、商品タイプ、販売元、色やサイズなどのオプション、メタフィールド）は、Shopify Search & Discovery アプリの フィルター で選びます。オプションの値に色を設定していれば、色の絞り込みにスウォッチが表示されます。

商品の並びの見た目

商品グリッドには 商品の並びの見た目 ブロックが常に入っています。サイドバーでこのブロックを選ぶと、グリッドの雰囲気を変えられます。

設定	選択肢	内容
最初の商品を大きく（2 × 2）	オン・オフ	最初の商品を 4 マス分の大きさで表示します。最初のページで、絞り込みをしておらず、コレクション本来の並び順で、商品数と列数が 3 以上の場合に限ります。
写真を淡い色の面に置く	オン・オフ	白背景の写真向けの設定です。白い部分が淡い色の面になり、実際の影は残ります。
面の色	パレットの淡い色を順に、1 つ	1 つの場合は面の色（1 色）で色を選びます。商品のメタフィールド custom.field_colour があれば常にそちらが優先されます。
商品名と価格を写真の下に	オン・オフ	カードの型に関係なく、すべての写真の下に表示します。
商品名の大きさ（見出しの書体）	テーマ設定に従う、中、大、特大
行の間隔	テーマ設定に従う、中、大、特大
動き	なし、控えめ、大胆

テーマ設定 > 商品カード の カードの型 を 色の面＋品の横の札 にしている場合は、このブロックの 札と品のカードの大きさを調整する をオンにすると、カードの各部のサイズを調整できます。色の面の形（四角、横長、広い）、札の幅（28〜50 %）、札の商品名の大きさ（小、中、大、特大）、札の価格の大きさ（小、中、大）、品の大きさ（60〜100 %）、写真の中の品の足もとの位置（60〜100 %、初期値：82）、床の線（なし、細い、中、太い）です。

商品グリッドに プロモーションのタイル ブロックを追加すると、商品と商品の間に画像、動画、色、商品、コレクション、記事を差し込めます。

何番目に入れるか（コレクションのグリッド）：1〜48（細かく設定する の中）
幅（列。コレクションのグリッド）：1 または 2
絞り込んだら隠す（コレクションのグリッド）：絞り込み中はタイルを隠し、絞り込み結果の間に入り込まないようにします。
文字の位置 と 背景を暗くする強さ（0〜80 %）

コレクションの説明

長めのコレクション説明を、商品の上ではなく下に表示したい場合は、コレクションの見出し（バナー）の 説明を出す をオフにし、商品グリッドの下に コレクションの説明（グリッドの下に置くとき） セクションを追加します。幅は 最大幅 で指定します。

商品比較

テーマ設定 > 商品カード の 比較のチェック（細かく設定する の中）をオンにし、コレクションページか固定ページに 商品比較 セクションを追加します。お客様は最大 4 点の商品にチェックを入れて、項目ごとに比べられます。比べる項目は 比べる行 ブロックで、価格、評価、ブランド、商品タイプ、オプション、メタフィールドから選びます。

コレクション一覧ページ

/collections のページには、すべてのコレクション、または選んだコレクションが並びます。テーマエディターでは コレクションリスト を選んで編集します。設定は元（すべて、選んだもの）、並び（すべてのとき）、1ページの数（8〜48）、列数（PC）（2〜6）、列数（スマホ）（1、2）、コレクションカードの型、商品の数を出す（「128 点」）、並べ方（グリッド、目次）です。