成功
コレクション
フィルター、並び替え、カードスタイル、グリッド内のプロモーションバナーを備えた、カスタマイズ可能なコレクショングリッドを作成します。
- Company XYZのグリッドインターフェース設定に関するドキュメント
- セクションのカスタマイズに関するShopifyドキュメント
- Company XYZのフィルターに関するドキュメント
- セクションとブロックに関するShopifyドキュメント
- Company XYZのコレクションバナーブロックに関するドキュメント
- Company XYZのヘッダー設定に関するドキュメント
- Company XYZの商品カード設定に関するドキュメント
- Company XYZのセクション余白設定に関するドキュメント
- Company XYZのセクション背景設定に関するドキュメント
- Company XYZの区切り線設定に関するドキュメント
- Company XYZのレイアウト幅設定に関するドキュメント
このセクションを使って、現在のコレクションを、閲覧コントロール、カード表示オプション、グリッド内の任意のプロモーションバナーを備えた柔軟な商品グリッドにします。商品をすばやく確認し、結果を絞り込み、一覧から離れずに注目コンテンツを見つけたいコレクションページに最適です。
このセクションは常にアクティブなコレクションから商品を取得します。最初の重要な選択は、在庫切れ商品をどう扱うかです。これは閲覧のわかりやすさと商品の表示に影響します。
在庫切れ商品を非表示にすると、グリッドは今すぐ購入できる商品に絞られます。再入荷がよくある場合や、商品の全体を見てもらいたい場合は、末尾に移動する方が適していることが多いです。
顧客が再入荷を頻繁に待つ場合は、在庫切れ商品を完全に非表示にするよりも、末尾に表示する方が通常は適しています。
グリッドインターフェース設定
Section titled “グリッドインターフェース設定”これらの設定では、デフォルトのデスクトップおよびモバイルのグリッドレイアウトと、顧客がグリッドを自分で調整できるかどうかを制御します。詳しくは グリッドインターフェース設定 をご覧ください。
デフォルトの列数は、各商品に必要な視覚的スペースに応じて選びます。大きいカードは画像中心の商品に向いており、密度の高いグリッドは大量のカタログをよりすばやく閲覧できるようにします。
グリッドサイズのインターフェースを有効にすると、買い物客は閲覧方法をより細かく調整できます。Sticky interface を使うと、顧客がスクロールしてもこれらのコントロールが表示されたままになり、特に長いコレクションページで便利です。エディターでのセクション動作の概要については、セクションのカスタマイズに関するShopifyドキュメント をご覧ください。
フィルター設定
Section titled “フィルター設定”これらの設定では、顧客が結果を絞り込み、並べ替えるためのフィルターと並び替えコントロールを追加します。フィルターは、使えるようになる前に追加の設定が必要で、テーマの filter setup guide も用意されています。
コレクションに共通する属性で絞り込む利点があるほど幅広い場合は、フィルターを有効にします。小規模なコレクションや厳選されたコレクションでは、フィルターは価値よりもインターフェース要素が増えることがあります。
在庫状況が買い物の判断に関わる場合は、在庫フィルターが最も効果的です。並び替えは多くのコレクションで有効なデフォルトですが、フィルターを初期状態で開いたままにしておくのが最も役立つのは、すぐに絞り込みを使う可能性が高い場合です。
これらのセクション固有のカラー上書きは、アイコン、テキスト、サブ見出しなど、このセクション独自のヘッダー内容に適用されます。コレクションページに、より広いテーマカラーを変更せずに、独自の見た目を持たせたい場合に使用します。
上書きは意図的に行い、読みやすさを保ってください。カスタムのセクション背景も使用する場合は、見出し内容がはっきり読めるように、コントラストを慎重に確認してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Collection banner
コレクションバナー
Section titled “コレクションバナー”Collection banner ブロックを使うと、プロモーションコンテンツを商品グリッド内に直接配置できます。詳しくは コレクションバナー をご覧ください。
このブロックは、新商品の発売、季節キャンペーン、厳選編集、コレクション固有のメッセージに適しています。最大2つのバナーを追加できますが、同じサイズのバナーは1つだけ表示されます。
バナーの表示はコレクションサイズによって決まります。大きいバナーには少なくとも6商品、小さいバナーには少なくとも11商品が必要です。
選択したバナーサイズに対してコレクションが小さすぎる場合、バナーは表示されません。
プロモーションメッセージが読みやすいように、背景画像や動画は慎重に使用してください。デスクトップのトリミングが小さい画面でうまく表示されない場合は、モバイル専用のメディアが役立ちます。
前面のコンテンツには、テキスト、ボタン、アイコン、ロゴやプロモーション画像などの補助メディアを含めることができます。全体リンクスタイルを選ぶと、サブ見出しテキスト内のリンクは削除されます。
このブロックには独自の表示コントロールもあり、バナーをデスクトップのみに表示したい場合や、モバイルのみに表示したい場合に便利です。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共有の ヘッダー設定 を使用します。このセクションでは、ヘッダーがオプションのアイコン、キャプション、見出し、補足テキスト、ボタンコンテンツでコレクションを紹介します。
コレクションタイトルだけでは短すぎる場合に、文脈を追加するのに適した場所です。ボタンは、関連コレクションへのリンクや役立つ購入ガイドへのリンクなど、補助的なアクションとして使うのが最適です。
共有の 商品カード設定リファレンス を使用します。これらの設定は、このセクションのデフォルトの商品カード表示を上書きし、スタイル、画像比率、テキスト密度、CTA スタイル、配置、バリアント表示を含みます。
これらの上書きは、コレクションの買い物の特性に合わせて使用してください。視覚的なカテゴリは、より強い画像表現と少ないテキストが有効なことが多く、技術的なカテゴリや比較が多いカテゴリでは、より明確なタイトル、抜粋、バリアントの手がかりが必要になることが通常です。
一部の設定は、特定のカードスタイルでより重要になります。たとえば、中間の縦方向配置はバナースタイルのカードレイアウトでのみ完全に適用され、バリアントセレクターは商品オプションデータがすでに一貫している場合に最も効果的です。
共有の セクションの余白設定リファレンス を使用します。これらのコントロールは、コレクションセクションの上下のスペースを調整します。
詰めた間隔は、商品数の多いページを効率的に感じさせます。よりゆったりした間隔は、セクションヘッダーや背景表現がビジュアルストーリーの一部になっている場合に適しています。
セクション背景設定
Section titled “セクション背景設定”共有の セクション背景設定 を使用します。これらの設定では、セクションの背後に色、グラデーション、画像、動画を追加できます。
背景表現は、特にカスタムのヘッダーやカードカラーと組み合わせると、コレクションをより編集的、またはキャンペーン主導の印象にできます。ページの視覚的な重みを変えることがあるため、公開前に画面サイズごとにプレビューしてください。
区切り線設定
Section titled “区切り線設定”共有の 区切り線設定 を使用します。上部と下部の区切り線は、似たようなコンテンツ領域の間にセクションがあるとき、その区切りを明確にするのに役立ちます。
控えめな区切り線で通常は十分です。ページにより明確な視覚的境界が必要な場合にのみ、より強い線スタイルを使用してください。
共有の レイアウト幅の設定リファレンス を使用します。これらの設定では、コンテンツの最大幅とセクションの外側の幅を制御します。
幅広いレイアウトでは、1行に表示される商品数を増やし、スクロール量を減らせます。幅が狭いレイアウトは、より厳選された印象になり、特に背景やプロモーション表現が重要な場合にヘッダー内容を読みやすくできます。
エディターでは幅の変更が完全には反映されない場合があるため、フル幅または full-bleed レイアウトを確定する前に実際のページをプレビューしてください。
使用上の注意
Section titled “使用上の注意”- グリッド密度を商品に合わせます。 画像中心の商品には列数を少なくし、素早い確認が重要な商品数の多いカタログには密度の高いグリッドを使用してください。
- フィルターは役立つ場合にのみ有効にします。 フィルターは、意味のある共通属性を持つ幅広いコレクションで最も価値があります。
- カードの上書きは戦略的に使います。 画像比率、テキスト、CTA スタイルを調整して、このコレクションで顧客が商品を比較する方法を支援してください。
- 公開前にバナー要件を確認します。 選択したバナーサイズに対してコレクションに十分な商品数があることを確認し、プロモーションブロックが実際に表示されるようにしてください。
- デスクトップとモバイルを別々に確認します。 グリッド密度、メディアのトリミング、バナーの表示は表示領域によって異なる場合があるため、公開前に両方のレイアウトを確認してください。
- 色と背景は読みやすさを保ちます。 デフォルトスタイルの値は基本の見た目を維持し、より強い上書きはセクションをより独立したものにしますが、必ずコントラストを確認してください。
- 実際のレイアウトをプレビューします。 幅の変更、Sticky controls、背景メディアは、エディター上よりも実際のページで異なって感じられることがよくあります。