関連商品セクションを追加する

自動生成された関連商品のリストや、Shopify Search & Discoveryアプリを使用して手動で設定した関連商品のリストを表示するセクションを、商品ページに追加できます。アプリで関連商品をカスタマイズする方法については、こちらをご覧ください。

関連商品をお客様に表示すると、お客様が新商品を見つけやすくなり、オンラインストアの売上の増加につながります。

関連商品セクションの見出しとレイアウトは、使用するテーマによって決まります。

関連商品について理解する

関連商品は、一般的にまとめて購入される商品、類似している商品説明が記載されている商品、あるいは関連するコレクションに含まれる商品などに基づいています。参照できる注文情報および商品情報が増えるにつれて、関連商品の精度も向上します。

メモ

Shopify POSを使用して実店舗で販売している場合、関連商品をおすすめ商品のタイルとしてスマートグリッドに追加したり、カートにおすすめ商品を表示したりすることができます。

関連商品に使用されるデータについて詳しくは、Shopifyテーマの開発ドキュメントをご覧ください。

関連商品の外観をカスタマイズする

関連商品は、_Online Store 2.0のテーマ_の商品ページに表示される1つのセクションです。Online Store 2.0と互換性がないテーマを使用している場合は、テーマをアップグレードする必要があります。関連商品は、商品名、価格、販売元、簡単な説明などを表示したり、商品ページからそれらを非表示にしたりするためにカスタマイズすることが可能です。商品ページに一度に表示できる関連商品セクションは1つだけです。

メモ

画面の幅が1600ピクセルより大きい場合、カスタマイズと編集のオプションは画面の右側に表示されます。画面が1600ピクセルより小さい場合、それらのオプションは左側に表示されます。

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

3. [商品] > [デフォルトの商品] を選択して、テーマエディタのテンプレートを読み込みます。

4. 以下のいずれかの操作を行います。

   • 商品ページに関連商品セクションがある場合、[関連商品] をクリックします。
   • 商品ページに関連商品セクションがない場合、[+ セクションを追加] をクリックし、[関連商品] を選択します。

5. [保存] をクリックします。

iPhone

1. Shopifyアプリから、 ボタンをタップします。

2. 販売チャネルセクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

5. [テンプレート] をタップします。

6. [商品] > [デフォルトの商品] を選択して、テーマエディタのテンプレートを読み込みます。

7. 以下のいずれかの操作を行います。

   • 商品ページに関連商品セクションがある場合、[関連商品] をタップします。
   • 商品ページに関連商品セクションがない場合、[+ セクションを追加] をタップして、[関連商品] を選択します。

8. [保存] をタップします。

Android

1. Shopifyアプリから、 ボタンをタップします。

2. 販売チャネルセクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

5. [テンプレート] をタップします。

6. [商品] > [デフォルトの商品] を選択して、テーマエディタのテンプレートを読み込みます。

7. 以下のいずれかの操作を行います。

   • 商品ページに関連商品セクションがある場合、[関連商品] をタップします。
   • 商品ページに関連商品セクションがない場合、[+ セクションを追加] をタップして、[関連商品] を選択します。

8. [✓] をタップします。

目の記号をクリックすると、関連商品を無効にできます。関連商品を無効にすると、そのセクションは商品リストで非表示になりますが、削除されるわけではありません。

関連商品の設定

お客様への関連商品の表示方法は、カスタマイズすることができます。関連商品は、よく一緒に購入される商品、類似している商品説明が記載されている商品、または関連するコレクションに含まれる商品に基づいて自動的に生成されます。参照できる注文情報および商品情報が増えるにつれて、時間の経過とともにおすすめ商品の精度も向上します。

関連商品セクションを設定する

設定	説明
見出し	セクションのタイトル。
カラースキーム	関連商品セクションの背景色。[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択します。
画像比	おすすめ商品の画像には次の画像比があります。 画像に合わせる (デフォルト) - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。 縦長 - 画像を2:3の比率で使用できるようにトリミングします。 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
画像の形状	商品画像の形状を次から1つ選択します。 デフォルト - 商品画像を長方形に変更します。 アーチ ‐ 商品画像の上部に丸みを持たせます。 ブロブ ‐ 商品画像を6つの不揃いな形状 (ブロブ) の1つに変更します。マウスオーバーするとユニークなアニメーションが表示されます。 左向き山形印 - 商品画像を左側に尖りがある山形に変更します。 右向き山形印 - 商品画像を右側に尖りがある山形に変更します。 ひし形 - 商品画像をひし形に変更します。 平行四辺形 - 商品画像を向かい合う2辺が平行な平行四辺形に変更します。 丸形 - 商品画像を円形または楕円形に変更します。マウスオーバーするとユニークなアニメーションが表示されます。
マウスオーバー時に2番目の画像を表示する	お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
販売元を表示する	商品の販売元を表示します。
商品の評価を表示	商品の平均評価を星印と括弧内のレビュー数で表示します。例：★★★★★ (8)。また、商品レビューアプリが必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに対して必要です。
セクションの余白	関連商品セクションの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、セクションの上か下に追加します。