はじめに
2026 年現在も EC 市場は拡大を続けており、中でも Shopify を利用してオンラインストアを運営する事業者は増え続けています。ストアの数が増えるほど、ただ商品を並べるだけでなく、「どの商品を、どのページで、どう見せるか」という 商品表示の工夫 が売上を左右するようになってきました。
その中でも近年注目されているのが、「特集コレクション」をタブで切り替えて表示する という見せ方です。「新着」「セール」「人気」といった複数の コレクション をひとつのブロックにまとめ、お客様がタブをワンタップで切り替えながら商品を見比べられるようにすることで、回遊性が高まり、より多くの商品に触れてもらえます。トップページに置けば「いま推したい商品」をまとめて訴求でき、商品ページに置けば関連カテゴリーへの導線にもなります。
しかし、残念ながら Shopify のデフォルト機能だけでは、複数のコレクションをタブで切り替えて表示する仕組みを手軽に作ることはできません。 標準のテーマには「Featured collection（特集コレクション）」セクションが用意されているものの、表示できるのは 1 つのコレクションだけで、タブによる切り替えには対応していないことがほとんどです。そのため、多くの事業者は アプリ を活用して、コレクションタブによる おすすめ商品表示 を実現しています。
この記事では、
- Shopify における特集コレクション・コレクションタブの基礎
- コレクションタブで商品を表示するメリット・デメリット
- そして Shopify で 特集コレクションをタブ表示 できる 5 つ のアプリ
をまとめてご紹介します。特に最初にご紹介する 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」 は、導入・設定ともにシンプルでわかりやすいため、ボリュームたっぷりに丁寧に解説します。ぜひ参考にしてみてください。
今回は、以下の記事を参考にしています。
特集コレクション・コレクションタブとは？
「特集コレクション」 とは、ストアの中で特に見てもらいたい商品グループ（コレクション）を、ページ上にピックアップして表示することを指します。Shopify では商品をまとめた単位を「コレクション」と呼び、「新着商品」「セール対象」「ベストセラー」などのテーマごとに作成できます。
そして 「コレクションタブ」 とは、その特集コレクションを複数まとめ、タブ UI で切り替えられるようにした表示方法です。たとえば次のような使い方ができます。
- 新着: 入荷したばかりの商品をまとめて訴求する
- セール: 値下げ中の商品をひとつのタブにまとめる
- 人気: ベストセラーや売れ筋を集めて見せる
- おすすめ: 季節やキャンペーンに合わせてピックアップする
これらをひとつのブロックにまとめておけば、お客様はページを移動せずにタブを切り替えるだけで、気になるカテゴリーの おすすめ商品表示 を次々と見られます。
Shopify でコレクションタブを使うメリットとデメリット
メリット
-
回遊性が上がり、より多くの商品を見てもらえる
複数のコレクションをひとつのブロックにまとめられるため、お客様はタブを切り替えるだけで多くの商品に触れられます。1 ページあたりの閲覧商品数が増え、購入のきっかけが生まれやすくなります。 -
トップページの訴求力が高まる
「新着」「セール」「人気」を並べておくことで、初めて訪れたお客様にもストアの魅力が一目で伝わります。スクロールの少ない上部で多くの情報を見せられるのが強みです。 -
省スペースでスッキリ見せられる
タブで切り替える形式なので、縦に長くなりがちな商品一覧をコンパクトにまとめられます。ページ全体のデザインが引き締まります。 -
キャンペーンの切り替えがかんたん
季節やセールに合わせて、表示するコレクションやタブのラベルを差し替えるだけで訴求内容を更新できます。
デメリット
-
標準テーマだけでは実現が難しい
Shopify の標準セクションはコレクションを 1 つしか表示できないことが多く、タブ切り替えを実装するにはテーマのコード編集かアプリが必要です。 -
コード編集はハードルが高い
Liquid・CSS・JavaScript を自前で書く方法もありますが、テーマのアップデートで崩れるリスクや保守の手間があり、ノーコードで運用したい方には不向きです。
Shopify のデフォルト機能ではコレクションタブを作れない
前述のとおり、Shopify の標準テーマには「Featured collection」セクションがありますが、これは 1 つのコレクションを表示するためのもの です。複数のコレクションをタブで切り替える UI は標準では用意されておらず、自力で実装するには HTML・CSS・JavaScript の知識が必要になります。
さらに、コードを書いて実装した場合は、テーマのアップデートや別の改修のたびに表示が崩れていないか確認する必要があり、運用負荷が高くなりがちです。こうした理由から、コレクションタブによるおすすめ商品表示は、専用アプリで実現するのが最も手軽で確実 です。
ここからは、おすすめのアプリを 5 個ご紹介します。
シンプル特集コレクションタブ｜お手軽おすすめ商品表示
はじめに
最初にご紹介するのは、株式会社 UnReact が提供する 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」 です。このアプリは、ホーム・商品・コレクションなどあらゆるページに、タブ切り替え式のコレクション一覧を配置できる Shopify アプリです。「新着」「セール」「人気」といった最大 4 つのコレクションをひとつのブロックにまとめられるので、お客様は気になるカテゴリーをワンタップで切り替えながら、すっきりと商品を見比べられます。
コーディングは一切不要で、テーマの雰囲気にあわせた見た目に仕上げられるのが大きな魅力です。料金は Basic Plan 月額 $3.99（または年額 $39.99 で 16% お得）で、インストールから 7 日間は無料でお試しいただけます。
できること
このアプリを使えば、特集したいコレクションをタブで切り替えながら、おすすめ商品をすっきりと並べて表示できます。ここでは主な機能を画像付きでご紹介します。
タブ切り替えで複数コレクションをひとつのブロックに表示
特集したいコレクションを最大 4 件までタブにまとめられます。「新着」「セール」「人気」など、お客様が気になるカテゴリーをワンタップで切り替えながら、ひとつのブロックで多くの商品を見てもらえます。
セール・NEW・売り切れバッジを設定できる
セール中の商品には割引率やお好みの文言を、最近追加した商品には NEW を、在庫切れの商品には売り切れバッジを表示できます。お客様の目を引き、購買のきっかけづくりに役立ちます。
レビューアプリの評価を表示できる
商品メタフィールドから評価を読み取り、星評価として表示できます。Shopify Product Reviews や Judge.me、シンプルレビューなどに対応し、商品の信頼感をそのままお客様に伝えられます。
クイックビュー＆カートに直接追加で、快適に購入
商品ページに移動しなくても、モーダルで詳細を確認したり、その場でカートに追加したりできます。お客様の手間を減らし、スムーズな購入体験を提供できます。
スキーマで様々な項目を設定できる
見出し・カードのデザイン・ボタン・画像比率・バッジなど、細かな見た目をテーマエディタからまとめて調整できます。コーディング不要で、テーマの雰囲気にあわせて仕上げられます。
1 クリックでテーマに追加できる
難しい設定は不要です。アプリの管理画面からテーマを選んで「テーマに追加」を押すだけで、すぐにストアへ反映できます。
アプリのインストール
それでは、実際にアプリをインストールする手順を見ていきましょう。
-
Shopify 管理画面の左下にある「設定」をクリックします。
-
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
-
検索窓にアプリ名「シンプル特集コレクションタブ」を入力し、表示されたアプリをクリックします。
-
アプリ詳細画面で「インストール」をクリックします。
-
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。
アプリブロックをテーマに追加
インストールが完了したら、アプリブロックをテーマに追加して、ストアに特集コレクションタブを表示しましょう。追加方法は「自動（1 クリック追加）」と「手動」の 2 通りがあります。
最も簡単なのは自動追加です。アプリの管理画面から数クリックで設置できます。
-
アプリの管理画面を開きます。
-
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
-
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
特定のページや任意の位置に設置したい場合は、テーマエディタの「セクションを追加」→「アプリ」タブから手動で追加することもできます。
アプリ設定
テーマエディタでブロックを選択すると、右側の設定パネルから細かくカスタマイズできます。設定は大きく 5 つのグループに分かれています。
コンテンツ設定
ブロックに表示するコレクションや見出しなど、中身に関する設定です。タイトル・サブタイトルの文言や、タブとして表示するコレクション（最大 4 件）、各タブの見出し、表示する商品数（4／8／12／16／24 件）、商品の並び順、「すべて表示」リンクなどを設定できます。タブの見出しは「新着」「セール」など短くわかりやすい言葉にすると、お客様が切り替えやすくなります。
レイアウト設定
商品の並べ方やブロック全体の見た目に関する設定です。PC・モバイルの列数、カード間の余白、セクションの最大幅、ブロックのスタイル（なし／枠線／カード）、背景色、上下の余白などを調整できます。
カードデザイン設定
個々の商品カードの見た目や表示情報に関する設定です。カードのスタイル（ミニマル／枠線／影付き）、角の丸み、背景色、画像の縦横比（自動／正方形／横長／縦長／ワイド）、画像の表示方法（カバー／コンテイン）、ホバー時の拡大や 2 枚目画像への切り替え、ベンダー表示、レビューの星評価表示などを設定できます。星評価は Shopify Product Reviews、Judge.me、シンプルレビューなどに対応します。
バッジとアクション設定
セールや NEW などのバッジ、カートに追加・クイックビューといったボタンの動作に関する設定です。セールバッジ（割引率／カスタムテキスト）、NEW バッジの表示日数、売り切れバッジの文言、メインボタンの動作（カートに直接追加／オプションを選択／商品ページへ移動）、ボタンのスタイル、カート追加後のトースト表示、クイックビューボタンなどを設定できます。
追加設定
さらに細かく見た目を調整したい上級者向けの設定です。このブロック内にのみ適用されるカスタム CSS を入力でき、標準の設定では対応できない細かなデザイン調整を行えます。
おわりに
「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」は、最大 4 つのコレクションをタブで切り替えて表示でき、列数・余白・画像比率・カードデザイン・バッジまで細かく調整できるアプリです。星評価・クイックビュー・カートへの直接追加にも対応し、コーディング不要でテーマに簡単に追加できます。コレクションタブによるおすすめ商品表示を、手軽に・きれいに実現したい方に最適です。
- インストールはこちら: シンプル特集コレクションタブ｜お手軽おすすめ商品表示
- 詳細なご利用ガイドはこちら
EasyBoost:Carousel, Collection
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | EasyBoost:Carousel, Collection |
| 開発者 | ShopiDevs |
| 価格設定 | 無料プランあり／Premium Plan 月額 $9.99 |
| 主な機能・特徴 | スライダー・グリッド・タブ・ルックブックで商品やコレクションを任意のページに表示、バンドルやおすすめ商品で AOV 向上、カウントダウンタイマーやセールバッジで緊急性を演出。28 種類以上のテンプレート搭載 |
| 対応言語 | 英語（日本語非対応） |
| 評価 | ★★★★★ 5.0（43 件） |
ワンポイント解説
EasyBoost は、コレクションタブだけでなく、商品スライダー・グリッド・ルックブック・カウントダウンと、訪問者をバイヤーに変えるための「見せる」機能を幅広く備えたオールインワン型のアプリです。28 種類以上のテンプレートが用意されているため、デザインに自信がない方でもプロ仕様のセクションをすぐに用意できます。関連商品やバンドル、最近見た商品などの表示で客単価アップを狙えるのも特徴です。コレクションタブに加えて、緊急性の演出やアップセルまでまとめて取り入れたいストアに向いています。
Collection Sort & Category |KX
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Collection Sort & Category |KX |
| 開発者 | Kimonix |
| 価格設定 | Starter 月額 $19〜（Advanced $79／Superior $299） |
| 主な機能・特徴 | 100 以上のデータ項目（売上・利益・在庫・サイズ在庫・返品・レビューなど）を用いた AI コレクションソート、1:1 のおすすめ表示、コレクションの A/B テスト、市場別のマーチャンダイジング |
| 対応言語 | 英語（日本語非対応） |
| 評価 | ★★★★★ 5.0（210 件） |
ワンポイント解説
Collection Sort & Category |KX は、大規模カタログのストア向けに作られた、AI ベースのコレクションソート・マーチャンダイジングプラットフォームです。売上や利益、在庫状況、サイズの在庫、返品率といった膨大なデータをもとに、コレクション内の商品の並び順を自動で最適化してくれます。コレクションごとの A/B テストや、市場（地域）ごとに異なる並び順を出し分けられる点も強力です。商品点数が非常に多く、データドリブンに「どの商品を上に出すか」を突き詰めたい上級者向けのアプリと言えます。
Stamp ‑ Variants on Collection
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Stamp ‑ Variants on Collection |
| 開発者 | Sezerium |
| 価格設定 | 無料プランあり／Eco $4・Standard $12・Advanced $24（月額） |
| 主な機能・特徴 | コレクションページで商品バリエーションを個別の商品として表示、価格帯（price range）の表示、在庫切れバリエーションの非表示、バリエーションごとのカート追加、コレクション別の表示設定 |
| 対応言語 | 日本語を含む 25 言語以上に対応 |
| 評価 | ★★★★★ 5.0（128 件） |
ワンポイント解説
Stamp は、コレクションページで商品の「バリエーション」を独立した商品のように見せられるアプリです。たとえば色違いやサイズ違いを別々のカードとして並べたり、価格帯をまとめて表示したりできます。在庫切れバリエーションを隠したり、バリエーションごとに直接カートへ追加できる点も便利です。日本語を含む多言語に対応しているため、国内ストアでも導入しやすいのが魅力です。「コレクションをタブで見せる」というよりは「コレクション内の見せ方そのものを最適化する」アプリで、バリエーション豊富な商品を扱うストアと特に相性が良いです。
Sort'd ‑ Prime Collection Sort
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Sort'd ‑ Prime Collection Sort |
| 開発者 | Beefy Nachos Ltd |
| 価格設定 | 無料プランあり／Premium 月額 $29・Premium Pro 月額 $70〜 |
| 主な機能・特徴 | ドラッグ&ドロップのマーチャンダイザー、コレクションの自動ソート、在庫切れ商品の降格・新商品の昇格、分析・パフォーマンススコア、A/B テスト |
| 対応言語 | 英語（日本語非対応） |
| 評価 | ★★★★★ 5.0（122 件） |
ワンポイント解説
Sort'd は、コレクションページの商品の並び順をプロ仕様で管理できるマーチャンダイジングツールです。ドラッグ&ドロップで手動並べ替えができるほか、在庫切れ商品を自動で下に下げたり、新商品を上に持ち上げたりといった自動化ルールを設定できます。分析機能で各コレクションや商品のパフォーマンスを可視化できるため、「どの並び順が一番売れるのか」をデータで判断したい方に向いています。本記事のテーマである「タブ表示」とは方向性が異なりますが、特集コレクション内の商品の見せ方を突き詰めたいときに組み合わせると効果的です。
まとめ
今回は、Shopify で特集コレクションをタブ表示できるアプリを 5 つご紹介しました。
コレクションタブによるおすすめ商品表示は、ストアの回遊性を高め、より多くの商品をお客様に見てもらうための有効な手段です。中でも最初にご紹介した 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」 は、最大 4 つのコレクションをタブで切り替えて表示でき、レイアウトやカードデザイン、バッジまで細かく調整できるうえ、コーディング不要で 1 クリックでテーマに追加できます。「まずは手軽にコレクションタブを試してみたい」という方には、最初の 1 本として特におすすめです。
ぜひ自店に合ったアプリを選んで、おすすめ商品表示を魅力的に仕上げてみてください。
参考記事
今回は、以下の記事を参考にしています。