成功
補完商品
レスポンシブなレイアウトと柔軟な商品カードスタイルで、関連する追加商品を目立たせます。
- セクションとブロックに関するShopifyドキュメント
- レイアウト設定に関するCompany XYZドキュメント
- スライドショーコントロール設定に関するCompany XYZドキュメント
- ヘッダー設定に関するCompany XYZドキュメント
- 商品カード設定に関するCompany XYZドキュメント
- カード設定に関するCompany XYZドキュメント
- セクション余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
このセクションを使用して、現在の商品と相性のよい商品、たとえばアクセサリー、バンドル、補充アイテムを表示します。購入の主な流れを妨げずに追加購入を増やしたい場合に最適です。テーマセクションの仕組みの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
このセクションには、Search & Discovery app で補完レコメンドとして設定された商品だけが表示されます。
在庫切れの商品、またはすでにカートに入っている商品は、自動的に一覧から除外されます。
商品数 を使用して、表示するおすすめ件数を調整します。セクションで利用可能な商品をすべて表示したい場合は、0 を使用して、セクションの上限まで一致する商品をすべて表示できます。
商品数を少なくすると、購入フォームの近くで表示領域をコンパクトに保てます。商品数を多くすると、より広いグリッドまたはスライドショーで、より充実した閲覧体験を提供したい場合に適しています。
レイアウト設定
Section titled “レイアウト設定”これらの設定は、デスクトップ、タブレット、モバイルでレコメンドをどのように配置するかを制御します。共通のレイアウト動作については、レイアウト設定を参照してください。
デバイスごとに別々のレイアウトを選択できます。これは、大きな画面では比較しやすいグリッドを、より小さな画面ではスワイプしやすいスライドショーを使いたい場合に便利です。列の設定は、カードサイズと、顧客が一度に見られる商品数のバランスを取るのに役立ちます。
タブレット用の別レイアウトが不要な場合は、タブレットをデスクトップ設定に従わせて、セクションを管理しやすくします。
スライドショー設定
Section titled “スライドショー設定”いずれかのデバイスでスライドショーのレイアウトを使用する場合、これらの設定で顧客がレコメンドをどのように閲覧するかを制御します。共通の操作オプションについては、スライドショーのコントロール設定を参照してください。
デフォルトのアニメーションは、複数カードの閲覧に最も柔軟な選択肢です。Fade は一度に1枚ずつのシンプルな表示を作成し、落ち着いた印象になりますが、一度に表示できる内容は少なくなります。
自動再生は動きを加えられますが、商品レコメンドでは通常、慎重に使うのが最適です。有効にする場合は、商品名と価格を読むのに十分な時間を確保できる遅延を選択してください。
ナビゲーション、ページネーション、次のスライドのプレビューは、さらに商品が利用可能であることを示すのに役立ちます。次のスライドのプレビューはタッチデバイスで特に便利ですが、Fade アニメーションを使用している場合は適用されません。
Fade アニメーションは、1枚ずつの表示を強制します。また、ページネーションと次のスライドのプレビューも無効になります。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定では、ここで使われる共通のヘッダーコントロールについて説明しています。このセクションでは、ヘッダーがタイトル、任意のキャプション、補足テキスト、任意のボタンでレコメンド領域を導入します。
見出しは短く保ち、商品が主役であり続けるようにします。ボタンは、より広い関連コレクションを閲覧するなど、明確な次のステップを示せる場合にのみ追加してください。
商品カード設定 と カード設定 では、ここで使われる共通コントロールについて説明しています。これらの設定を使うと、このセクションだけ商品カードの通常の表示を上書きできます。
これらを使って、補完商品を他の場所のカードよりも、よりシンプルに、よりコンパクトに、またはより販促的に見せられます。特に商品が横並びで複数表示される場合は、画像比率を揃えると、たいてい最もきれいな仕上がりになります。
CTA とバリアントセレクターの選択により、セクション内で直接どれだけ操作できるかが変わります。バリアント選択を有効にする場合は、オプションが一目で理解できるようにしてください。
バナーのオーバーレイカラーは、カードスタイルが Banner に設定されている場合にのみ重要です。カードカラーを変更する場合は、タイトル、価格、アクションが読みやすいように、コントラストを慎重に確認してください。
セクションの余白設定リファレンス では、このセクションで使われる共通の余白コントロールについて説明しています。余白を使って、レコメンドを周囲の商品コンテンツにどれだけ近づけるかを調整します。
余白を狭くすると、セクションがメインの商品エリアとつながって見えます。余白を広くすると、独立したコンテンツブロックとして見せたい場合に適しています。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、ここで使われる共通の背景オプションについて説明しています。色、グラデーション、画像、動画を追加して、レコメンド領域を際立たせることができます。
これは、商品ページの他の部分とより強く視覚的に区切りたい場合に最適です。背景画像または動画を追加する場合は、カードが読みやすいようにし、商品画像と競合する背景は避けてください。
区切り線設定
Section titled “区切り線設定”区切り線設定では、ここで使われる共通の線コントロールについて説明しています。上部と下部の区切り線は、フル背景を追加しなくてもセクションに構成を与えます。
これは、ページにすでに十分な視覚的コントラストがあり、レコメンドの周囲に軽い境界だけが必要な場合に適しています。
表示設定では、共通のレスポンシブ表示コントロールについて説明しています。このセクションでは、デスクトップとモバイルで異なるレコメンド戦略を使いたい場合に特に便利です。
これは慎重に使用し、ストアで最も重要なデバイスで役立つ追加提案へのアクセスを顧客が失わないようにしてください。
レイアウト幅の設定リファレンスでは、ここで使われる共通の幅コントロールについて説明しています。コンテンツ幅は、1行に快適に収まるカード数に影響し、セクション幅は背景を使う場合や、より広い視覚表現にしたい場合に最も重要です。
幅の広いレイアウトは、通常、より多い商品セットと複数列のグリッドに適しています。幅を狭くすると、少数のレコメンドに注意を向けやすくなります。
使用上の注意
Section titled “使用上の注意”- まずレコメンドを設定します。 セクションが空に見える場合は、Search & Discovery app で補完商品が割り当てられているか確認してください。条件を満たすレコメンドがない場合でも、セクションは空状態の表示を強制しません。
- デバイスごとにレイアウトを選びます。 グリッドとスライドショーのコントロールによって、配置、表示、ナビゲーション、一度に表示されるコンテンツ量が変わるため、デスクトップとモバイルの両方を確認してください。
- フォールバックスタイルを使いたい場合は既定値を維持します。 よりシンプルな見た目を継承したい場合は、背景色、グラデーション、メディアを未設定のままにします。明示的な上書きにより、その領域はより独立した表示になります。
- メディアを慎重に確認します。 デスクトップとモバイルで異なるメディアを使用する場合は、切り抜き、読みやすさ、読み込みを確認し、両方のビューポートで商品カードが明確に見えるようにします。
- 実際の商品でプレビューします。 複数のレコメンドがある商品でセクションをテストし、余白、件数、スライドショーの動作を確認します。