Shopify で商品比較テーブルを設置する方法を徹底解説！スペック比較で購入率アップ

はじめに
記事の構成
Shopify で商品比較・スペック比較を表示できる？
商品比較・スペック比較を表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル商品仕様比較｜お手軽スペック比較テーブル」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加（1 クリック追加）
- 手動でテーマに追加
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

商品ページを訪れたお客様が「他の商品とどう違うのか？」と迷ったままで離脱してしまう ── これは EC 運営でよく見られるロスのひとつです。とくに高単価商品や、複数の選択肢から「自分にあった一品」を選びたい商品ジャンル（家電・PC 周辺機器・アウトドア用品・コスメ・化粧品・健康食品など）では、商品比較・スペック比較・仕様比較 ができる仕組みがあるかどうかで、購入率が大きく変わってきます。

この記事では、Shopify ストアに商品ページから呼び出せる 比較テーブル を設置する方法と、運用のコツを徹底的に解説します。日本製のおすすめアプリ「シンプル商品仕様比較｜お手軽スペック比較テーブル」の具体的な使い方も画像付きで紹介していきますので、ぜひ最後まで参考にしてください。

この記事は以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

Shopify で商品比較テーブルが設置できるかどうかの結論
商品比較テーブルを表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル商品仕様比較｜お手軽スペック比較テーブル」の紹介
アプリのインストール・設定手順を画像付きで解説
カスタマイズ設定の使い分けとおすすめ設定例
関連施策との組み合わせ方
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify で商品比較・スペック比較を表示できる？

結論から言うと、Shopify の標準機能だけでは、商品の仕様を横並びで比較できる比較テーブルを商品ページに表示することはできません。 商品ページには商品説明・バリエーション・画像ギャラリーなどを配置できますが、「他の商品と並べて見せる」機能はないのです。

実現方法は大きく分けて 2 つあります。

テーマのコード編集で実装する方法：Liquid・CSS・JavaScript を直接編集し、メタフィールドに登録した仕様データを商品ページに横並びで表示する
アプリを導入して実装する方法：商品比較カテゴリーの Shopify アプリをインストールし、ノーコードで比較テーブルを設置する

それぞれにメリット・デメリットがありますが、運用効率と機能の充実度を考えると、ほとんどの場合は アプリを使うのがおすすめ です。記事の後半でテーマ編集のサンプルコードも紹介するので、両方の選択肢を比較したうえで判断してください。

商品比較・スペック比較を表示するメリット・デメリット

メリット

お客様の意思決定を後押しできる

複数商品の仕様を一度に見比べられるため、お客様が迷ったときに「どれを買えばいいか」をその場で判断できます。離脱率の低下と購入率の向上に直結する施策です。

価格・サイズ・素材などのスペックを並べて見せられる
どの商品が自分のニーズに合うか、お客様自身で納得感を持って選べる
カート投入率・購入完了率の向上が期待できる

問い合わせ対応の負担が減る

「この商品とあちらの商品はどう違うのか？」という質問は EC ストアによく寄せられます。商品ページに比較テーブルがあれば、お客様自身で違いを把握でき、ストア運営者の対応負担を大きく減らせます。

同じ質問への回答コストが減る
営業時間外でもお客様が自己解決できる
メールや LINE 対応のリソースを別の業務に振り分けられる

クロスセル・アップセル効果が期待できる

比較テーブルに上位モデルや関連商品を並べることで、「もう少し良いモデルにしてみよう」という選択を促し、客単価アップにつながります。

上位モデルとの差分を可視化できる
廉価モデルの存在を見せて「価格でも選びやすい」状態にできる
まとめ買いやセット購入のきっかけにもなる

ストアの専門性をアピールできる

仕様情報が整理された比較テーブルは、ストアが商品知識を持っていることを示します。お客様の信頼を獲得しやすくなり、リピーター獲得にもつながります。

返品率の低下にも貢献する

仕様や着用イメージを事前に把握できることで、購入後の「思っていたのと違う」を減らせます。とくに家電・家具・アウトドア用品など、買って試すしかなかった商品ジャンルで効果が大きい施策です。

デメリット

比較項目の登録に手間がかかる

商品ごとに項目名と値を登録する必要があります。商品数が多いストアでは初期登録が大きな作業になることも。ただし、よく使う項目セットを プリセット化 できるアプリを使えば、運用コストは大幅に下げられます。

項目を増やしすぎると逆効果になる

比較項目が多すぎると、お客様にとって情報過多になり、かえって決め手を失わせることがあります。本当に重要な項目を絞り込んで提示することが大切です。

情報の正確性が常に問われる

比較テーブルの数値や仕様情報は、商品の販促物としての役割を果たします。誤った情報を載せたまま運用すると信頼を失うリスクがあります。商品リニューアルのタイミングで必ず更新する運用ルールを整えましょう。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット：

細部まで自由に作り込める
月額料金が発生しない（テーマ開発費は別途）
既存のテーマと完全に統合できる

デメリット：

開発コストが高く、初期費用が大きい
仕様変更や機能追加のたびに開発リソースが必要
モバイル対応・アクセシビリティ・複数商品切替などを自前で実装する必要がある
メタフィールド設計や Liquid テンプレートの知識が必須

アプリを導入する方法

メリット：

ノーコードで導入でき、即日運用開始できる
ボタン・モーダル・テーブルのカスタマイズが GUI で完結
商品ごとの比較項目登録、プリセット、コレクション連携などの機能がすぐ使える
アプリ側で機能アップデートが続く

デメリット：

月額料金が発生する（とはいえ多くは数百円〜数千円程度）
アプリの仕様の範囲内でカスタマイズが制限される

結論：最初はアプリで小さく試すのがおすすめ

「シンプル商品仕様比較｜お手軽スペック比較テーブル」のように、月額 $3.99 で 7 日間の無料体験が用意されているアプリなら、リスクなく効果検証ができます。本格的に商品比較を運用に組み込む段階になったら、必要に応じてテーマ編集と組み合わせるのも良い選択肢です。

アプリのインストール手順

ステップバイステップで手順を解説します。インストールから 7 日間は無料お試しいただけるので、まずは気軽に試してみましょう。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリ」をクリックし、「Shopify App Store」へ移動します。
検索窓に「シンプル商品仕様比較」と入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

アプリをテーマに追加（有効化）

商品ページに「比較する」ボタンを設置するには、テーマに比較ブロックを追加します。自動追加と手動追加の 2 通りがあります。

自動でテーマに追加（1 クリック追加）

もっともかんたんに追加できる方法です。アプリの管理画面から、ワンクリックでテーマに比較ボタンをセットできます。

アプリの管理画面を開きます。
追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加

自動追加がうまくいかない場合は、テーマエディタから手動で追加する方法もあります。

Shopify 管理画面で「オンラインストア」→「テーマを編集する」を開きます。
テーマエディタ上部のプルダウンから、商品ページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。「アプリ」タブからアプリブロックを選んで追加します。表示を確認し、問題なければ「保存する」をクリックします。

アプリの設定項目を理解する

商品ページに追加した比較ブロックは、テーマエディタから細かくカスタマイズできます。設定はグループごとに分かれているので、調整したい箇所からお試しください。

比較候補の設定

モーダル内のドロップダウンに表示される比較候補商品を指定するセクションです。商品単位とコレクション単位の両方を併用でき、それぞれの商品に比較データが登録されている場合のみ候補として表示されます。

比較候補商品：モーダルのドロップダウンに表示する商品を、最大 50 件まで個別に指定できます。特定の人気商品同士を比較してほしいときに便利です。
比較候補コレクション：選択したコレクションの商品（先頭 50 件）を比較候補に追加します。「シリーズ商品をまとめて比較対象にしたい」「特集ページの商品を比較してほしい」といったときにおすすめです。

比較候補の設定画面

比較ボタンのテキスト・色

商品ページに表示される「比較する」ボタンの文言と配色を調整できます。ストアのブランドカラーに合わせると、より自然になじむデザインになります。

ボタンのテキスト：ボタンに表示する文言を自由に変更できます。空欄にした場合はデフォルトの翻訳文言が使われます。
ボタンスタイル：プライマリー（背景色塗りつぶし）、アウトライン（枠線のみ）、テキストのみ（リンク風）の 3 種類から選択
背景色・テキスト色・枠線の色・ホバー時の色：細かいカラー設定が可能

比較ボタンのテキスト・色の設定画面

比較ボタンのサイズ・配置・追加 CSS

ボタンの形・大きさ・配置を細かく調整できるセクションです。商品ページのデザインに合わせて、もっとも自然になじむ設定にしてください。

角丸：0〜32px の範囲で調整
上下の余白：4〜24px、左右の余白：8〜48px
フォントサイズ：10〜20px、フォントの太さ：400 / 500 / 600 / 700
配置：左寄せ・中央・右寄せ
幅 100% 化：商品ページ横幅いっぱいに広げたい場合に便利
追加 CSS：ボタン要素に対して CSS プロパティを直接記述できる上級者向け設定

比較ボタンのサイズ・配置・追加 CSS の設定画面

モーダル・テーブルの設定

「比較する」ボタンを押したときに開く、比較モーダルとテーブルの見た目を調整するセクションです。お客様が一番長く目にする画面なので、ストアの雰囲気に合わせて整えると効果的です。

比較できる最大商品数：2 または 3 から選択
モバイル時のレイアウト：項目名を各セルの上に表示 / 値のみ表示 / 項目名を全幅見出し行として表示
モーダルのタイトル：「商品スペック比較」など、ストアの呼び方に合わせて変更可能
背景色・テキスト色・角丸・背景オーバーレイ濃さ：細かい見た目調整
ヘッダ行の背景色・罫線の色・偶数行の背景色（縞模様）：テーブルの視認性を高める設定
項目名列の幅：10〜25% の範囲で調整可能

モーダル・テーブルの設定画面

商品を見るリンクボタン

モーダル内の各商品列の下に表示される「商品を見る」リンクボタンの設定です。比較を見て気になった商品の詳細ページへ、お客様をスムーズに誘導するための重要なボタンです。

リンクボタンのテキスト：「商品を見る」「詳細を見る」「購入する」など、目的に合わせて変更可能
スタイル・背景色・テキスト色・枠線色・ホバー時の色・角丸：比較ボタンと揃えるとデザインに統一感が生まれる

商品を見るリンクボタンの設定画面

すぐ使えるおすすめ設定例

商品ジャンルごとに、推奨設定の例を 3 パターン紹介します。

ユースケース 1：家電ストア（スペック数値で比較したい）

比較候補：シリーズ商品のコレクションを登録して横展開
最大商品数：3
モバイルレイアウト：「項目名を各セルの上に表示」
主な項目：消費電力 / サイズ / 重量 / 保証期間 / 機能対応表
ボタンスタイル：プライマリー、ストアのブランドカラーで統一

ユースケース 2：アパレルストア（着用感や素材で選びたい）

比較候補：類似カテゴリーの商品（同じカット・シルエット）
最大商品数：2（情報量を絞り、ビジュアル重視）
モバイルレイアウト：「値のみ表示（項目名なし）」
主な項目：素材 / シルエット / 着丈 / カラー展開 / おすすめ着用シーン
ボタンスタイル：アウトライン、控えめな配色

ユースケース 3：コスメ・健康食品（成分や効能で選びたい）

比較候補：効能別コレクション（保湿 / エイジングケアなど）
最大商品数：3
モバイルレイアウト：「項目名を全幅見出し行として表示」
主な項目：主な成分 / 容量 / 推奨使用量 / アレルギー情報
ボタンスタイル：プライマリー、CTA として目立たせる

文言のテンプレ例

ボタンやモーダルタイトルの文言例です。コピペで使えます。

比較ボタン：「比較する」「他の商品と比べる」「スペックを見比べる」「Compare」
モーダルタイトル：「商品スペック比較」「商品の比較」「比較表」「Spec Comparison」
リンクボタン：「商品を見る」「この商品の詳細へ」「購入ページへ」

テーマのコード編集で実装する場合のサンプルコード

「アプリを使わずに自分で実装したい」という場合のサンプルコードを紹介します。Liquid・CSS・JavaScript を使って、メタフィールドに登録した仕様情報を商品ページに横並びで表示する例です。

実装の流れ

Shopify 管理画面のメタフィールド設定で、商品メタフィールド spec.size, spec.weight, spec.power などを定義する
テーマの sections/ ディレクトリに比較セクションを追加する
CSS と JavaScript で見た目と切替動作を整える

HTML（Liquid）を追加

{% comment %} sections/spec-compare.liquid {% endcomment %}
<section class="spec-compare" data-spec-compare>
  <button type="button" class="spec-compare__open" data-open>
    {{ section.settings.button_text | default: "比較する" }}
  </button>
  <div class="spec-compare__modal" data-modal hidden>
    <div class="spec-compare__panel">
      <button type="button" class="spec-compare__close" data-close>×</button>
      <h2>{{ section.settings.modal_title | default: "商品スペック比較" }}</h2>
      <table class="spec-compare__table">
        <thead>
          <tr>
            <th>項目</th>
            <th>{{ product.title }}</th>
            <th>
              <select data-compare-select>
                {% for handle in section.settings.compare_handles | split: "," %}
                  {% assign p = all_products[handle | strip] %}
                  {% if p %}<option value="{{ p.handle }}">{{ p.title }}</option>{% endif %}
                {% endfor %}
              </select>
            </th>
          </tr>
        </thead>
        <tbody data-compare-body>
          {% for block in section.blocks %}
            {% assign key = block.settings.key %}
            <tr data-key="{{ key }}">
              <td>{{ block.settings.label }}</td>
              <td>{{ product.metafields.spec[key] }}</td>
              <td data-compare-cell>—</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

CSS を追加

.spec-compare__modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.spec-compare__panel {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 720px;
  width: 92%;
  max-height: 80vh;
  overflow: auto;
}
.spec-compare__table {
  width: 100%;
  border-collapse: collapse;
}
.spec-compare__table th,
.spec-compare__table td {
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: center;
}
.spec-compare__table tbody tr:nth-child(even) {
  background: #fafafa;
}
@media (max-width: 768px) {
  .spec-compare__table th,
  .spec-compare__table td { padding: 8px; font-size: 13px; }
}

JavaScript を追加

document.querySelectorAll("[data-spec-compare]").forEach((root) => {
  const modal = root.querySelector("[data-modal]");
  root.querySelector("[data-open]").addEventListener("click", () => {
    modal.hidden = false;
  });
  root.querySelector("[data-close]").addEventListener("click", () => {
    modal.hidden = true;
  });

  const select = root.querySelector("[data-compare-select]");
  const body = root.querySelector("[data-compare-body]");

  const updateCells = async () => {
    const handle = select.value;
    const res = await fetch(`/products/${handle}.js`);
    const data = await res.json();
    body.querySelectorAll("[data-key]").forEach((row) => {
      const key = row.dataset.key;
      const cell = row.querySelector("[data-compare-cell]");
      cell.textContent = (data.metafields?.spec?.[key]) || "—";
    });
  };

  select.addEventListener("change", updateCells);
  updateCells();
});