商品レコメンデーション

注目のリンク

1. 商品レコメンデーションに関するShopifyドキュメント
2. 商品レコメンデーションセクションに関するCompany XYZドキュメント
3. レイアウト設定に関するCompany XYZドキュメント
4. スライドショーコントロール設定に関するCompany XYZドキュメント
5. カラー設定に関するCompany XYZドキュメント
6. ヘッダー設定に関するCompany XYZドキュメント
7. 商品カード設定に関するCompany XYZドキュメント
8. 商品バリアントに関するCompany XYZドキュメント
9. セクションの余白設定に関するCompany XYZドキュメント
10. セクション背景設定に関するCompany XYZドキュメント
11. 区切り線設定に関するCompany XYZドキュメント
12. 表示設定に関するCompany XYZドキュメント
13. レイアウト幅設定に関するCompany XYZドキュメント

役立つ動画

Shopify動画：売上を増やすために商品ページを最適化する9つのヒント

Shopify動画：売上を増やすために商品ページを最適化する9つのヒント

このセクションを使用すると、自動生成されたレコメンデーションで商品ページに関連商品を表示できます。各商品について手動で商品を選定することなくクロスセルを追加できる実用的な方法でありながら、レイアウト、カード表示、セクションのスタイルを細かく管理できます。

レコメンデーションは、商品と注文のデータに基づいて時間とともに改善されます。また、Search & Discovery を通じて影響を与えることもできます。Shopify によるレコメンデーションの処理について詳しくは、商品レコメンデーションに関するShopifyドキュメントを参照してください。セクションのリファレンスについては、商品レコメンデーションセクションに関するCompany XYZドキュメントを確認できます。

基本設定

セクションレベルでの主なコントロールは Number of items です。表示するレコメンデーション商品の数を制限する場合に使用します。組み込みの最大数まで、利用可能な商品をできるだけ多く表示する場合は 0 に設定します。

少ない数は、狭いレイアウトやページ下部にセクションを配置する場合に適しています。大きなレイアウトでは、より多い数を設定するとセクション全体が充実して見えます。特に、お客様が最初の数件より先も閲覧する可能性が高い場合に効果的です。

関連性のあるレコメンデーションが少数しかない場合、設定した上限より少ない商品しか表示されないことがあります。

レイアウト設定

これらの設定では、デスクトップ、タブレット、モバイルでレコメンデーション商品をどのように配置するかを管理します。デバイスごとにグリッドまたはスライドショーのレイアウトを選択し、それぞれの画面サイズで列数を設定できます。

レイアウト設定に関するCompany XYZドキュメントを参照してください。一般的には、カードの視覚要素がシンプルな場合は列数を増やし、長いタイトル、抜粋、スウォッチ、または目立つCTAスタイルを含む場合は列数を減らします。

0 のままにすると、タブレットではデスクトップの列数を引き継ぐことができます。設定を簡単にしたい場合に便利ですが、デスクトップのレイアウトがすでに密集している場合は、タブレットでの表示を念入りに確認してください。

よくある構成は、大きな画面ではすばやく比較できるグリッドにし、モバイルでは横方向に閲覧しやすいスライドショーにする方法です。モバイルでもグリッドを使用する場合は、カードが詰まりすぎて商品詳細を確認しにくくならないようにしてください。

スライドショー設定

いずれかのデバイスでスライドショーのレイアウトを有効にすると、これらの設定で動き、自動再生、ループ、ナビゲーション、ページネーション、スライドプレビューを管理できます。セクションを編集的でテンポのあるものにするか、直接的で閲覧しやすいものにするかを決められます。

スライドショーコントロールに関するCompany XYZドキュメントを参照してください。商品そのものの邪魔をするのではなく、閲覧をサポートするようにこれらの設定を使用します。

1つの商品を一度に目立たせたい場合は、Fade アニメーションが適しています。1枚のスライドのみのレイアウトになり、複数カードを閲覧する手がかりが減るため、複数のレコメンデーションをすばやく比較する必要がある場合には、通常あまり効果的ではありません。

自動再生は、動きが控えめで、お客様が読むのに十分な時間を遅延に確保できる場合に最も効果的です。デスクトップでは、お客様がカードを操作しているときにホバーで一時停止すると便利です。

ページネーションは、追加の案内が必要なほどスライド数が多い場合に特に役立ちます。次のスライドをプレビューすると、矢印やページネーションだけに頼らず、さらにレコメンデーションがあることを示せます。

ヒント

カードをよりすっきりと整理して表示したい場合は、スライドプレビューをオフにしてください。カード自体の視覚要素がすでに多い場合に特に効果的です。

カラー設定

これらのコントロールでは、アイコン、見出しテキスト、サブ見出しテキストなど、セクションの導入コンテンツを調整します。周囲のコンテンツよりも強いコントラストや少し異なる強調が必要な場合に使用します。

カラー設定に関するCompany XYZドキュメントを参照してください。カスタム背景を追加し、見出しエリアを明瞭で読みやすく保ちたい場合に特に便利です。

標準セクション設定

ヘッダー設定

共有ヘッダーコントロールを使用して、配置、アイコン、キャプション、見出し、サブ見出し、オプションのボタンなど、レコメンデーションの上に表示する導入部分を追加します。ヘッダー設定に関するCompany XYZドキュメントで詳しく確認できます。

セクションに文脈を加えたい場合にヘッダーが役立ちます。たとえば、商品を関連商品や補完的なおすすめ商品として紹介できます。オプションのボタンは、リンク先が表示されているレコメンデーションと明確に一致する限り、より幅広い商品一覧へのリンクに適しています。

カード設定

共有カードコントロールを使用して、このセクションだけで既定の商品カード表示を上書きします。商品カード設定に関するCompany XYZドキュメントで詳しく確認できます。

ここでは、ページ上でのセクションの重要度に応じて、レコメンデーションカードをより視覚的にするか、よりコンパクトにするか、テキスト中心にするかを決められます。バリアントセレクターを有効にする場合は、選択した表示スタイルに対応するようにバリアントを設定してください。バリアントセレクターについては、商品バリアントに関するCompany XYZドキュメントを参照できます。

余白設定

共有の余白コントロールを使用して、セクションの上下のスペースを調整します。セクションの余白に関するCompany XYZドキュメントで詳しく確認できます。

レコメンデーションを独立したコンテンツブロックのように見せたい場合は、余白を増やします。商品ページの近くのコンテンツと密接につなげたい場合は、余白を減らします。

セクション背景設定

共有の背景コントロールを使用して、セクションの背後にカラー、グラデーション、画像、動画を追加します。セクション背景に関するCompany XYZドキュメントで詳しく確認できます。

背景はレコメンデーションをページの他の部分から分けるのに役立ちますが、視覚的な重みも加わります。目立つ背景を使用する場合は、カードのコンテンツと見出しテキストが明確に目立つことを確認してください。

注意

強い背景は商品画像と競合する可能性があります。商品を主役にしたい場合は、背景の処理をシンプルにしてください。

区切り線設定

共有の区切り線コントロールを使用して、セクションの上部または下部に境界線を追加します。区切り線に関するCompany XYZドキュメントで詳しく確認できます。

このセクションがコンテンツの密集した領域の間にあり、より明確な境界が必要な場合に区切り線が役立ちます。商品ページのレイアウトでは、控えめな区切り線スタイルで十分なことがほとんどです。

表示設定

共有の表示コントロールを使用して、このセクションをすべてのデバイスに表示するか、デスクトップまたはモバイルのみに表示するかを決めます。表示設定に関するCompany XYZドキュメントで詳しく確認できます。

デバイスごとに異なるレコメンデーション体験を提供したい場合に便利です。たとえば、デスクトップでは幅広いグリッド、モバイルではよりシンプルな表示にできます。別々のバージョンを作成する場合は、重複した印象にならないようにしてください。

幅設定

共有の幅コントロールを使用して、コンテンツ幅と外側のセクション幅を管理します。レイアウト幅に関するCompany XYZドキュメントで詳しく確認できます。

幅を広くすると一度に多くの商品を表示できます。一方、幅を狭くすると集中しやすく、読みやすくなることがよくあります。レイアウトのスケールは表示場所によって異なって感じられるため、エディターだけでなくライブのストアフロントでも幅の変更をプレビューしてください。

使用上の注意

1. 結果がない場合に備える。 レコメンデーションは、適切な商品コンテキストと十分な数の結果がある場合にのみ表示されます。そのため、一部の商品ではセクションが予想より控えめに見えることがあります。
2. 両方のビューポートを確認する。 特にスライダー、コントロール、メディアを使用する場合、デスクトップとモバイルのレイアウトは異なる動作をすることがあります。公開前に必ず両方のサイズを確認してください。
3. 上書きを意図的に使用する。 空白または既定のスタイルの選択肢では通常、テーマのフォールバックスタイルが維持されます。一方、明示的なカラー、グラデーション、カスタムメディアを使用すると、セクションがページの他の部分から独立した印象になります。
4. メディアを読みやすく保つ。 デスクトップとモバイルで別々のメディアを使用する場合は、すべてのデバイスでセクションが明瞭に見えるよう、トリミング、読み込み、テキストのコントラストを確認してください。
5. 状態を読み取りやすくする。 セクションにフォーム形式の操作や検証メッセージを含める場合は、お客様がすぐに問題を解決できるよう、成功状態とエラー状態をシンプルで読みやすく保ってください。