Shopifyで商品比較テーブルを簡単に表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/07

はじめに

Shopify は、世界中で利用されているネットショップ作成プラットフォームです。商品の登録・販売・決済・在庫管理など、ECサイト運営に必要な機能が一通り揃っており、Shopify アプリを追加することで、テーマだけでは実現が難しい機能をかんたんに追加できます。

「シンプル商品仕様比較｜お手軽スペック比較テーブル」は、商品の仕様を横並びで比較できるモーダルを商品ページに追加できるアプリです。管理画面で商品ごとに比較項目（項目名と値）を登録し、よく使う項目セットはプリセットとして保存・呼び出しできます。比較対象は個別の商品でも、コレクション単位でも指定可能。テーマエディタからボタンの色や形、モーダルの見た目、モバイル時のレイアウトまで細かくカスタマイズでき、ノーコードでストアの商品比較体験を強化できます。

ご利用料金は Basic Plan $3.99/月、インストールから 7日間の無料お試し期間 がございます。気軽に導入をご検討ください。

アプリストアで見る

シンプル商品仕様比較｜お手軽スペック比較テーブルのメインビジュアル

「シンプル商品仕様比較｜お手軽スペック比較テーブル」でできること

商品ページに「比較する」ボタンを設置するだけで、お客様は気になる商品の仕様を横並びのテーブルで見比べられるようになります。モーダル内のドロップダウンから商品をその場で入れ替えられるので、複数商品の特徴を比較しながら最適な一つを選んでもらうことができます。

シンプル商品仕様比較｜お手軽スペック比較テーブルのメインビジュアル

主な特徴は以下の通りです。

商品ページに横並びの比較テーブルをモーダルで表示できます。
よく使う比較項目はプリセットに保存して再利用できます。
比較候補は個別商品でもコレクション単位でも指定できます。
ボタンとモーダルの見た目をテーマエディタから細かく調整できます。
モバイル表示用のレイアウトも選べて、スマホでも見やすくなります。

商品ページで商品比較を簡単に実現！

最大3商品の仕様を横並びで一覧できる比較モーダルを、商品ページに設置できます。お客様は「比較する」ボタンをクリックするだけで、価格・サイズ・素材などのスペックを並べて確認でき、購入の決め手をすぐに見つけられます。

商品ページに表示された横並びの比較モーダル

比較項目は商品ごとに設定可能！

管理画面から商品ごとに「項目名」と「値」を登録できます。商品ごとに必要な情報だけを登録できるので、家電なら「サイズ・消費電力・保証期間」、アパレルなら「素材・サイズ・カラー展開」など、ジャンルにあわせた比較表を柔軟に作れます。

管理画面で商品ごとに比較項目（項目名と値）を登録する画面

よく使う比較項目を登録できる！

何度も使う比較項目セットは「プリセット」として保存しておけます。新しい商品を追加するときも、プリセットを呼び出すだけで同じ比較項目を一括反映できるので、運用の手間を大きく減らせます。同じカテゴリの商品が多いストアにおすすめです。

よく使う比較項目をプリセットとして保存・呼び出しする画面

ノーコードでカスタマイズできる！

ボタンの色・形・配置、モーダルの背景色や角丸、テーブルの罫線色まで、テーマエディタからすべてノーコードで調整できます。さらにモバイル表示用のレイアウトも複数から選択でき、スマホからの閲覧でも見やすい比較表を実現できます。

テーマエディタからボタンやモーダルの見た目をノーコードでカスタマイズする画面

1クリックでテーマに追加できる！

アプリの管理画面から「テーマに追加」ボタンを押すだけで、商品ページに比較ボタンブロックがセットされます。Liquid を編集する必要はなく、Shopify の操作に慣れていない方でも安心して導入していただけます。

アプリの管理画面から「テーマに追加」ボタンで1クリック追加する画面

アプリのインストール

アプリストアで見る

ご利用料金は Basic Plan $3.99/月 です。インストールから 7日間は無料お試し いただけますので、まずはお気軽にお試しください。

インストール手順は以下の通りです。

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

アプリブロックをテーマに追加

商品ページに比較ボタンを設置する方法は、自動で追加する方法と、テーマエディタから手動で追加する方法の2通りがあります。お好みの方法でアプリブロックを追加してください。

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

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

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

手動でテーマに追加

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

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

アプリブロックのカスタマイズ

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

比較候補

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

比較候補商品: モーダルのドロップダウンに表示する商品を、最大 50 件まで個別に指定できます。現在の商品に比較データが登録されている場合のみボタンが表示され、候補も比較データを登録した商品のみ有効になります。特定の人気商品同士を比較してほしいときに便利です。
比較候補コレクション: 選択したコレクションの商品（先頭 50 件）を比較候補に追加します。比較データを登録した商品のみが候補に並びます。「シリーズ商品をまとめて比較対象にしたい」「特集ページの商品を比較してほしい」といったときにおすすめです。

比較候補の設定画面

比較ボタン（テキスト・色）

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

ボタンのテキスト（空欄時はデフォルトを表示）: ボタンに表示する文言を自由に変更できます。「比較する」「Compare」「スペックを見比べる」などストアの世界観に合わせて設定してください。空欄にした場合はデフォルトの翻訳文言が使われます。
ボタンスタイル: ボタンの基本スタイルを選択できます。
- プライマリー: 背景色で塗りつぶされた目立つボタンです。コンバージョンを狙いたいときにおすすめです。
- アウトライン: 枠線のみのすっきりした印象のボタンです。落ち着いたストアに向いています。
- テキストのみ: 背景や枠線がなく、文字リンクのように表示されます。控えめに設置したいときに便利です。
背景色: ボタンの背景色を指定します。ブランドカラーに合わせると統一感が出ます。
テキスト色: ボタンの文字色を指定します。背景色とのコントラストを意識すると視認性が高まります。
枠線の色: ボタンの枠線色を指定します。アウトラインスタイルのときに特に効果的です。
ホバー時の背景色: マウスを乗せたときの背景色を指定します。クリックできることをお客様に伝えやすくなります。
ホバー時のテキスト色: マウスを乗せたときの文字色を指定します。背景色と組み合わせて自然な変化を作りましょう。

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

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

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

角丸: ボタンの角の丸さを 0〜32px の範囲で調整できます。0px でシャープな印象、大きめにすると柔らかい印象になります。
上下の余白: ボタンの上下のパディング（4〜24px）を指定します。値を大きくするほど、ボタンが縦に大きくなります。
左右の余白: ボタンの左右のパディング（8〜48px）を指定します。テキストとボタン端との間隔を調整できます。
フォントサイズ: ボタン内のテキストサイズ（10〜20px）を指定します。商品ページの他のテキストとのバランスを意識すると整って見えます。
フォントの太さ: 400 / 500 / 600 / 700 から選べます。数値が大きいほど太字になり、強調度が増します。
配置: ボタンの水平方向の位置を「左寄せ・中央・右寄せ」から選べます。
幅を 100% にする: チェックを入れると、ボタンが商品ページの横幅いっぱいに広がります。スマホでタップしやすくしたい場合におすすめです。
追加 CSS: ボタン要素に対して CSS プロパティを直接記述できます（例：letter-spacing: 1px;）。セレクタは不要で、より細かいカスタマイズを行いたい上級者向けの設定です。

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

モーダル・テーブル

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

比較できる最大商品数: モーダル内に並べられる商品の最大数を「2」または「3」から選べます。仕様の項目数が多い商品は 2 商品、シンプルな比較なら 3 商品がおすすめです。
モバイル時のレイアウト: モバイル（768px 以下）では商品列が最大 2 つに制限されます。表示方法を以下の3つから選べます。
- 項目名を各セルの上に表示: 各値の上に項目名を添えて表示します。スマホでもどの項目を見ているか一目で分かります。
- 値のみ表示（項目名なし）: 値のみ表示し、項目名を省略します。最大限コンパクトに表示したいときにおすすめです。
- 項目名を全幅の見出し行として表示: 項目名を見出し行として全幅で表示し、その下に各商品の値を並べます。項目数が多い場合に見やすいレイアウトです。
モーダルのタイトル: モーダル上部のタイトル文言を自由に設定できます。空欄にするとデフォルトの翻訳文言が使われます。「商品スペック比較」など、ストアの呼び方に合わせて変更できます。
モーダル背景色: モーダル全体の背景色を指定します。
モーダルのテキスト色: モーダル内のテキスト色を指定します。背景色とのコントラストを意識すると読みやすくなります。
モーダルの角丸: モーダルの角の丸さ（0〜24px）を調整します。やや大きめの角丸にすると、柔らかく親しみやすい印象になります。
背景オーバーレイの濃さ: モーダルを開いたときに背景にかかる暗さ（0〜80%）を指定します。値を大きくするほど後ろのコンテンツが見えにくくなり、モーダルへ視線を集中させられます。
ヘッダ行の背景色: 比較テーブルの一番上にある商品名行の背景色を指定します。
罫線の色: テーブルのセル境界線の色を指定します。淡い色にすると、上品でやわらかい雰囲気になります。
偶数行の背景色（縞模様）: 2 行目・4 行目…と偶数行に背景色をつけて縞模様にします。項目数が多いときに行を見間違えにくくなり、視認性が向上します。
項目名列の幅: 一番左の「項目名」列の幅を、テーブル全体に対する割合（10〜25%）で指定できます。項目名が長い場合は値を大きく、短い場合は小さめに設定すると見栄えが整います。

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

商品を見るリンクボタン

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

リンクボタンのテキスト: ボタンに表示する文言を自由に設定できます。「商品を見る」「詳細を見る」「購入する」など、目的に合わせて変更してください。空欄時はデフォルトの翻訳文言を使用します。
リンクボタンのスタイル: ボタンの基本スタイルを選択できます。
- プライマリー: 背景色で塗りつぶされた目立つボタンです。クリックを促したいときにおすすめです。
- アウトライン: 枠線のみのすっきりした印象のボタンです。
- テキストのみ: 背景や枠線がなく、文字リンクのように表示されます。
リンクボタン背景色: リンクボタンの背景色を指定します。
リンクボタンのテキスト色: リンクボタンの文字色を指定します。
リンクボタンの枠線色: リンクボタンの枠線色を指定します。アウトラインスタイル時に特に効果を発揮します。
リンクボタンのホバー時背景色: マウスを乗せたときの背景色を指定します。
リンクボタンのホバー時テキスト色: マウスを乗せたときの文字色を指定します。
リンクボタンの角丸: リンクボタンの角の丸さ（0〜24px）を調整します。比較ボタンと揃えるとデザインに統一感が生まれます。