【徹底解説】Shopify アプリ「シンプル関連商品レコメンド｜よく一緒に購入されている商品」でできること

【徹底解説】Shopify アプリ「シンプル関連商品レコメンド｜よく一緒に購入されている商品」でできること

Shopify で客単価を上げたいとき、関連商品の表示はいちばん手前にある打ち手です。
いま見ている商品と一緒に使うものを並べ、まとめてカートに入れてもらう。
新しいお客様を集めるより、すでに買う気のあるお客様に 1 点足していただくほうが、
かかる手間も費用もずっと小さくて済みます。

とはいえ、実際に取りかかると別の壁にぶつかります。商品が数百点あると、設定が終わりません。
1 商品ずつ管理画面を開いて、関連商品を選んで、保存して、次の商品へ。
これを何百回も繰り返すことになり、途中で手が止まってしまいます。

当社（UnReact）が開発した シンプル関連商品レコメンド｜よく一緒に購入されている商品 は、そこを解くために作ったアプリです。
商品一覧の画面から離れずに設定でき、ある商品の設定をコピーして別の商品に貼り付けたり、
コレクション単位のルールでまとめて指定したりできます。
この記事では、管理画面の全画面とテーマ側の全設定項目を、実際の画面とあわせて一つずつ解説します。

シンプル関連商品レコメンドとは

商品ページとカートページに「よく一緒に購入されている商品」の枠を出し、
買い手がチェックを入れてまとめてカートに追加できるようにするアプリです。

このアプリの性格は、ストア側の 1 日の作業に置き換えると分かりやすくなります。

• 朝、商品一覧を開く。バッジを見れば、どの商品がまだ手つかずかがすぐ分かります
• 主力の 1 点だけ丁寧に組み合わせを決め、そのままコピーする
• 色違い・サイズ違いの行にチェックを入れて、まとめて貼り付ける
• 細かく詰めきれない残りは、コレクション単位のルールでまとめて面倒を見る
• 手つかずの商品は放っておく。そこには Shopify のおすすめ商品が出ます

作業が「1 商品ずつ画面を開いて閉じる」ではなく「一覧の上で完結する」形になっているのが、
このアプリのいちばんの特徴です。

買い手の側から見ると、関連商品にはチェックボックスが付きます。
必要なものだけ選び、合計金額を確かめてから、1 回の操作でカートに入れられます。

なお、Shopify の標準機能にも商品ページの下に「おすすめ商品」を出す仕組みはあります。
ただし、そこに並ぶ商品をストア側で指名することはできません。
「この本体にはこの替刃を出したい」という組み合わせは、標準機能では作れないということです。

シンプル関連商品レコメンドのメリット

• 設定が速く終わります。 一覧の行から直接ダイアログを開けるので、商品ページを 1 つずつ開き直す必要がありません。
• 同じ組み合わせを何度も作らずに済みます。 コピーして貼り付ければ、一度に何十件でもまとめて設定できます。
• 全商品を設定し終える前から使えます。 未設定の商品は Shopify のおすすめ商品で埋まるため、枠が空いたまま公開されることがありません。
• 買い手の手数が減ります。 商品ページから離れずに、必要なものだけ選んでまとめてカートへ入れられます。
• 顧客データを預けずに済みます。 このアプリが求める権限は商品の読み書きとテーマの読み取りだけで、顧客情報や注文情報にはアクセスしません。

シンプル関連商品レコメンドのデメリット

正直に書きます。次のような使い方をしたい場合は、このアプリだけでは足りません。

• チェックアウト画面や購入後のページには出せません。 出せるのは商品ページとカートページだけです。
• 1 商品につき設定できる関連商品は最大 10 件です。 それ以上は登録できません。
• セット割引の機能はありません。 まとめてカートに入れる導線までが担当で、価格を割り引く仕組みは持っていません。
• AI による自動バンドル生成はありません。 自動で出るのは Shopify 標準のおすすめ商品です。
• 管理画面の表示言語はブラウザごとの設定です。 別のパソコンから開いたときは選び直しになります。

逆に言えば、関連商品を自分で決めて、その設定を早く終わらせるという一点に絞ったアプリです。

料金プラン

• 月額プラン … $3.99/月
• 年額プラン … $39.90/年（月額に対して 2 か月分ぶんお得です）
• 無料体験 … インストール後 7 日間

従量課金はありません。商品点数が増えても料金は変わらない、単純な仕組みです。

インストール

インストールは Shopify の管理画面から行います。数分で終わります。

管理画面の「設定」から「アプリと販売チャネル」を開き、Shopify App Store をクリックします。
検索窓に「シンプル関連商品レコメンド」と入力して検索してください。

アプリの詳細ページが開いたら「インストール」をクリックします。
続けて権限の確認画面が出るので、内容を確認して進めてください。
アプリのページは Shopify App Store からも開けます。

アプリ管理画面の構成

管理画面は左メニューの 3 つに分かれています。

• 関連商品 … 商品ごとに関連商品を設定する画面です。ここがいちばん使います。
• コレクションルール … コレクション単位でまとめて指定する画面です。
• 設定 … テーマへの追加と、管理画面の表示言語を決める画面です。

このほかに「よくある質問」が入ることがあります。
管理画面の言語が日本語で、かつ掲載する質問が登録されているときだけ左メニューに出ます。
質問が 1 件も無いストアでは、メニューそのものが現れません。

各画面の説明

関連商品（一覧）

左メニューの「関連商品」を開くと、ストアの商品が一覧で並びます。
各行には、その商品の設定状況がバッジで表示されます。バッジは 3 種類です。

• 未設定（自動レコメンドを表示） … まだ設定していない商品です。ストアには Shopify のおすすめ商品が出ます。
• N件設定済み … 手動で N 件の関連商品を設定してあります。
• 純正の設定あり（未取り込み） … Shopify の Search & Discovery アプリ側に設定があり、このアプリにはまだ取り込んでいない状態です。

右側の「操作」列には「編集」と「コピー」が並びます。
「コピー」は関連商品が設定されている行でだけ押せます。 未設定の行では薄いままで反応しません。

商品を検索する

商品数が多いストアでは、上部の「商品名で検索」に商品名を入れて「検索」を押してください。
一覧がその商品だけに絞り込まれます。

一覧の下にはページ送りがあります。前後の矢印でページを移動できます。
商品が 1 ページに収まっているストアでは、矢印は押せない状態のまま表示されます。

関連商品を設定するダイアログ

行の「編集」を押すと「関連商品を設定」ダイアログが開きます。
上にいま編集している商品の名前が出て、その下に検索欄、さらに下に選んだ商品が並びます。

「最大10件まで設定できます」という案内が、検索欄のすぐ下に常に出ています。
並んでいる順番は、そのまま買い手の画面に出る順番になります。
間違えて入れた商品は、右端の × で外せます。

「商品を検索する」を押すと、商品を選ぶダイアログが開きます。
ここは Shopify が用意している標準の商品選択ダイアログなので、
表示言語はアプリの言語設定ではなく、Shopify 管理画面の言語に従います。
左下には「6/10 products selected」のように、いま何件選んでいるかが出ます。

設定したあとに商品を削除すると、このダイアログでは「削除された商品」と表示されます。
見つけたら × で外してください。

設定をコピーして貼り付ける

同じ組み合わせを何度も手で設定するのは大変です。次の 3 手順でまとめて設定できます。

1. コピー元の商品の行で「コピー」を押します
2. 貼り付けたい商品の左のチェックボックスを選びます
3. 上に現れる「コピーしたものを貼り付け（N件）」を押します

チェックを入れると帯に「N を選択済み」と出て、
右側の「コピーしたものを貼り付け（N件）」が押せるようになります。
コピー元を決める前は、このボタンは押せません。

保存は 25 件ずつに分けて送られます。 一度に何十件選んでも構いませんが、
件数が多いときは完了まで少し時間がかかります。
これは Shopify のメタフィールド保存 API が 1 回のリクエストで 25 件までしか受け付けないためで、
アプリ側で自動的に分割しています。

同じ帯には「純正の設定を取り込む（N件）」も現れます。
Shopify の Search & Discovery アプリで関連商品を設定している商品を選ぶと押せるようになり、
押すとこのアプリ側の設定としてコピーされます。
取り込みは読み取りだけで、純正アプリ側の設定は書き換えません。
取り込んだあとは、このアプリの設定として自由に編集できます。

コレクションルール（一覧）

左メニューの「コレクションルール」を開くと、登録済みのルールが並びます。
各行には「対象コレクション名」と、その下に「から出す：元コレクション名 ・ 商品の選び方」が表示されます。
右側には「編集」と「削除」があります。

ルールを追加する

右上の「ルールを追加」を押すとダイアログが開きます。設定する項目は 3 つです。

• 対象コレクション … ルールを適用する商品が属するコレクションです。「このコレクションの商品ページに適用します」という説明が添えられています。
• 出す商品の元コレクション … 関連商品として出す商品を、このコレクションから取ります。
• 商品の選び方 … 「先頭から」か「ばらつかせる」を選びます。初期値は「先頭から」です。

対象コレクションと元コレクションの両方を選ぶまで、「保存」は押せません。

「コレクションを選択」を押すと、Shopify 標準のコレクション選択ダイアログが開きます。
各コレクションの右側には、そこに入っている商品数が出ます。
左下に「0/1 collections selected」と出るとおり、ここで選べるのは 1 つだけです。

選んだあとは、ボタンの右側にコレクション名が表示されます。
一覧の「編集」から開き直すと、同じダイアログに現在の設定が入った状態で開きます。

「先頭から」は、元コレクションの並び順の先頭から順に出します。どの商品ページでも同じ顔ぶれになります。
「ばらつかせる」は商品ごとに違う組み合わせを出すので、回遊してもらいたいときに向いています。

出す商品の優先順位は、手動で設定した関連商品、コレクションルール、Shopify のおすすめ商品の順です。
ルールを作ったのに反映されない場合は、その商品に手動設定が残っていないかを確認してください。

設定（テーマへの追加）

左メニューの「設定」には、テーマへの追加と表示言語の設定があります。

「テーマに関連商品を追加」では、「テーマを選択」で対象のテーマを選びます。
公開中のテーマには「（公開中のテーマ）」と付きます。

• テーマに追加 … 新しいタブでテーマエディタが開き、商品ページにブロックが追加された状態になります。
• テーマをプレビュー … そのテーマのプレビューが新しいタブで開きます。

画面には「カートページにも追加する」という案内も出ています。
「テーマに追加」で追加されるのは商品ページだけなので、
カートページに出したいときはテーマエディタでカートページを開き、
セクションから「関連商品」を手動で追加してください。

テーマのバージョンによっては、テーマの選択欄が空になることがあります。
その場合もテーマエディタから手動でセクションを追加すれば同じように使えます。

設定（言語設定とおすすめアプリ）

「言語設定」の「言語を選択」で管理画面の表示言語を選び、「変更する」を押すと切り替わります。
アプリは 20 言語に対応しています。

この設定はお使いのブラウザに保存されます。 サーバー側には持っていないため、
別のパソコンや別のブラウザから開いたときは選び直しになります。

その下には「おすすめアプリ」として当社の他のアプリが並びます。
右上の × で閉じられます。機能画面ではなく設定画面に置いてあるので、
日々の作業の邪魔にはなりません。

テーマへの追加

インストールしただけでは、ストアに関連商品の枠は出ません。テーマに追加するところまでやって、はじめて買い手の画面に出ます。

1. アプリの「設定」を開き、「テーマを選択」で追加先のテーマを選びます
2. 「テーマに追加」を押すと、新しいタブでテーマエディタが開きます
3. テーマエディタの右上にある「保存」を押します

3 の保存を押さないと、ストアには反映されません。 ここで止まってしまう方が多いところです。
保存したら、ストアの商品ページを開いて枠が出ていることを確認してください。

この時点で関連商品を 1 つも設定していなくても、Shopify のおすすめ商品が自動で表示されます。

ストアフロントの見た目を変える

買い手に見える部分の設定は、テーマエディタで行います。
テーマエディタを開き、商品ページの「関連商品」ブロックをクリックすると、左側に設定パネルが開きます。

設定できるのは次の 11 項目です。

文言に関する設定

• 見出し（初期値: よく一緒に購入されている商品）… 枠の上に出る見出しの文言です。
• ボタンの文言（初期値: 選択した商品をまとめてカートに追加）… まとめて追加するボタンに出る文言です。

この 2 つの初期値は、ストアの言語によって変わります。
日本語のストアでブロックを追加すると日本語が入り、英語のストアで追加すると英語が入ります。
英語で入ってしまった場合は、ブロックを追加したときのストアの言語が英語だったということなので、
この欄を書き換えてください。

並べ方に関する設定

• 表示件数（初期値: 4）… 関連商品を何件まで出すかです。1 件から 10 件まで指定できます。
• カラム数（初期値: 4）… 横に何列で並べるかです。2 列から 5 列まで指定できます。
• 画像の比率（初期値: 正方形）… 「正方形」か「縦長」を選べます。

1 商品につき設定できる関連商品が最大 10 件なので、表示件数を 10 にしておけば設定した分は全部出ます。
カラム数は、商品画像を大きく見せたいなら 2 列から 3 列、たくさん並べたいなら 4 列から 5 列が目安です。

表示する情報の設定

• 価格を表示（初期値: オン）… 商品名の下に価格を出すかどうかです。
• ブランドを表示（初期値: オフ）… 商品のベンダー名を出すかどうかです。ブランドを前面に出したいストアだけオンにしてください。
• まとめてカートに追加を表示（初期値: オン）… チェックボックスとボタンを出すかどうかです。オフにすると、単なる関連商品の一覧になります。
• 合計金額を表示（初期値: オン）… 選んだ商品の合計金額を出すかどうかです。

カートへの追加に関する設定

• この商品も一緒にカートに入れる（初期値: オン）… いま見ている商品も一緒にカートへ入れるかどうかです。
• カートに追加した後の動作（初期値: カートページへ移動する）… 追加したあとの動きを「カートページへ移動する」「ページを再読み込みする」「何もしない」から選びます。

「この商品も一緒にカートに入れる」をオンにすると、いま見ている商品がカードの先頭に並びます。
この商品のチェックだけは外せません。 外せてしまうと「まとめ買い」にならないためで、
設定パネルにも「Its checkbox can't be unchecked. Product pages only.」と注記が出ています。
なお、この設定が効くのは商品ページだけで、カートページでは動きません。

「カートに追加した後の動作」は、初期値のまま「カートページへ移動する」にしておくのが安全です。
多くのテーマは、アプリからカートに入れてもヘッダーの数量表示を更新しません。
「何もしない」を選ぶと、カートに入ったのに画面上は何も変わらないように見えてしまいます。
設定パネルにもその旨の注記が出ています。

買い手にはこう見えます

買い手の画面では、商品ごとにチェックボックスが出ます。
チェックを外すと、合計金額がその場で計算し直されます。
上の画面では 1 件外したことで、合計が $2,379.85 から $1,429.90 に変わっています。

バリエーションのある商品では、カードの中にバリエーションを選ぶ欄が出ます。
選び直すと、その価格で合計が計算し直されます。

「選択した商品をまとめてカートに追加」を押すと、選んだ商品がまとめてカートに入ります。
上の画面では 5 点が入り、カートの見積もり合計が $3,759.75 と、
商品ページで表示されていた合計とぴったり一致しています。

スマートフォンでは列が自動的に折り返され、合計金額とボタンはその下に置かれます。
カラム数の設定はパソコン向けの指定で、狭い画面では読める幅に収まるよう調整されます。

コレクションルールが効いているとき

手動設定をしていない商品でも、コレクションルールの対象になっていればその商品が並びます。
上の画面は「Automated Collection の商品ページには Hydrogen コレクションから出す」というルールが効いている状態です。
買い手から見ると、手動で設定した商品ページとまったく同じ見た目になります。

コードで自作する場合

アプリを使わずに、テーマのコードだけで同じことをどこまでできるのかも見ておきましょう。
結論から言うと、「枠を出す」ところまでは自作できますが、「関連商品を自分で決める」ところから急に大変になります。

Shopify 標準のおすすめ商品を出す

Shopify は商品ごとのおすすめ商品を返す仕組みを持っています。
セクションファイルを 1 つ作り、次のように書けば枠は出ます。

{% comment %} sections/my-related-products.liquid {% endcomment %}
<div
  class="my-related"
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4"
>
  {% if recommendations.performed and recommendations.products_count > 0 %}
    <h2>よく一緒に購入されている商品</h2>
    <ul>
      {% for item in recommendations.products %}
        <li>
          <a href="{{ item.url }}">
            <img src="{{ item.featured_image | image_url: width: 300 }}" alt="{{ item.title }}">
            {{ item.title }} — {{ item.price | money }}
          </a>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

data-url に入れた URL を JavaScript で読み込み、返ってきた HTML でこの枠を差し替えます。
おすすめ商品は商品ページの描画とは別に取得する仕組みなので、この二段構えが必要になります。

// assets/my-related.js
document.querySelectorAll(".my-related").forEach(async (el) => {
  const res = await fetch(el.dataset.url);
  const html = await res.text();
  const parsed = new DOMParser().parseFromString(html, "text/html");
  const next = parsed.querySelector(".my-related");
  if (next) el.innerHTML = next.innerHTML;
});

ここまでで「Shopify が選んだおすすめ商品を並べる」ことはできます。
ただし、中身を自分で決めることはできません。
さらに、recommendations.products は在庫切れ・価格 0 円・ギフトカード・カート内の商品を返さないため、
商品によっては枠が空のままになります。

まとめてカートに追加する

チェックした商品をまとめてカートに入れる部分は、カート API を 1 回叩けば実現できます。

const addSelected = async (variantIds) => {
  const res = await fetch("/cart/add.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items: variantIds.map((id) => ({ id, quantity: 1 })) }),
  });
  if (!res.ok) {
    // 422 のときは Shopify が英語の文言を返します。自分で訳し直す必要があります
    const err = await res.json();
    console.error(err.description);
    return;
  }
  window.location.href = "/cart";
};

短く書けますが、実際に運用すると次のところで手が止まります。

• 在庫切れの商品が混ざったときの挙動が決まっていません。 一部だけ入って成功したように見えることがあります。
• エラーの文言は英語で返ってきます。 日本語のストアでは自分で訳し直すことになります。
• ヘッダーのカート数量はテーマが自分で更新する責任を持っています。 入れただけでは数字が変わりません。

関連商品を自分で決める

いちばん手間がかかるのがここです。商品ごとに「どの商品を出すか」を保存する場所が要るので、
メタフィールドを使うことになります。

{% comment %} 商品メタフィールドに入れた商品を読み出す {% endcomment %}
{% assign picks = product.metafields.custom.related_products.value %}
{% for item in picks %}
  <a href="{{ item.url }}">{{ item.title }} — {{ item.price | money }}</a>
{% endfor %}

読み出すだけならこれで済みます。問題は書き込む側です。

• メタフィールド定義を作り、商品ごとに管理画面から値を入れていくことになります。
• 数百商品ぶんを手で入れるのは現実的ではないので、結局は一括で書き込むスクリプトを書くことになります。
• 書き込みに使う metafieldsSet は、1 リクエストにつき 25 件までしか受け付けません。 分割して送る処理が要ります。
• メタフィールドを直接読むと、在庫切れや販売終了の商品を除外する仕組みが働きません。 リンク切れの商品が並ばないよう、自分で弾く必要があります。
• 商品が削除されたときに、参照だけが残ります。表示側で拾って除外する処理も要ります。

つまり、枠を出すだけなら半日で作れますが、運用に耐える形にすると話が変わります。
設定するための管理画面、一括で入れる仕組み、25 件ごとの分割、除外の判定、削除された商品の後始末。
このアプリが引き受けているのは、まさにこの部分です。

純正アプリや他のレコメンドアプリと併用するときの設定

関連商品まわりのアプリは、すでに何か入っていることが少なくありません。
ここでは、よく一緒に検討される次のアプリと並べて使うときに、
どこで表示がぶつかり、どう設定すれば整理できるかを書きます。

• Shopify 純正の Search & Discovery
• Frequently Bought Together
• Tipo Related Products, Upsell
• Wiser ‑ アップセルとクロスセル
• Upsell & Cross Sell — Selleasy

Shopify 純正の Search & Discovery と併用する

純正アプリで関連商品を設定済みのストアでは、設定をやり直す必要はありません。
一覧に「純正の設定あり（未取り込み）」のバッジが出た商品を選び、
「純正の設定を取り込む（N件）」を押せば、このアプリの設定としてコピーされます。

取り込みは読み取りだけなので、純正アプリ側の設定はそのまま残ります。
しばらく両方を並べて様子を見たい、という進め方もできます。

ただし表示は別々に出ます。純正アプリはテーマの「おすすめ商品」セクションを使うため、
こちらのブロックと 2 つ並ぶことになります。整理するなら次のどちらかです。

• テーマエディタで、テーマ側の「おすすめ商品」セクションを非表示にする
• このアプリのブロックを、テーマ側のおすすめ商品セクションの上に置く

どちらを選ぶかは、「まとめ買いを促したいのか、回遊を増やしたいのか」で決めてください。
まとめ買いが目的なら、上に置いて先に目に入るようにするのが素直です。

レコメンドアプリと併用する

Frequently Bought Together、Tipo、Wiser、Selleasy のようなアプリと併用する場合、
同じ商品ページに似た枠が 2 つ出ることが問題になります。
どちらもテーマにブロックやセクションを追加する方式なので、片方を消さない限り両方出ます。

落ち着いて整理するには、役割で場所を分けるのがいちばん簡単です。

• 商品ページの上側 … このアプリのブロック（意図して選んだ組み合わせ）
• 商品ページの下側 … 併用するアプリの枠（自動で選ばれたおすすめ）
• カートページ … どちらか一方だけ

このアプリのブロックはテーマエディタで自由に位置を動かせるので、
併用するアプリを入れた後で順番を決め直しても手戻りになりません。

カートページは特に重なりやすい場所です。
このアプリは「テーマに追加」で商品ページにしか追加しないので、
カートページに何も置かなければ、そこは併用アプリに任せられます。
逆に、カートページもこちらで持ちたいときは、
テーマエディタでカートページを開いてセクションから「関連商品」を追加してください。

どちらを先に入れるか

先にこのアプリを入れて、手動設定とコレクションルールを済ませてしまうのがおすすめです。
理由は、一覧のバッジで「どの商品を設定済みか」が一目で分かるからです。
先に自動レコメンド系のアプリを入れてしまうと、
画面に出ている商品が「自分で決めたもの」なのか「自動で選ばれたもの」なのかが分からなくなり、
どこまで手を入れたかを追えなくなります。

設定を終えてから併用アプリを足せば、
「意図して選んだ枠」と「自動で選ばれた枠」がはっきり分かれた状態で運用を始められます。

まとめ

関連商品の表示は、ほとんどのストアで「やったほうがいいと分かっているのに、手が回らない」まま止まります。
止まる理由は機能の不足ではなく、商品 1 点ずつの設定作業が終わらないことです。

シンプル関連商品レコメンド｜よく一緒に購入されている商品 は、そこだけを解くために作りました。

• 商品一覧から離れずに設定できるので、1 商品あたりの手数が減ります
• コピーして貼り付ければ、似た商品はまとめて終わります
• コレクションルールを作れば、商品を入れ替えても設定し直す必要がありません
• 設定していない商品は Shopify のおすすめ商品で埋まるので、途中の状態でも公開できます

買い手の側では、チェックを入れて合計を見ながら、ワンクリックでまとめてカートに入れられます。
セットで使うものを扱っているストアほど、この導線が効きます。

設定手順をもっと詳しく知りたい方は、Shopifyで関連商品を一覧からまとめて設定してセット販売できるアプリについて徹底解説｜ご利用ガイド もあわせてご覧ください。
アプリは Shopify App Store からインストールできます。
7 日間の無料体験が付くので、まずは主力商品だけ設定して、効き目を確かめてみてください。

おすすめ Shopify アプリ

当社では、ストア運営の手間を減らすアプリを他にも公開しています。

• シンプルタブ型画像スライドショー｜商品説明タブ切り替え … 商品説明をタブで切り替えて見せられるアプリです。説明が長い商品ページを整理できます。
• UR: Newsletter Signup Popup … メール登録のポップアップをストアに追加できるアプリです。コード不要で設置できます。
• UR: Multi Image Slider | Carousel … 複数の画像をスライドショーとして並べられるアプリです。

いずれもアプリの「設定」画面からご覧いただけます。