関連商品セクションを追加する
自動生成された関連商品のリストや、Shopify Search & Discoveryアプリを使用して手動で設定した関連商品のリストを表示するセクションを、商品ページに追加できます。アプリで関連商品をカスタマイズする方法については、こちらをご覧ください。
関連商品をお客様に表示すると、お客様が新商品を見つけやすくなり、オンラインストアの売上の増加につながります。
関連商品セクションの見出しとレイアウトは、使用するテーマによって決まります。
関連商品について理解する
関連商品は、一般的にまとめて購入される商品、類似している商品説明が記載されている商品、あるいは関連するコレクションに含まれる商品などに基づいています。参照できる注文情報および商品情報が増えるにつれて、関連商品の精度も向上します。
関連商品に使用されるデータについて詳しくは、Shopifyテーマの開発ドキュメントをご覧ください。
関連商品の外観をカスタマイズする
関連商品は、Online Store 2.0のテーマの商品ページに表示される1つのセクションです。Online Store 2.0と互換性がないテーマを使用している場合は、テーマをアップグレードする必要があります。商品名、価格、販売元、または簡単な説明を含めるなど関連商品の表示方法をカスタマイズしたり、商品ページから非表示にしたりすることができます。商品ページに一度に表示できる関連商品セクションは1つだけです。
手順:
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- ページ上部のドロップダウンメニューを開きます。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [テンプレート] をタップします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [テンプレート] をタップします。
- [商品] > [デフォルトの商品] を選択して、テーマエディタのテンプレートを読み込みます。
-
以下のいずれかの操作を行います。
- 商品ページに関連商品セクションがある場合、[関連商品] をクリックします。
- 商品ページに関連商品セクションがない場合、[+ セクションを追加] をクリックし、[関連商品] を選択します。
[保存] をクリックします。
目の記号をクリックすると、関連商品を無効にできます。関連商品を無効にすると、そのセクションは商品リストで非表示になりますが、削除されるわけではありません。
関連商品の設定
お客様への関連商品の表示方法をカスタマイズできます。関連商品は、よく一緒に購入される商品、類似している商品説明が記載されている商品、または関連するコレクションに含まれる商品に基づいて自動的に生成されます。参照できる注文情報および商品情報が増えるにつれて、時間の経過とともにおすすめ商品の精度も向上します。
| 設定 | 説明 |
|---|---|
| 見出し | セクションのタイトル。 |
| カラースキーム | 関連商品セクションの背景色。[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択します。 |
| 画像比 | 商品カード画像のアスペクト比を設定します。[画像に合わせる] (デフォルト)、[ポートレート]、[正方形] から選択します。 |
| マウスオーバー時に2番目の画像を表示する | お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。 |
| 販売元を表示する | 商品の販売元を表示します。 |
| 商品の評価を表示 | 商品の平均評価を星印と括弧内のレビュー数で表示します。例：★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義もreviews.rating_countとreviews.ratingに必要です。 |
| セクションの余白 | 関連商品セクションの上部または下部にスペースを追加します。範囲スライダーを使用してスペースを0ピクセルから100ピクセルの間で設定し、セクションの上か下に追加します。 |