Shopifyの特集コレクションタブとは？コレクションタブでおすすめ商品表示を実現する方法

目次

• はじめに
• 記事の構成
• 特集コレクションタブとは
• Shopify で特集コレクションタブを表示できる？
• 特集コレクションタブで商品表示するメリット・デメリット
  • メリット
  • デメリット
• テーマのコード編集とアプリ導入の比較
  • テーマのコード編集で実装する方法
  • アプリを導入する方法
  • 結論：最初はアプリで小さく試すのがおすすめ
• おすすめ Shopify アプリ「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」紹介
  • アプリの基本情報
  • できること
• アプリのインストール手順
• アプリをテーマに追加（有効化）
• アプリの設定項目を理解する
  • コンテンツ設定
  • レイアウト設定
  • カードデザイン設定
  • バッジとアクション設定
  • 追加設定
• すぐ使えるおすすめ設定例
  • 文言のテンプレ例
• 関連施策との組み合わせ
• テーマのコード編集で実装する場合のサンプルコード
  • 実装の流れ
  • HTML（Liquid）を追加
  • CSS を追加
  • JavaScript を追加
  • コード実装の注意点
• 運用のコツ
• よくある質問
• まとめ
• 参考記事

はじめに

Shopify でストアを運営していると、「トップページにもっと多くの商品を見てもらいたい」「新着とセールを並べて訴求したい」と感じる場面が増えてきます。とはいえ、商品をただ縦に並べるだけではページが長くなり、お客様が途中で離脱してしまうこともあります。

そこで有効なのが、特集コレクションをタブで切り替えて表示する「コレクションタブ」 という見せ方です。「新着」「セール」「人気」といった複数のコレクションをひとつのブロックにまとめ、お客様がタブをワンタップで切り替えながら おすすめ商品表示 を見比べられるようにすることで、省スペースかつ高い訴求力でストアを魅力的に見せられます。

この記事では、Shopify における特集コレクションタブの基礎から、導入のメリット・デメリット、コード編集とアプリ導入の比較、そして実際におすすめのアプリの設定手順までを、初めての方にもわかりやすく解説します。

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

• Shopifyで特集コレクションタブを表示できるアプリについて徹底解説｜ご利用ガイド
• Shopify特集コレクションアプリ22選！コレクションタブでおすすめ商品表示を最適化
• Shopify に特集コレクションタブを設置できるアプリ6選を紹介！
• 【Shopify】特集コレクションをタブで表示できるアプリ5選！おすすめ商品表示でストアを魅力的に

記事の構成

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

• 特集コレクションタブとは何か
• Shopify でコレクションタブを表示できるのか
• コレクションタブで商品表示するメリット・デメリット
• テーマのコード編集とアプリ導入の比較
• おすすめアプリ「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」の紹介と設定手順
• コード編集で実装する場合のサンプルコード
• 運用のコツとよくある質問

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

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

Shopify では、商品をテーマごとにまとめた単位を「コレクション」と呼びます。「新着商品」「セール対象」「ベストセラー」などのコレクションをあらかじめ作っておき、それらをひとつのブロックにまとめてタブで切り替えられるようにしたものが「コレクションタブ」です。

たとえば、トップページに「新着」「セール」「人気」の 3 つのタブを置いておけば、お客様はページを移動することなく、タブを切り替えるだけでそれぞれのおすすめ商品を確認できます。回遊性が高まり、より多くの商品に触れてもらえるため、購入のきっかけが生まれやすくなります。

Shopify で特集コレクションタブを表示できる？

結論から言うと、Shopify で特集コレクションタブを表示することは可能 です。ただし、標準テーマの機能だけでは実現が難しく、次の 2 つの方法のいずれかを選ぶことになります。

• テーマのコードを編集して実装する方法
  Liquid・CSS・JavaScript を自分で記述し、タブ切り替えのセクションを作成します。自由度は高い一方で、専門知識が必要です。

• アプリを導入して実装する方法
  専用アプリをインストールし、管理画面から設定するだけでコレクションタブを設置できます。コードを書く必要がなく、初めての方でも手軽に導入できます。

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

特集コレクションタブで商品表示するメリット・デメリット

メリット

回遊性が高まり、より多くの商品を見てもらえる
複数のコレクションをひとつのブロックにまとめられるため、お客様はタブを切り替えるだけで多くの商品に触れられます。

• 1 ページあたりの閲覧商品数が増える
• 興味のあるカテゴリーへすぐにアクセスできる
• 購入のきっかけが生まれやすくなる

トップページの訴求力が高まる
「新着」「セール」「人気」を並べておくことで、初めて訪れたお客様にもストアの魅力が一目で伝わります。

• スクロールの少ない上部で多くの情報を見せられる
• キャンペーンや季節の推し商品をまとめて訴求できる

省スペースでスッキリ見せられる
タブで切り替える形式なので、縦に長くなりがちな商品一覧をコンパクトにまとめられます。ページ全体のデザインが引き締まり、洗練された印象になります。

デメリット

標準テーマだけでは実現が難しい
Shopify の標準セクションはコレクションを 1 つしか表示できないことが多く、タブ切り替えを実装するにはコード編集かアプリが必要です。

コード実装は保守の手間がかかる
自前で実装した場合は、テーマのアップデートや別の改修のたびに表示が崩れていないか確認する必要があります。レスポンシブ対応やアクセシビリティ対応も自分で行わなければなりません。

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

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

• メリット: 追加費用がかからない。デザインや動作を完全に自由にコントロールできる。
• デメリット: Liquid・CSS・JavaScript の知識が必要。テーマ更新で崩れるリスクがある。バッジや星評価、カート追加などの機能を追加するには大きな手間がかかる。

アプリを導入する方法

• メリット: コードを書かずに設置・カスタマイズできる。レイアウトやバッジ、星評価、カート追加などの機能が最初から揃っている。サポートを受けられる。
• デメリット: 月額の利用料がかかる（多くは数ドル程度）。

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

コレクションタブは、見た目だけでなくタブ切り替えの動作やレスポンシブ対応など、作り込むほど工数がかかります。まずは月額数ドルのアプリで小さく導入し、効果を見ながら運用していくのが、もっとも手軽で失敗の少ない進め方です。

おすすめ Shopify アプリ「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」紹介

ここからは、実際におすすめのアプリ 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」 をご紹介します。株式会社 UnReact が提供する、ノーコードでコレクションタブを設置できる Shopify アプリです。

以下の Shopify 公式のアプリストアからインストールできます。
シンプル特集コレクションタブ｜お手軽おすすめ商品表示

アプリの基本情報

• アプリ名: シンプル特集コレクションタブ｜お手軽おすすめ商品表示
• 料金: Basic Plan 月額 $3.99（または年額 $39.99 で 16% お得）／7 日間の無料体験
• 特徴: 最大 4 つのコレクションをタブで切り替え表示、ノーコード、豊富なカスタマイズ
• 設置場所: ホーム・商品・コレクションなどあらゆるページ

できること

このアプリでは、特集したいコレクションをタブで切り替えながら、おすすめ商品をすっきりと並べて表示できます。主な機能を見ていきましょう。

タブ切り替えで複数コレクションをひとつのブロックに表示

特集したいコレクションを最大 4 件までタブにまとめられます。「新着」「セール」「人気」など、お客様が気になるカテゴリーをワンタップで切り替えながら、ひとつのブロックで多くの商品を見てもらえます。

セール・NEW・売り切れバッジを設定できる

セール中の商品には割引率やお好みの文言を、最近追加した商品には NEW を、在庫切れの商品には売り切れバッジを表示できます。お客様の目を引き、購買のきっかけづくりに役立ちます。

レビューアプリの評価を表示できる

商品メタフィールドから評価を読み取り、星評価として表示できます。Shopify Product Reviews や Judge.me、シンプルレビューなどに対応し、商品の信頼感をそのままお客様に伝えられます。

クイックビュー＆カートに直接追加で、快適に購入

商品ページに移動しなくても、モーダルで詳細を確認したり、その場でカートに追加したりできます。お客様の手間を減らし、スムーズな購入体験を提供できます。

スキーマで様々な項目を設定できる

見出し・カードのデザイン・ボタン・画像比率・バッジなど、細かな見た目をテーマエディタからまとめて調整できます。コーディング不要で、テーマの雰囲気にあわせて仕上げられます。

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

難しい設定は不要です。アプリの管理画面からテーマを選んで「テーマに追加」を押すだけで、すぐにストアへ反映できます。

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

それでは、実際にアプリをインストールする手順を見ていきましょう。

1. Shopify 管理画面の左下にある「設定」をクリックします。

   

2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。

   

3. 検索窓にアプリ名「シンプル特集コレクションタブ」を入力し、表示されたアプリをクリックします。

   

4. アプリ詳細画面で「インストール」をクリックします。

   

5. 権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

   

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

インストールが完了したら、アプリブロックをテーマに追加します。もっとも簡単な「自動（1 クリック追加）」の手順を紹介します。

1. アプリの管理画面を開きます。

   

2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

   

3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

   

特定のページや任意の位置に設置したい場合は、テーマエディタの「セクションを追加」→「アプリ」タブからブロックを選んで手動で追加することもできます。

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

テーマエディタでブロックを選択すると、右側の設定パネルから細かくカスタマイズできます。設定は大きく 5 つのグループに分かれています。

コンテンツ設定

ブロックに表示するコレクションや見出しなど、中身に関する設定です。

• タイトル／サブタイトル: ブロック上部の見出しと補足の見出しを設定します。「おすすめ商品」「特集アイテム」などお客様の目を引く言葉が効果的です。
• タブに表示するコレクション: タブとして表示するコレクションを最大 4 件まで選べます。2 件以上選ぶと自動でタブの切り替え UI が表示されます。
• タブ 1〜4 の見出し: 各タブのラベルを設定できます。「新着」「セール」など短くわかりやすい言葉にすると切り替えやすくなります。
• 表示する商品数: 1 つのタブに表示する商品数を選べます（4／8／12／16／24 件）。
• 商品の並び順: デフォルト・新着順・価格順・商品名順などから選べます。
• 売り切れ商品を除外する／「すべて表示」リンク: 在庫切れ商品の非表示や、全商品ページへの導線を設定できます。

レイアウト設定

商品の並べ方やブロック全体の見た目に関する設定です。

• PC／モバイルの列数: PC は 2〜4 列、モバイルは 1〜2 列から選べます。
• カード間の余白／セクションの最大幅／ブロックのスタイル／背景色／上下余白: ブロック全体の見た目を細かく調整できます。

カードデザイン設定

個々の商品カードの見た目や表示情報に関する設定です。

• カードのスタイル／角の丸み／背景色／テキストの揃え: カードの見た目を整えられます。
• 画像の縦横比／表示方法: 自動・正方形・横長・縦長・ワイドから選べ、カバー／コンテインも指定できます。
• ホバー時の拡大・2 枚目画像への切り替え: PC でカーソルを当てたときの動作を設定できます。
• ベンダー表示／レビューの星評価: ブランド名や星評価を表示できます。星評価は Shopify Product Reviews、Judge.me、シンプルレビューなどに対応します。

バッジとアクション設定

セールや NEW などのバッジ、カートに追加・クイックビューといったボタンの動作に関する設定です。

• セールバッジ／NEW バッジ／売り切れバッジ: 割引率やカスタムテキストで商品を目立たせられます。NEW バッジは追加からの日数で自動表示できます。
• メインボタンの動作: 「カートに直接追加」「オプションを選択（クイックビュー）」「商品ページへ移動」から選べます。
• カート追加後のトースト表示／クイックビューボタン: 追加完了のお知らせや、ページ移動なしの商品確認に対応します。

追加設定

さらに細かく見た目を調整したい上級者向けの設定です。このブロック内にのみ適用されるカスタム CSS を入力でき、標準の設定では対応できない細かなデザイン調整を行えます。

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

実際のユースケースに合わせた設定例をいくつかご紹介します。

• トップページの訴求強化: タブを「新着」「セール」「人気」の 3 つに設定し、PC 4 列・モバイル 2 列のグリッド表示に。NEW バッジとセールバッジをオンにして、推し商品を目立たせます。
• 商品ページの関連訴求: 商品ページ下部に「関連カテゴリー」「同じブランド」のタブを設置し、列数を抑えてコンパクトに。クイックビューをオンにすると、ページ遷移なしで他商品を確認してもらえます。
• セール特設の演出: セール期間中だけ「タイムセール」「アウトレット」のタブを追加し、セール色を目立つ色に変更。残り在庫の表示で購買を後押しします。

文言のテンプレ例

• タブ見出し: 「新着」「セール」「人気」「おすすめ」
• 「すべて表示」リンク: 「すべて見る」「もっと見る」
• カート追加ボタン: 「カートに入れる」／追加完了時: 「追加しました」

関連施策との組み合わせ

特集コレクションタブは、ほかの施策と組み合わせることで、より高い効果を発揮します。

• コレクションタブ × おすすめ商品表示: 「人気」「ベストセラー」タブを使って売れ筋を前面に出すことで、初回訪問者の購買ハードルを下げられます。レビューの星評価表示と組み合わせると、社会的証明による後押しも期待できます。
• コレクションタブ × セール訴求: セールバッジや割引率の表示と組み合わせ、「セール」タブをトップに置くことで、値下げ中の商品への注目を集められます。
• コレクションタブ × ナビゲーション強化: メガメニューやコレクションページの並べ替えと併用することで、ストア全体の回遊性を底上げできます。トップでタブ表示を見たお客様を、各コレクションページへスムーズに誘導できます。

このように、コレクションタブによる おすすめ商品表示 は、単体でも効果的ですが、バッジやレビュー、ナビゲーション施策と組み合わせることで、ストアの売上最大化につなげられます。

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

アプリを使わず、テーマのコードでコレクションタブを実装する場合のサンプルを紹介します。

実装の流れ

1. sections フォルダに新しいセクションファイルを作成する
2. Liquid でタブのボタンと商品グリッドを出力する
3. CSS でタブとグリッドの見た目を整える
4. JavaScript でタブの切り替え動作を実装する

HTML（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>{{ product.title }}</p>
              <p>{{ 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;
  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;
}

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));
    });
  });
});

コード実装の注意点

• テーマをアップデートすると、追加したコードが失われたり崩れたりする場合があります。必ずバックアップを取りましょう。
• レスポンシブ対応・アクセシビリティ対応（キーボード操作やスクリーンリーダー）は自分で実装する必要があります。
• バッジ・星評価・カート追加などの機能を追加するには、さらに多くのコードが必要になります。

手軽さと保守性を重視するなら、やはり専用アプリの利用がおすすめです。

運用のコツ

• タブの数は 2〜4 個に絞り、ラベルは短くわかりやすくすると、お客様が切り替えやすくなります。
• 最初のタブには、もっとも見てほしいコレクション（新着やベストセラーなど）を置きましょう。
• 季節やキャンペーンに合わせて、定期的に表示するコレクションを入れ替えると、リピーターにも新鮮に映ります。
• モバイルでの見え方を必ず確認し、列数や余白を調整しましょう。

よくある質問

Q. コーディングの知識がなくても使えますか？
A. はい。管理画面から設定するだけで、コードを書かずにコレクションタブを設置できます。

Q. いくつのコレクションをタブにできますか？
A. 最大 4 つのコレクションをタブで切り替えて表示できます。

Q. トップページ以外にも設置できますか？
A. はい。ホーム・商品・コレクションなど、あらゆるページに設置できます。

Q. レビューの星評価は表示できますか？
A. 表示できます。Shopify Product Reviews、Judge.me、シンプルレビューなどに対応しています。

Q. 料金はいくらですか？
A. Basic Plan 月額 $3.99（または年額 $39.99 で 16% お得）で、7 日間の無料体験が可能です。

Q. カートへの直接追加はできますか？
A. できます。メインボタンの動作を「カートに直接追加」に設定すれば、商品カードから直接カートに追加できます。

まとめ

• 特集コレクションタブは、複数のコレクションをタブで切り替えて表示し、ストアの回遊性と訴求力を高める施策です。
• Shopify の標準機能だけでは実現が難しく、コード編集かアプリ導入のいずれかが必要です。
• 手軽さと保守性を重視するなら、ノーコードで設置できるアプリの利用がおすすめです。
• 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」なら、最大 4 つのコレクションをタブ表示でき、レイアウトやバッジ、星評価まで細かく調整できます。

ぜひ特集コレクションタブを活用して、おすすめ商品をもっと多くのお客様に見てもらいましょう。

参考記事

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

• Shopifyで特集コレクションタブを表示できるアプリについて徹底解説｜ご利用ガイド
• Shopify特集コレクションアプリ22選！コレクションタブでおすすめ商品表示を最適化
• Shopify に特集コレクションタブを設置できるアプリ6選を紹介！
• 【Shopify】特集コレクションをタブで表示できるアプリ5選！おすすめ商品表示でストアを魅力的に