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

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

はじめに

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

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

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

記事の構成

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

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

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

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

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

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

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

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

テーマのコードを編集して実装する方法
Liquid・CSS・JavaScript を自分で記述し、タブ切り替えのセクションを作成します。自由度は高い一方で、専門知識が必要です。
アプリを導入して実装する方法
専用アプリをインストールし、管理画面から設定するだけでコレクションタブを設置できます。コードを書く必要がなく、初めての方でも手軽に導入できます。

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

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

メリット

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

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

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

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

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

デメリット

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

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

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

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

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

アプリを導入する方法

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

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

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

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

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

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
検索窓にアプリ名「シンプル特集コレクションタブ」を入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

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

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

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

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

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

テーマエディタでブロックを選択すると、右側の設定パネルから細かくカスタマイズできます。設定は大きく 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 バッジとセールバッジをオンにして、推し商品を目立たせます。
商品ページの関連訴求: 商品ページ下部に「関連カテゴリー」「同じブランド」のタブを設置し、列数を抑えてコンパクトに。クイックビューをオンにすると、ページ遷移なしで他商品を確認してもらえます。
セール特設の演出: セール期間中だけ「タイムセール」「アウトレット」のタブを追加し、セール色を目立つ色に変更。残り在庫の表示で購買を後押しします。

文言のテンプレ例

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

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

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

実装の流れ

sections フォルダに新しいセクションファイルを作成する
Liquid でタブのボタンと商品グリッドを出力する
CSS でタブとグリッドの見た目を整える
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));
    });
  });
});