2026/05/25

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

@ 信条刃

Shopify

今回の記事は Shopify App Store で提供されている、コレクション一覧アプリについての記事です。商品カテゴリー表示カルーセルなど、コレクションをおしゃれに見せるためのアプリをまとめてご紹介します。

コレクション一覧とは

コレクション一覧とは、Shopify のコレクション（商品カテゴリー）を、トップページなどに複数まとめて並べて表示する見せ方のことです。

Shopify における「コレクション」は、商品をグループ分けするための単位です。「トップス」「アウター」「セール」「新作」といったまとまりがコレクションにあたります。これらのコレクションを画像付きのカードでおしゃれに一覧表示することで、お客様は直感的に欲しいカテゴリーを見つけられるようになります。商品数が多いストアほど、こうした「入口」を整えることが回遊率や購入率の向上につながります。

横スクロールで切り替える「カルーセル」形式で見せれば、限られたスペースでも多くのカテゴリーを紹介できるため、商品カテゴリー表示カルーセルとしての活用も人気です。

コレクション一覧を導入する利点

お客様を目的の商品へスムーズに案内できる
コレクション一覧を入口として用意することで、商品数が多くてもお客様が迷子になりにくくなり、最短ルートでお目当ての商品へ案内できます。
ストアの品ぞろえがひと目で伝わる
トップページにコレクション一覧を置けば、「こんなにたくさんのカテゴリーがある」ということがひと目で伝わり、品ぞろえの豊富さをアピールできます。
回遊率・購入率の向上が期待できる
興味のあるカテゴリーから商品ページへ自然に誘導できるため、サイト内の回遊が増え、購入率の向上が期待できます。
ブランドの世界観を演出できる
画像やレイアウト、配色を工夫することで、コレクション一覧そのものがブランドのビジュアル表現になります。
スマホでも見やすく整理できる
PC・モバイル別に列数やレイアウトを最適化することで、どのデバイスでも見やすいカテゴリー導線を作れます。
季節やキャンペーンに合わせて柔軟に切り替えられる
表示するコレクションや並び順をいつでも変更できるため、季節商品やセールに合わせた訴求がしやすくなります。

コレクション一覧アプリの選び方

コレクション一覧アプリを選ぶ際は、以下のポイントを確認しましょう。

レイアウトの種類が豊富か（グリッド・カルーセル・雑誌風など）
見出し・カード・ボタンなどのデザインを細かくカスタマイズできるか
PC・モバイル別の表示設定ができるか
日本語に対応しているか
料金が予算に合っているか、無料体験があるか

ストアの規模やデザインのこだわり度合いによって、最適なアプリは変わります。まずは無料体験を活用して、自分のストアに合うかどうかを試してみるのがおすすめです。

テーマのコードでコレクション一覧を実装する場合のサンプルコード

アプリを使わず、テーマのコードを直接編集してコレクション一覧を実装することもできます。ここでは、Liquid・CSS を使ったシンプルなグリッド表示の例をご紹介します。

まず、表示したいセクションに以下の Liquid コードを追加します。collections オブジェクトをループして、各コレクションの画像とタイトルをカードとして並べます。

{% comment %} コレクション一覧をグリッド表示するシンプルな例 {% endcomment %}
<div class="collection-grid">
  {% for collection in collections limit: 8 %}
    <a href="{{ collection.url }}" class="collection-card">
      {% if collection.image %}
        <img
          src="{{ collection.image | image_url: width: 600 }}"
          alt="{{ collection.title | escape }}"
          loading="lazy"
          width="600"
          height="600"
        >
      {% endif %}
      <h3 class="collection-card__title">{{ collection.title }}</h3>
      <p class="collection-card__count">{{ collection.products_count }} 商品</p>
    </a>
  {% endfor %}
</div>

次に、カードを整然と並べるための CSS を追加します。grid を使うことで、画面幅に応じて自動的に列数が調整されます。

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.collection-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.collection-card:hover {
  transform: translateY(-4px);
}

.collection-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.collection-card__title {
  margin: 8px 0 4px;
  font-size: 16px;
}

.collection-card__count {
  margin: 0;
  font-size: 13px;
  color: #888;
}

カルーセル（横スクロール）にしたい場合は、grid の代わりに display: flex と overflow-x: auto を使い、JavaScript で自動再生やボタン操作を追加します。

// カルーセルの簡単な自動スクロール例
const carousel = document.querySelector('.collection-grid');
if (carousel) {
  setInterval(() => {
    carousel.scrollBy({ left: 240, behavior: 'smooth' });
    // 端まで来たら先頭に戻す
    if (carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth) {
      carousel.scrollTo({ left: 0, behavior: 'smooth' });
    }
  }, 3000);
}

このように、コードを書けば自由にカスタマイズできますが、レイアウトの種類を増やしたり、見出し・カード・ボタンの細かい設定を管理画面から行えるようにするには、相応の開発工数が必要です。テーマのアップデートでコードが上書きされるリスクもあるため、手軽に・安全に導入したい場合はアプリの利用がおすすめ です。

価格比較

各アプリの料金とおもな特徴をまとめます。

シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル：Basic Plan $3.99/月。5種類のレイアウトと豊富なカスタマイズでコレクションをおしゃれに表示。
EX Show Variants on Collection：$4.99〜$19.99/月。コレクションページでバリエーションを別商品として表示。
Jedi ‑ Collection Sort Pro：無料〜$49/月。商品の並べ替え自動化とコレクション分析。
Collection Sort & Category |KX：$19〜$299/月。AI コレクションソートとパーソナライズドレコメンド。
OT | Collection Sort & Manage：無料〜$29.99/月。50以上の並べ替えオプションとコレクション管理。
Sort'd ‑ Prime Collection Sort：無料〜$70/月。ドラッグ＆ドロップのマーチャンダイザーと分析。

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

各アプリの日本語対応状況をまとめます。

シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル：日本語対応（国産アプリ）
EX Show Variants on Collection：日本語未対応（英語）
Jedi ‑ Collection Sort Pro：日本語未対応（英語）
Collection Sort & Category |KX：日本語未対応（英語）
OT | Collection Sort & Manage：日本語未対応（英語）
Sort'd ‑ Prime Collection Sort：日本語未対応（英語）

使いやすさ

今回ご紹介した中で、最もおすすめなのは 「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」 です。

並べ替えや分析に特化したアプリは高機能ですが、その多くは英語のみの対応で、設定がやや複雑です。一方このアプリは、日本語に対応していて、コーディング不要で5種類のレイアウトからおしゃれなコレクション一覧をすぐに作れる のが大きな魅力です。料金も月額 $3.99 と手頃で、7日間の無料体験もあります。「とにかく手軽に、見た目の良いコレクション一覧を導入したい」という方に最適です。

終わりに

コレクション一覧は、ストアの品ぞろえをひと目で伝え、お客様を目的の商品へ案内するための重要な要素です。アプリを使えば、コーディングなしでおしゃれなコレクション一覧や商品カテゴリー表示カルーセルを手軽に導入できます。

まずは無料体験から、自分のストアに合うアプリを見つけてみてください。

@ 信条刃

Shopify

サイトTOP お問い合わせ

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

コレクション一覧とは

コレクション一覧を導入する利点

コレクション一覧アプリの選び方

おすすめのコレクション一覧 Shopify アプリ

シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル ☆ 迷ったらこれ

特徴・機能

価格設定

EX Show Variants on Collection

特徴・機能

価格設定

Jedi ‑ Collection Sort Pro

特徴・機能

価格設定

Collection Sort & Category |KX

特徴・機能

価格設定

OT | Collection Sort & Manage

特徴・機能

価格設定

Sort'd ‑ Prime Collection Sort

特徴・機能

価格設定

テーマのコードでコレクション一覧を実装する場合のサンプルコード

価格比較

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

使いやすさ

終わりに

最新の記事

目次

関連タグ

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

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

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

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

Shopify にポイントプログラムを設置できる会員ポイントアプリ6選を紹介！

ShopifyでCSV注文作成・一括注文インポートができるアプリ6選を紹介！