関連アドオン商品

柔軟なレイアウトとクロスセル向けのカードスタイルで、関連アドオン商品を表示します。

注目のリンク

役立つ動画

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

関連アドオン商品を現在の商品と並べて表示し、より大きな注文を促します。このブロックは補完商品設定を使用して関連アイテムを表示し、利用不可の商品とカートにすでに入っている商品を自動的に非表示にします。テーマでブロックがどのように配置されるかについては、セクションとブロックに関するShopifyドキュメントをご覧ください。

このブロックは、Search & Discovery アプリで補完商品データが設定されていることに依存します。何も表示されない場合は、表示中の商品に関連商品が割り当てられているか確認してください。

基本設定

アイテム数を使用して、一度に表示する選択肢の数を制御します。数を 0 に設定すると、最大 50 件までの利用可能な一致商品がすべて返されます。幅広いカタログには適していますが、商品カードに多くの詳細が表示される場合は窮屈に感じることがあります。

このブロックを素早いアドオン提案として機能させたい場合は、一覧をより絞り込んでください。少ない件数のほうが通常は見やすく、より意図が伝わりやすくなります。

レイアウト設定

これらの設定では、デスクトップ、タブレット、モバイルで推奨商品をどのように配置するかを制御します。より多くの商品を一度に表示したい場合はグリッドを、よりコンパクトで焦点を絞った表示にしたい場合はスライドショーを使用します。

列数の選択は、グリッドと複数カードのスライドショーで特に重要です。タブレットでは、列数を 0 に設定するとデスクトップの値が再利用されます。デバイスごとの調整を少なくしたい場合に便利です。

列数が多いほど、よりシンプルなカードに適しています。カードに追加テキスト、ボタン、またはバリアントセレクターが含まれる場合は、列数を少なくしたほうが通常は見やすくなります。

スライドショー設定

スライドショーレイアウトを使用する場合、これらの設定でブロックの動き方とお客様との操作方法を調整します。アニメーションのスタイルと速度、自動再生、ループ、ナビゲーション位置、ページネーション、スライドのプレビューを制御できます。これらのコントロールの詳細は、スライドショーのコントロール設定をご覧ください。

フェードは、1 つずつおすすめ商品を強調したい場合に最適です。単一スライドのレイアウトになり、複数のスライド表示に依存するプレビュー風の動作とページネーションスタイルは無効になります。

自動再生を有効にする場合は、動きを穏やかにし、簡単に中断できるようにしてください。ホバーで一時停止を使うと、デスクトップで自動再生がより控えめに感じられます。

ヘッダー設定

オプションのヘッダーは、これらの商品がなぜ一緒に表示されるのかを説明し、ページ上でブロックにより多くの構造を与えます。短い見出し、キャプション、またはサブ見出しを追加すると、推奨商品が自動表示ではなく厳選されたもののように感じられます。

アイコンとボタンを追加して、お客様をより広いコレクション、バンドルページ、または購入ガイドへ誘導することもできます。ボタンのテキストは具体的にし、推奨商品の妨げにならず、補完する内容にしてください。

見出しタイプは、ページ全体の見出し階層に合わせて選びます。ページにすでに強いメイン見出しがある場合は、より低い見出しレベルのほうが通常は適しています。詳しくは、ヘッダー設定と icons をご覧ください。

標準ブロック設定

カード設定

これらの共有設定では、このブロックに対して通常の商品カード表示を上書きできます。アドオン商品の推奨により合うよう、カードスタイル、画像比率、テキスト密度、CTA の扱い、テキスト配置、バリアントセレクターの動作を調整できます。

複数の商品を一度に表示する場合は、よりシンプルなカードスタイルが通常最適です。バリアントセレクターを有効にする場合は、ブロックを煩雑にしないよう、購入判断に本当に役立つか確認してください。バリアントセレクターの設定については product variants を、より広いカード動作については商品カード設定をご覧ください。

カードカラー設定

これらの設定は、このブロック内のカード表示だけを上書きします。補完商品を、テーマ全体の見た目を変更せずに他の商品一覧から目立たせたい場合に便利です。

バナーオーバーレイのコントロールは、Banner カードスタイルを使用する場合にのみ適用されます。それ以外の場合は、価格、タイトル、操作を読みやすく保てる背景、枠線、見出し、テキストの色に注目してください。詳しくはカード設定をご覧ください。

カラー設定

これらの設定は、ヘッダー内容の周囲にあるブロックレベルのアイコンとテキストの色を制御します。見出しエリアをカスタム背景やキャンペーンスタイルに合わせたい場合に特に便利です。

ブロックを色付き、画像、または動画の背景に置く場合は、見出しと補足テキストが読みやすいようにコントラストを慎重に確認してください。詳しくはカラー設定をご覧ください。

余白設定

余白は、ブロック内容の上下のスペースを制御します。推奨商品により余裕を持たせたい場合は増やし、近くの商品詳細と強く結びつけて見せたい場合は減らしてください。

背景や区切り線も使う場合は、余白の変更がより目立ちます。詳しくはセクションの余白設定をご覧ください。

ブロック背景設定

これらの設定では、ブロック全体の背後に色、グラデーション、画像、または動画を追加します。推奨エリアを強調するのに役立ちますが、商品カードにすでに多くの詳細がある場合は、背景が強いとレイアウトが重く感じられることもあります。

オーバーレイのコントロールは、画像や動画の背景でテキストの読みやすさを保つのに役立ちます。モバイル向けの背景メディアは、デスクトップ用のアートワークが小さな画面でうまく切り抜かれない場合に便利です。詳しくはセクション背景設定と using video をご覧ください。

区切り線設定

区切り線は、上部または下部に線を追加して、このブロックを近くのコンテンツから視覚的に分けます。ページに複数の積み重なったコンテンツ領域があり、少し構造を追加したい場合に適しています。

間隔や背景のコントラストですでにブロックが十分に分かれている場合は、不要かもしれません。詳しくは区切り線設定をご覧ください。

表示設定

表示コントロールを使うと、このブロックをデスクトップまたはモバイルで非表示にできます。小さな画面では別の推奨戦略やレイアウトを使いたい場合に便利です。

一方のデバイス範囲でブロックを非表示にする場合は、関連商品がページ内の別の場所でも見つけやすいことを確認してください。詳しくは表示設定をご覧ください。

エディター設定

エディターのタイトルは、エディターのサイドバーでこのブロックがどのようにラベル表示されるかだけを変更します。複数のおすすめ商品タイプのブロックを使う場合は、編集時に区別しやすいよう名前を変更してください。関連するカスタマイズオプションについては、セクションのカスタマイズに関するShopifyドキュメントをご覧ください。

使用上の注意

まず関連付けを設定します。 ブロックが空に見える場合は、現在の商品に補完商品が割り当てられていることを確認してください。
一覧は絞り込みます。 アイテム数が少ないほうが、通常はより強い推奨エリアになり、判断もしやすくなります。
レイアウトをカードの密度に合わせます。 カードに追加テキスト、ボタン、またはバリアントセレクターが含まれる場合は、列数を少なくするか、よりシンプルなカードスタイルを使用してください。
動きは慎重に使います。 自動再生、フェード、プレビューの設定は、商品ページの妨げではなく、閲覧を補助するようにしてください。
両方の表示領域サイズでテストします。 デスクトップとモバイルを確認し、各レイアウトでコントロール、余白、メディアの選択が明確に感じられるか確認してください。
異なる商品状態を想定します。 対象商品のみ、有効でない商品、すでにカートに入っている商品でブロックを確認し、実際の出力を判断してください。

Align v2.0