成功
特集コレクション
選択したコレクションを、レスポンシブな商品グリッドまたはスライドショーとして表示します。
このセクションを使用して、1つのコレクションの商品をグリッドまたはスライドショーで表示し、デスクトップ、タブレット、モバイルごとに個別のレイアウトを制御できます。ホームページの商品一覧、キュレーションされたカテゴリーのハイライト、プロモーション用のコレクション特集に適しています。
表示するコレクションを選択し、含める商品数を選びます。アイテム数を 0 にすると、そのコレクションで利用可能なすべてのアイテムがセクションの上限まで表示されます。小規模なコレクションには便利ですが、カード内容が詳細な場合はセクションがやや煩雑に見えることがあります。
テーマエディターでの設定手順については、セクションのカスタマイズに関するShopifyドキュメント をご覧ください。
より絞り込んだキュレーションされた表示にしたい場合は、アイテム数を少なくして、このセクションをプレビューとして使います。商品の並び順が重要な場合は、ここで使う前にコレクション自体の並びを希望どおりに整えておいてください。
このセクションは、手動で選んだ商品の一覧ではなく、コレクションの商品を表示します。正確な商品選択が必要な場合は、特集商品向けに作られたセクションを使用してください。
レイアウト設定
Section titled “レイアウト設定”レイアウト設定 で、表示する商品カード数と、各デバイスサイズでグリッドまたはスライドショーのどちらで表示するかを制御します。これにより、大きな画面では比較しやすい広いレイアウト、小さな画面ではよりコンパクトな閲覧体験を簡単に作成できます。
タブレットは 0 のままにするとデスクトップの列数を引き継げます。両方の表示で揃えたい場合に便利です。デバイスをスライドショーモードに切り替える場合は、同時に表示されるカード数を確認し、テキスト、価格、商品画像が見やすいままであることを確認してください。
一般的な構成は、デスクトップとタブレットで複数列のグリッドを使い、モバイルでスライドショーにする方法です。商品カードにテキストやバリアントオプションが多い場合は、詰まったカルーセルよりもグリッドレイアウトのほうが見やすいことが多いです。
スライドショー設定
Section titled “スライドショー設定”スライドショーのコントロール設定 は、セクションがいずれかのデバイスでスライドショーモードを使う場合に適用されます。アニメーションスタイル、速度、自動再生、ナビゲーション、ページネーション、ループ、次のスライドの一部を表示するかどうかを制御できます。
フェードアニメーションは、1枚ずつの表示に固定されるため、主な判断ポイントになります。そのため、同じ行で複数の商品を比較できるようにする場合よりも、1商品ずつ強調表示したい場合に適しています。
自動再生は、シンプルで視覚的な商品一覧には適していますが、商品の詳細を比較する時間が必要な場合は効果が下がります。次のスライドをプレビュー表示すると、さらに商品があることを伝えやすくなりますが、その分、現在のカードに割り当てられるスペースは減ります。
これらの設定は、アイコン、メインテキスト、サブ見出しのセクションヘッダーの色を上書きします。セクションをカスタム背景の上に配置する場合や、周囲のコンテンツとより強く分けたい場合に特に有効です。
商品自体を主役にしたい場合は、ヘッダーの色はシンプルに保ってください。太めの背景やプロモーション向けカードスタイルも使う場合は、色の変化が多すぎるとセクションが視覚的に詰まって見えることがあります。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定 では、配置、アイコン、キャプション、見出し、補足テキスト、任意のボタンを含む、コレクション上部の導入コンテンツを制御します。このセクションでは、ヘッダーはコレクションにカテゴリーラベル、キャンペーンメッセージ、または他の商品を閲覧するためのリンクを添えるのに役立ちます。
ボタンは、コレクション全体を表示するなど、次の行動を明確に示すために使います。ラベルは具体的にし、セクション自体の見た目がすでに多い場合は、モバイルでのボタン位置と幅も必ず確認してください。
カード設定 では、このセクション専用にデフォルトの商品カード表示を上書きできます。カードスタイル、画像比率、テキストの見せ方、CTAスタイル、テキスト配置、任意のバリアントセレクターの動作を調整できます。
これらの上書きは、このコレクション特集に標準の商品一覧とは異なる役割を持たせたいときに便利です。たとえば、バナースタイルのカードはよりプロモーション向きに見せられ、よりシンプルなスタイルは素早い確認や比較に向いています。
余白設定 では、デスクトップとモバイルでセクションの上下の余白を制御します。コレクションの行では、余白によって、このセクションが独立した特集として見えるか、より密な閲覧の流れの一部として見えるかが変わります。
このセクションを他の商品中心のセクションの間に置く場合は、余白を狭めにします。コレクションをより編集的に、または視覚的に分けて見せたい場合は、余白を広げます。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、セクションの背後に背景色、グラデーション、画像、または動画を追加できます。特にヘッダーと組み合わせると、シンプルな商品行をより強いプロモーション要素に変えられます。
画像や動画の背景を使う場合は、商品カードとテキストが読みやすいことを確認してください。背景のコントラストが強い場合や詳細が多い場合は、オーバーレイが特に役立ちます。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、セクションの上下に任意の線を追加できます。このコレクション特集と近くのコンテンツの間にさりげない境界を作りたい場合に便利です。
セクション自体に強い背景や目立つカードスタイルがある場合は、区切り線は控えめに使ってください。シンプルな区切りであれば、視覚的なノイズを増やさずに構成を整えるのに十分です。
表示設定 では、セクションをデスクトップ、モバイル、または両方に表示するかを制御します。モバイルでの商品訴求の方針をデスクトップのレイアウトと大きく変える必要がある場合に役立ちます。
これは、小さな見た目の調整ではなく、意図的な別レイアウトに使ってください。内容が実質的に同じであれば、1つのよく調整されたレスポンシブセクションを維持するほうが通常は簡単です。
幅設定 では、コンテンツの最大幅とセクション外側の幅を制御します。このセクションでは、幅の変更によってカードの密度、スライドショーの余白、大きな画面でのコレクションの存在感が変わります。
幅を広くすると、より多くの列や大きな商品カードを表示できます。幅を狭くすると、キュレーションされたコレクションをより焦点の定まった見せ方にできます。フル幅またはフルブリードのセクション背景を使う場合は、エディター上の表示が幅変更を誤解させることがあるため、公開されたストアフロントで結果をプレビューしてください。
使用上の注意
Section titled “使用上の注意”- 目的に合うレイアウトを選びます。 比較しやすくするならグリッド、よりコンパクトまたは編集的に見せるならスライドショーを使います。
- 必要に応じて商品数を絞ります。 すべての利用可能なアイテムを表示するより、少数の選択にしたほうが、たいていは見やすい特集行になります。
- カードの上書きは目的を持って使います。 このコレクションに、標準の商品一覧とは明確に違う印象を持たせたい場合にのみ、カードのスタイルを上書きしてください。
- フェードはスポットライトモードとして扱います。 フェードは、複数の商品カードを同時に閲覧するより、1枚ずつ注目させたいときに最適です。
- 各デバイスサイズを確認します。 列数、スライドショーの動作、ヘッダーボタンの配置を合わせて確認し、デスクトップ、タブレット、モバイルのどれでもバランスよく見えるようにしてください。
- メディアと色の選択は一緒に確認します。 デスクトップとモバイルで別のメディアを使う場合、明示的なカラー上書き、背景メディアは、トリミング、読みやすさ、フォールバックスタイルを変えることがあるため、両方の表示サイズでセクションをテストしてください。
- ナビゲーションコンテンツには意図を持たせます。 ヘッダーや関連コントロールによって、買い物客がメニュー、ドロワー、入れ子になったリンクへ移動する場合は、並べ替えたり非表示にした項目が、想定した導線を妨げないようにしてください。
- 販売アクションを実際の文脈でテストします。 商品選択、バリアント選択、数量、在庫状況によって、カードからできる操作が変わることがあるため、特集する予定の商品で結果を確認してください。