成功
注目商品
選りすぐりの商品を、柔軟なグリッドまたはスライドショーで強調表示します。
- セクションとブロックに関するShopifyドキュメント
- レイアウト設定に関するCompany XYZドキュメント
- スライドショーコントロール設定に関するCompany XYZドキュメント
- ヘッダー設定に関するCompany XYZドキュメント
- 商品カード設定に関するCompany XYZドキュメント
- 商品バリエーションに関するCompany XYZドキュメント
- セクションの余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
Featured products を使って、ページの任意の場所で特定の商品セットを目立たせます。新着、季節のおすすめ、ギフトガイド、キャンペーンの訴求など、表示する商品を完全にコントロールしたい厳選編集に最適です。セクションとブロックの仕組みの概要については、セクションとブロックに関するShopifyドキュメント を参照してください。
まず、注目させたい商品を選択します。このセクションは手動で厳選するため、自動で変わるフィードよりも、意図した商品構成にしたい場合に最適です。
レイアウト設定
Section titled “レイアウト設定”レイアウト設定では、デスクトップ、タブレット、モバイルで表示される商品カード数と、各デバイスでグリッドまたはスライドショーのどちらを使うかを制御します。これにより、大きな画面では比較しやすい行表示、小さな画面ではスワイプしやすい表示にするなど、柔軟に対応できます。レイアウト制御の詳細については、レイアウト設定に関するCompany XYZドキュメント を参照してください。
tablet の値を 0 のままにすると、タブレットの列数はデスクトップ設定に従います。これは、個別のタブレット列数を管理せずに、1つの一貫した大画面レイアウトにしたい場合に便利です。
各カードに持たせる商品詳細の量に応じて、列数を選択してください。列数が少ないほど商品画像、タイトル、アクションに余裕が生まれ、列数が多いほど、より密度の高い商品配置になります。
カードの詳細を多く表示する場合は、列数を上げすぎないようにしてください。密度の高いレイアウトでは、特にタブレットやモバイルで商品情報やアクションを把握しにくくなることがあります。
スライドショー設定
Section titled “スライドショー設定”スライドショー設定では、デバイスでスライドショーレイアウトが有効な場合の動き、自動再生、ループ、ナビゲーション、ページネーション、スライドプレビューの動作を制御します。これらの設定は、固定された商品グリッドよりも、より誘導的な閲覧体験にしたい場合に特に役立ちます。スライドショー制御の詳細については、スライドショーのコントロール設定に関するCompany XYZドキュメント を参照してください。
アニメーションスタイルが主な判断ポイントです。フェードは1件ずつ表示する、よりすっきりした見せ方になります。一方、デフォルトのアニメーションは、同じカルーセルの流れの中で複数の商品を表示したい場合に適しています。
自動再生は動きを加えられますが、商品を見つける時間を急がせるべきではありません。カードに商品タイトル、抜粋、またはバリアントオプションが含まれる場合は、通常、より遅い自動再生の間隔のほうが適しています。
ナビゲーションとページネーションは、どれだけのコンテンツが利用可能かをユーザーが把握するのに役立ちます。次のスライドをプレビューすると、カルーセルがよりインタラクティブに感じられますが、フェードアニメーションでは利用できません。
フェードアニメーションでは単一スライドのレイアウトが強制され、ページネーションやスライドプレビューなどの一部のスライドショー機能は非表示になります。より一般的な複数カードのカルーセルにしたい場合は、デフォルトのアニメーションを使用してください。
カードカラー設定
Section titled “カードカラー設定”このセクション専用にカードカラーを上書きするには、これらの設定を使用します。ストア全体の他のカードを変更せずに、注目商品にキャンペーン固有の見た目を持たせたい場合に便利です。
バナーオーバーレイ設定は、カードスタイルが Banner に設定されている場合にのみ適用されます。他のカードスタイルでは、商品詳細を見やすく保つために、カードの背景、枠線、見出し、テキストの色に注目してください。
これらの設定では、セクションレベルのアイコン、見出し、サブ見出しの色を制御します。導入コンテンツをキャンペーンの配色に合わせたい場合や、既定のテキストスタイルから切り離したい場合に使用します。
セクション背景に画像、グラデーション、または動画も使用する場合は、背景を設定したあとにこれらのテキストカラーを見直してください。単色の背景では問題なく見えるコントラストでも、メディアを追加すると維持できないことがあります。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共有ヘッダーコントロールを使うと、任意のアイコン、キャプション、見出し、補足テキスト、ボタンで構成を追加し、文脈を示せます。これは、特に編集的または販促的なレイアウトで、わかりやすさを高め、商品グループをより意図的に見せるのに役立ちます。ヘッダーコントロールの詳細については、ヘッダー設定に関するCompany XYZドキュメント を参照してください。
ヘッダーボタンはテキストの上または下に配置でき、モバイルでは別の位置指定と、任意の全幅モバイル表示を設定できます。ボタンは、より広い商品範囲を見るなど、1つの明確な次のステップに絞ってください。
共有カードコントロールを使うと、このセクション専用に既定の商品カード表示を上書きできます。カードスタイル、画像比率、テキスト密度、ボタンの表示、テキストの配置、バリアントセレクターの動作を調整できます。商品カードの詳細については、商品カード設定に関するCompany XYZドキュメント を参照してください。
ここは、見た目の販促性と商品詳細のバランスを取る主要な場所です。セクションが画像重視なら、テキストとアクションを簡潔にしてください。比較重視なら、タイトルと行動喚起を一貫して見やすく保ってください。
バリアントセレクターの表示には、正しく動作させるための追加設定が必要です。設定の詳細については、商品バリエーションに関するCompany XYZドキュメント を参照してください。
共有余白コントロールを使うと、デスクトップとモバイルでセクションの上下のスペースを調整できます。余白コントロールの詳細については、セクションの余白設定に関するCompany XYZドキュメント を参照してください。
余白を大きくすると、注目商品グループをより上質で独立したまとまりとして見せられます。一方、余白を狭くすると、このセクションが近くのコンテンツを補完する場合に適しています。カードが積み重なっている場合やスライドショーレイアウトの場合、セクションが高くなりすぎるように感じるときは、モバイル専用の余白が役立ちます。
セクション背景設定
Section titled “セクション背景設定”共有背景コントロールを使うと、セクションの背後に色、グラデーション、画像、または動画を追加できます。背景コントロールの詳細については、セクション背景設定に関するCompany XYZドキュメント を参照してください。
背景メディアによってセクションにより編集的な印象を与えられますが、読みやすさにも影響します。オーバーレイは慎重に使用し、ヘッダーテキストと商品カードが背景から明確に見分けられることを確認してください。
区切り線設定
Section titled “区切り線設定”共有区切り線コントロールを使うと、セクションの上下に区切り線を追加できます。区切り線コントロールの詳細については、区切り線設定に関するCompany XYZドキュメント を参照してください。
このセクションが見た目の似たコンテンツの間に配置され、より明確な境界が必要な場合に区切り線は便利です。カードや背景がすでに強い視覚的区別を生み出している場合は、控えめにしてください。
共有表示コントロールを使うと、デバイスサイズごとにセクションの表示・非表示を切り替えられます。表示コントロールの詳細については、表示設定に関するCompany XYZドキュメント を参照してください。
これは、画面サイズによって商品戦略が異なる場合に役立ちます。あるデバイス範囲でセクションを非表示にする場合は、その範囲でも同じ商品が適切な場所に表示されるようにしてください。
共有幅コントロールを使うと、コンテンツ幅と外側のセクション幅の両方を管理できます。幅コントロールの詳細については、レイアウト幅の設定に関するCompany XYZドキュメント を参照してください。
コンテンツ幅は商品エリアがどれだけ広がれるかに影響し、セクション幅は背景を使用する場合や外側のラッパーをさらに広げたい場合により重要です。幅の変更は、余白や端から端までの表示がより正確なライブページ表示で判断するのが最も簡単です。
使用上の注意
Section titled “使用上の注意”- 明確な商品ストーリーを厳選する。 テーマ、対象ユーザー、または用途でまとまりのある商品を選び、このセクションに意図を持たせます。
- 目的に合ったレイアウトを選ぶ。 比較しやすくするならグリッド、より誘導的でスワイプしやすい閲覧体験にするならスライドショーレイアウトを使用します。
- 両方のデバイス表示を確認する。 デスクトップとモバイルでは、レイアウト、配置、ナビゲーション、メディア動作が異なることがあるため、変更後は各ブレークポイントを確認してください。
- メディアの上書きは慎重に扱う。 デスクトップ用とモバイル用で別のメディアを選ぶと、特に背景やオーバーレイが関係する場合、切り抜き、読み込み、フォールバック動作、読みやすさが変わることがあります。
- カード内容の比率を保つ。 表示する列数が多いほど、タイトル、価格、アクションを見やすく保つために、各カードはよりシンプルにすべきです。
- コンテキスト内でコマースアクションを確認する。 商品詳細、選択済みバリアント、数量、在庫状況、設定済みのカートアクションはすべて、顧客がこのセクションから追加または実行できる内容に影響します。