2026/05/26

Shopify に特集コレクションタブを設置できるアプリ6選を紹介！

@ 信条刃

Shopify に特集コレクションタブを設置できるアプリ6選を紹介！

今回の記事は Shopify App Store で提供されている、特集コレクションタブアプリについての記事です。トップページや商品ページに「新着」「セール」「人気」などのコレクションをタブで切り替えて表示し、おすすめ商品をスッキリ見せたいストア運営者の方に向けて、おすすめのアプリと実装方法をまとめました。

特集コレクションタブとは

特集コレクションタブとは、Shopify ストアのページ上に複数のコレクション（商品グループ）をまとめて配置し、タブ UI で切り替えながら表示できる仕組みのことです。

Shopify では、商品をテーマごとにまとめた単位を「コレクション」と呼びます。「新着商品」「セール対象」「ベストセラー」などのコレクションをあらかじめ作っておき、それらをひとつのブロックにまとめてタブで切り替えられるようにしたものが「コレクションタブ」です。お客様はページを移動することなく、タブをワンタップで切り替えるだけで、気になるカテゴリーのおすすめ商品表示を次々と見られます。

標準テーマにも「特集コレクション（Featured collection）」セクションは用意されていますが、表示できるのは基本的に 1 つのコレクションだけで、タブによる切り替えには対応していません。そのため、複数コレクションのタブ表示を実現するには、テーマのコード編集か専用アプリの導入が必要になります。

特集コレクションタブを導入する利点

回遊性が高まる
複数のコレクションをひとつのブロックにまとめられるため、お客様はタブを切り替えるだけで多くの商品に触れられます。1 ページあたりの閲覧商品数が増え、購入のきっかけが生まれやすくなります。
トップページの訴求力が上がる
「新着」「セール」「人気」をまとめて並べることで、初めて訪れたお客様にもストアの魅力が一目で伝わります。
省スペースでスッキリ見せられる
縦に長くなりがちな商品一覧を、タブ切り替えでコンパクトにまとめられます。ページ全体のデザインが引き締まります。
キャンペーンの切り替えがかんたん
季節やセールに合わせて、表示するコレクションやタブのラベルを差し替えるだけで訴求内容を更新できます。
おすすめ商品への導線になる
商品ページやコレクションページに置けば、関連カテゴリーへの自然な導線として機能します。
ノーコードで運用できる
アプリを使えばコードを書かずに設置・更新できるため、専門知識のないスタッフでも運用しやすくなります。

特集コレクションタブアプリの選び方

数あるアプリの中から自店に合ったものを選ぶには、次のポイントを確認するとよいでしょう。

ノーコードで設置・カスタマイズできるか
タブで切り替えられるコレクション数や、表示できる商品数が十分か
レイアウトや列数を柔軟に変えられるか
セールバッジ・星評価・カート追加など、購買を後押しする機能があるか
日本語に対応しているか、料金が予算に合っているか
ストアの表示速度に悪影響を与えないか

特にこだわりがなければ、まずはノーコードで手軽に試せて、レイアウトやデザインを細かく調整できるアプリから導入するのがおすすめです。実際の表示を見ながら、自店に必要な機能を見極めていきましょう。

コーディングで特集コレクションタブを実装する方法

アプリを使わずに、テーマのコードを直接編集してコレクションタブを実装することもできます。ここでは、もっともシンプルなセクションの作り方をご紹介します。オンラインストア → テーマ → コードを編集 から、sections フォルダに新しいセクションファイル（例: featured-collection-tabs.liquid）を作成し、以下のコードを参考にしてください。

まず、Liquid でタブのボタンと、各コレクションの商品グリッドを出力します。

{%- comment -%} sections/featured-collection-tabs.liquid {%- endcomment -%}
<div class="fc-tabs">
  <div class="fc-tabs__nav" role="tablist">
    {%- for block in section.blocks -%}
      {%- assign col = collections[block.settings.collection] -%}
      <button
        class="fc-tabs__btn{% if forloop.first %} is-active{% endif %}"
        data-tab="{{ block.id }}"
        role="tab"
      >
        {{ block.settings.label | default: col.title }}
      </button>
    {%- endfor -%}
  </div>

  {%- for block in section.blocks -%}
    {%- assign col = collections[block.settings.collection] -%}
    <div class="fc-tabs__panel{% if forloop.first %} is-active{% endif %}" data-panel="{{ block.id }}">
      <ul class="fc-tabs__grid">
        {%- for product in col.products limit: 8 -%}
          <li class="fc-tabs__card">
            <a href="{{ product.url }}">
              <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}" loading="lazy">
              <p class="fc-tabs__title">{{ product.title }}</p>
              <p class="fc-tabs__price">{{ product.price | money }}</p>
            </a>
          </li>
        {%- endfor -%}
      </ul>
    </div>
  {%- endfor -%}
</div>

{% schema %}
{
  "name": "特集コレクションタブ",
  "blocks": [
    {
      "type": "tab",
      "name": "タブ",
      "settings": [
        { "type": "collection", "id": "collection", "label": "コレクション" },
        { "type": "text", "id": "label", "label": "タブの見出し" }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [{ "name": "特集コレクションタブ", "blocks": [{ "type": "tab" }] }]
}
{% endschema %}

次に、タブの見た目と、グリッドのレイアウトを CSS で整えます。

.fc-tabs__nav { display: flex; gap: 8px; border-bottom: 1px solid #e5e5e5; margin-bottom: 16px; }
.fc-tabs__btn { padding: 8px 16px; background: none; border: none; cursor: pointer; font-size: 15px; color: #888; }
.fc-tabs__btn.is-active { color: #111; border-bottom: 2px solid #111; font-weight: 600; }
.fc-tabs__panel { display: none; }
.fc-tabs__panel.is-active { display: block; }
.fc-tabs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; }
@media (max-width: 749px) { .fc-tabs__grid { grid-template-columns: repeat(2, 1fr); } }
.fc-tabs__card img { width: 100%; height: auto; border-radius: 8px; }
.fc-tabs__title { font-size: 14px; margin: 8px 0 4px; }
.fc-tabs__price { font-size: 14px; color: #555; }

最後に、JavaScript でタブの切り替え動作を実装します。

document.querySelectorAll('.fc-tabs').forEach((root) => {
  const buttons = root.querySelectorAll('.fc-tabs__btn');
  const panels = root.querySelectorAll('.fc-tabs__panel');

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      const id = btn.dataset.tab;
      // ボタンの選択状態を切り替え
      buttons.forEach((b) => b.classList.toggle('is-active', b === btn));
      // 対応するパネルだけ表示
      panels.forEach((p) => p.classList.toggle('is-active', p.dataset.panel === id));
    });
  });
});

このように実装すれば、テーマエディタからコレクションを選ぶだけでタブ表示を作れます。ただし、テーマのアップデートで崩れるリスクや、レスポンシブ・アクセシビリティ対応、バッジや星評価などの追加実装には手間がかかります。手軽さと保守性を重視するなら、やはり専用アプリの利用がおすすめです。

価格比較

各アプリの料金とおもな特徴を整理すると、次のようになります。

シンプル特集コレクションタブ｜お手軽おすすめ商品表示: 月額 $3.99（年額 $39.99）。最大 4 コレクションのタブ表示・カスタマイズ豊富・ノーコード。
Buddha Mega Menu & Navigation: 無料〜月額 $9.95。タブ付きメガメニューでナビゲーションを強化。
ST: Product & Collection Sort: 無料〜月額 $179。データに基づくコレクションの自動ソート。
Smart Collection Pro: 月額 $4.80〜$32.80。自動コレクションと階層構造の管理。
Supergrid Collections ‑ Depict: 無料〜月額 $500。画像・動画入りのビジュアルなコレクションページ作成。
Jedi ‑ Collection Sort Pro: 無料〜月額 $49。AI ソートやネスト構造でのコレクション最適化。

手軽にコレクションタブを設置したいなら、月額 $3.99 から始められる「シンプル特集コレクションタブ」がコストパフォーマンスに優れています。

Shopify アプリの日本語サポート

国内ストアで運用する場合、管理画面が日本語に対応しているかも重要なポイントです。

シンプル特集コレクションタブ｜お手軽おすすめ商品表示: ○（日本語対応）
Buddha Mega Menu & Navigation: ×（日本語非対応）
ST: Product & Collection Sort: ×（日本語非対応）
Smart Collection Pro: ○（日本語対応）
Supergrid Collections ‑ Depict: ×（日本語非対応）
Jedi ‑ Collection Sort Pro: ×（日本語非対応）

日本語で安心して使いたい方には、日本の開発元によるサポートが受けられる「シンプル特集コレクションタブ」が特におすすめです。

使いやすさ

今回ご紹介したアプリの中でも、もっともおすすめなのは 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」 です。最大 4 つのコレクションをタブで切り替えて表示でき、列数・余白・画像比率・カードデザイン・バッジまで管理画面から細かく調整できます。星評価やクイックビュー、カートへの直接追加にも対応しているうえ、コーディング不要で 1 クリックでテーマに追加できるため、初めての方でも迷わず設置できます。日本語のご利用ガイドも用意されており、安心して導入できる点も魅力です。

終わりに

特集コレクションタブは、トップページや商品ページの訴求力を高め、お客様により多くの商品を見てもらうための効果的な施策です。アプリを使えば、コードを書かずに手軽にコレクションタブを設置でき、デザインや機能も自由にカスタマイズできます。ぜひ自店に合ったアプリを選んで、おすすめ商品表示を魅力的に仕上げてみてください。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify に特集コレクションタブを設置できるアプリ6選を紹介！

Shopify に特集コレクションタブを設置できるアプリ6選を紹介！

特集コレクションタブとは

特集コレクションタブを導入する利点

特集コレクションタブアプリの選び方

おすすめの特集コレクション Shopify アプリ

シンプル特集コレクションタブ｜お手軽おすすめ商品表示 ☆ 迷ったらこれ

特徴・機能

価格設定

Buddha Mega Menu & Navigation

特徴・機能

価格設定

ST: Product & Collection Sort

特徴・機能

価格設定

Smart Collection Pro

特徴・機能

価格設定

Supergrid Collections ‑ Depict

特徴・機能

価格設定

Jedi ‑ Collection Sort Pro

特徴・機能

価格設定

コーディングで特集コレクションタブを実装する方法

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopify で商品スライダーを設置できるおすすめアプリと実装方法を解説

Shopify に特集コレクションタブを設置できるアプリ6選を紹介！

Shopifyにコレクション一覧を設置できるアプリ6選を紹介！商品カテゴリー表示カルーセルでストアを魅力的に

Shopify に商品診断＆商品絞り込みを設置できるアプリ6選を紹介！コレクションフィルターで「探せる」ストアへ

Shopifyに縦型ショート動画ギャラリー・動画グリッドを設置できるアプリ6選を紹介！

ShopifyのサンクスページにLINE友だち追加ボタンを設置するできるアプリ6選を紹介！