はじめに
2025 年現在、EC 市場は依然として成長を続けており、中でも Shopify を利用する事業者は増加の一途をたどっています。世界規模でのシェア拡大に伴い、日本国内でもショップ運営者が Shopify に注目し、オンラインビジネスをスピーディーに構築するケースが増えてきました。
そんな中、「コレクション一覧」 の見せ方は、ストアの売上を伸ばすうえで意外と見落とされがちなテーマです。商品数が増えてくると、お客様は「どこに何があるのか」が分かりにくくなります。そこで、商品カテゴリー（コレクション）をおしゃれに並べて一覧表示 することで、お客様を目的の商品へスムーズに案内でき、回遊率や購入率の向上につながります。
しかし、残念ながら Shopify のデフォルト機能だけでは、コレクション一覧をデザイン性高く・自由なレイアウトで表示することが難しい のが実情です。そのため、多くの事業者は アプリ を活用し、グリッドやカルーセルなど好みのレイアウトでコレクション一覧を表示できるように工夫しています。
この記事では、
- Shopify のコレクション一覧の基礎
- コレクション一覧を表示するメリット・デメリット
- そして Shopify で コレクション一覧 を表示できる 5 つ のアプリ
をまとめてご紹介します。特に最初にご紹介する 「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」 は、導入・設定ともにシンプルでわかりやすく、5種類のレイアウトから選べる商品カテゴリー表示カルーセルとしても優秀なので、たっぷりのボリュームで丁寧に解説します。ぜひ参考にしてみてください。
コレクション一覧とは？
「コレクション一覧」 とは、Shopify のコレクション（商品カテゴリー）を、トップページなどに複数まとめて並べて表示する見せ方のことです。
Shopify における「コレクション」は、商品をグループ分けするための単位です。たとえば次のようなまとまりが「コレクション」にあたります。
- トップス・ボトムス・アウター といった商品カテゴリー
- 新作・セール・おすすめ といった切り口別のまとめ
- ブランド別・季節別 のまとめ
これらのコレクションを、ただテキストのメニューで並べるのではなく、画像付きのカードでおしゃれに一覧表示 することで、お客様は直感的に「自分が欲しいカテゴリー」を見つけられるようになります。商品カテゴリー表示カルーセルとして横スクロールで見せれば、限られたスペースでも多くのカテゴリーを紹介できます。
Shopify でコレクション一覧を表示するメリットとデメリット
メリット
-
お客様を目的の商品へスムーズに案内できる
商品数が多いストアほど、お客様は迷子になりがちです。コレクション一覧を入口として用意することで、最短ルートでお目当ての商品へ案内でき、離脱を防げます。 -
ストアの品ぞろえがひと目で伝わる
トップページにコレクション一覧を置けば、「このお店にはこんなにたくさんのカテゴリーがある」ということがひと目で伝わります。品ぞろえの豊富さは、それ自体が大きな魅力になります。 -
回遊率・購入率の向上が期待できる
興味のあるカテゴリーから商品ページへ自然に誘導できるため、サイト内の回遊が増え、結果として購入率（CVR）の向上が期待できます。
デメリット
-
デフォルト機能ではデザインの自由度が低い
Shopify の標準機能やテーマのデフォルトセクションでは、レイアウトやカスタマイズの幅が限られており、ブランドの世界観に合わせた表現が難しいことがあります。 -
コード編集には専門知識が必要
思いどおりのデザインを実現しようとテーマのコードを直接編集すると、HTML / CSS / Liquid の知識が必要になり、ミスをするとストア全体の表示が崩れるリスクもあります。
Shopify のデフォルト機能ではコレクション一覧を自由に表示できない
Shopify のテーマには、コレクションを並べるためのセクションが用意されていることもありますが、レイアウトの種類が少なく、カルーセル表示や雑誌風の非対称レイアウトなど、凝った見せ方には対応していない ことがほとんどです。
また、見出しやカード、ボタンの細かいデザイン調整、画像の比率やトリミング位置の指定、PC・モバイル別の列数設定などをデフォルト機能だけで実現するのは困難です。これらを実現するためには、テーマのコードを直接編集するか、専用のアプリを導入する必要があります。
コード編集はリスクとコストが大きいため、まずはアプリで手軽に試してみるのがおすすめ です。次の章から、コレクション一覧を表示できるアプリを5つご紹介します。
Shopify でコレクション一覧を表示できるアプリ 5 選
ここからは、コレクション一覧を表示できるアプリを5個ご紹介します。最初の「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」は特に詳しく解説します。
シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル
はじめに
「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」は、ストアのコレクション（商品カテゴリー）をおしゃれに並べて表示できるアプリです。グリッド・ベント・エディトリアル・カルーセル・スポットライトという5種類のレイアウトから、お店の雰囲気に合ったスタイルを選べます。カテゴリー別に商品を整理して見せることで、お客様をお目当ての商品へスムーズに案内できます。コーディングは一切不要で、テーマに追加するだけですぐにお使いいただけます。
料金：Basic Plan 月額 $3.99（または $39.99/年で16%お得）。インストールから7日間、無料でアプリをお試しいただけます。年払いにすると実質2ヶ月分が無料となり、お得にご利用いただけます。
できること
このアプリを使うと、ストアのコレクションを魅力的なデザインで一覧表示できます。見出しの色やサイズ、カードの背景色、角丸、影、ホバーエフェクトまで細かくカスタマイズできるので、ブランドの世界観に合わせた仕上がりになります。商品数の表示や「もっと見る」ボタンの追加、雑誌風のおしゃれな並べ方も可能です。
コレクションをおしゃれに並べてお客様を案内
カテゴリー別にコレクションを美しく並べることで、お客様をお目当ての商品へ自然に案内できます。トップページにコレクション一覧を置けば、ストアの品ぞろえがひと目で伝わります。
5種類のレイアウトからお好みのスタイルで表示
グリッド・ベント・エディトリアル・カルーセル・スポットライトの5種類から、お店の雰囲気に合ったレイアウトを選べます。整然と並べたいときも、雑誌のように個性的に見せたいときも、思いどおりの表示が叶います。
見出し・カード・ボタンを細かくカスタマイズ
見出しの色やサイズ、カードの背景色・角丸・影、ボタンのスタイルなどを細かく調整できます。ブランドの世界観に合わせて、細部までこだわった見た目に仕上げられます。
画像比率やトリミング位置も自由に設定
画像の比率（正方形・横長・縦長・ワイド）や、トリミング位置（中央・上・下・左・右）を自由に設定できます。コレクション画像をきれいに見せたいときに便利です。
1クリックでテーマに追加できる
アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、簡単にコレクション一覧を設置できます。コーディングの知識は一切不要です。
アプリのインストール
まずはアプリをインストールしましょう。下記のリンクからアプリストアへアクセスできます。
👉 シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル
-
Shopify 管理画面の左下にある「設定」をクリックします。
-
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
-
検索窓にアプリ名を入力し、表示されたアプリをクリックします。
-
アプリ詳細画面で「インストール」をクリックします。
-
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。
アプリブロックをテーマに追加
アプリのインストールが完了したら、コレクション一覧をストアに表示するためにアプリブロックをテーマに追加します。手軽に設置したい場合は、1クリック追加がおすすめです。
-
アプリの管理画面を開きます。
-
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
-
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
特定のページの好きな位置に設置したい場合は、テーマエディタから手動で追加することもできます。「オンラインストア」→「テーマ」→「カスタマイズ」を開き、追加したいページで「セクションを追加」または「ブロックを追加」から「アプリ」タブを選んでアプリブロックを配置します。
アプリ設定
テーマエディタでアプリブロックを選択すると、右側に設定パネルが表示されます。ここでコレクション一覧の見た目や動きを細かく調整できます。
コレクションと見出しの設定
一覧に表示するコレクションと、その上に表示する見出しに関する設定です。表示したいコレクションを最大20件まで選択でき、見出しのテキスト・タグ（H1〜P）・文字サイズ・色・配置・下の余白を調整できます。
レイアウト設定
コレクションの並べ方や画像の見せ方を決める、デザインの要となる設定です。レイアウトは次の5種類から選べます。
- グリッド（整然と並べる）：すべてのカードを同じ大きさで規則正しく並べます。
- ベント（大小タイルのモザイク）：大小のタイルを組み合わせたモザイク状の配置です。動きのある印象になります。
- エディトリアル（雑誌風の非対称）：雑誌のような非対称のおしゃれなレイアウトです。
- カルーセル（横スクロール）：横スクロールで切り替えて見せます。多くのコレクションをコンパクトに表示したいときに便利です。
- スポットライト（主役1枚 + サブ）：1枚を大きく主役として見せ、残りをサブとして配置します。
このほか、PC 列数（2〜6列）・モバイル列数（1〜3列）・カード間の余白・画像の比率・トリミング位置・商品ゼロのコレクションの自動非表示・カルーセルの自動再生間隔などを設定できます。
テキスト設定
各コレクションのカードに表示する文字に関する設定です。コレクション名の表示・文字サイズ・色・配置、商品数の表示・色などを調整できます。品ぞろえの豊富さをアピールしたいときは、商品数の表示が便利です。
カード設定
コレクションを表示する各カードの見た目に関する設定です。カードの背景色・角丸（0〜24px）・影（なし／小／中／大）・ホバーエフェクト（なし／画像ズーム／カードが浮く）を調整できます。立体感を出してカードを目立たせたいときに効果的です。
ボタン設定
各コレクションのカードに「もっと見る」ボタンを追加できます。ボタンの表示・文言・スタイル（塗りつぶし／アウトライン／テキストのみ）・背景色・文字色・枠線の丸みを設定できます。
さらに細かくデザインを調整したい場合は、このブロック内にのみ適用される「追加の CSS」を入力することもできます。
おわりに
「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」は、5種類のレイアウトから選べて、見出し・カード・ボタンまで細かくカスタマイズできるコレクション一覧アプリです。コーディング不要でワンクリックでテーマに追加でき、商品カテゴリー表示カルーセルとしても優秀です。コレクション一覧の導入を検討しているなら、まず最初に試していただきたいアプリです。
👉 シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル
EasyBoost:Carousel, Collection
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | EasyBoost:Carousel, Collection |
| 開発者 | ShopiDevs |
| 価格設定 | 無料プランあり／Premium Plan $9.99/月 |
| 主な機能・特徴 | スライダー・グリッド・ルックブック・タブで商品やコレクションを表示、バンドルや関連商品でAOV向上、カウントダウンタイマー、28以上のテンプレート |
| 対応言語 | 英語 |
| 評価 | ★★★★★（5.0／43件） |
ワンポイント解説
EasyBoost は、コレクション一覧の表示だけでなく、商品スライダーやルックブック、バンドル、カウントダウンタイマーなど、ストアの売上アップに役立つ機能を幅広く備えたオールインワン型のアプリです。28以上のテンプレートが用意されているため、コーディングなしで素早く魅力的なセクションを作れます。コレクションをスライダーやグリッド、タブで見せられるので、商品カテゴリー表示カルーセルとしても活用できます。「コレクション一覧だけでなく、関連商品やアップセル施策もまとめて導入したい」という方に向いています。無料プランから始められるのも嬉しいポイントです。
Stamp ‑ Variants on Collection
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Stamp ‑ Variants on Collection |
| 開発者 | Sezerium |
| 価格設定 | 無料プランあり／Eco $4・Standard $12・Advanced $24/月 |
| 主な機能・特徴 | コレクションページでバリエーションを個別商品として表示、価格帯の表示、在庫切れバリエーションの非表示、バリエーションごとのカート追加、コレクション別の表示設定 |
| 対応言語 | 日本語、英語、ほか多数 |
| 評価 | ★★★★★（5.0／128件） |
ワンポイント解説
Stamp は、コレクションページで商品のバリエーション（色・サイズなど）を「それぞれ別の商品」として表示できるアプリです。たとえば1つの商品に複数のカラーがある場合、カラーごとにカードを分けて表示できるため、お客様は一覧から直接お目当てのバリエーションを選べます。価格帯（プライスレンジ）の表示や、在庫切れバリエーションの自動非表示、バリエーションごとの「カートに追加」ボタンにも対応しています。日本語を含む多言語に対応しているのも安心です。「バリエーションの豊富さをコレクション一覧でアピールしたい」アパレル系ストアなどに特に向いています。
Supergrid Collections ‑ Depict
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Supergrid Collections ‑ Depict |
| 開発者 | Depict |
| 価格設定 | 無料プランあり／Basic $100・Essentials $250・Pro $500/月 |
| 主な機能・特徴 | グリッド内に画像・動画を埋め込み、ドラッグ＆ドロップ並べ替え、AI ソートルール、ライブプレビュー、コレクション分析 |
| 対応言語 | 英語 |
| 評価 | ★★★★☆（4.5／44件） |
ワンポイント解説
Supergrid Collections は、コレクションページを「ルックブック風」に美しく演出できる、ビジュアルマーチャンダイジングに特化したアプリです。商品グリッドの中にバナー画像やキャンペーン動画を埋め込めるため、ストーリー性のある見せ方で回遊率や購入率を高められます。ドラッグ＆ドロップで商品を並べ替えたり、AI による自動ソートと手動ソートを組み合わせたりできるのも強みです。料金はやや高めですが、その分本格的な機能が揃っています。「コレクションページのデザインに徹底的にこだわりたい」ブランドや、セッション数の多い中〜大規模ストアに向いています。
Smart Collection Pro
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Smart Collection Pro |
| 開発者 | BazaarForge |
| 価格設定 | Starter $4.80・Growth $9.80・Advanced $19.80・Enterprise $32.80/月 |
| 主な機能・特徴 | 無制限の条件で自動コレクションを作成、コレクションのネスト階層、AND/OR条件での自動化、コレクションページのパンくずリスト |
| 対応言語 | 日本語、英語、ほか多数 |
| 評価 | ★★★★★（5.0／8件） |
ワンポイント解説
Smart Collection Pro は、Shopify のコレクション数の制限を打破し、無制限の条件で自動コレクションを作成できるアプリです。最大の特徴は「コレクションのネスト（階層構造）」に対応している点で、親コレクションの条件を引き継いだサブコレクションを作れるため、複雑なカテゴリー構成もスッキリ整理できます。AND/OR の高度な条件で商品を動的に割り当てられ、ストアの変化に応じて自動更新されます。コレクションページにパンくずリストを表示できるのも便利です。日本語にも対応しています。「カテゴリー構造が複雑で、自動でコレクションを整理・管理したい」中〜大規模ストアに向いています。
まとめ
今回は、Shopify でコレクション一覧を表示できるアプリを5つご紹介しました。
- シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル：5種類のレイアウトから選べて、見出し・カード・ボタンまで細かくカスタマイズできる。コーディング不要で手軽。
- EasyBoost:Carousel, Collection：スライダーやルックブックなど、売上アップ機能をまとめて導入できるオールインワン型。
- Stamp ‑ Variants on Collection：コレクションページでバリエーションを個別商品として表示できる。
- Supergrid Collections ‑ Depict：ルックブック風の本格的なビジュアルマーチャンダイジングが可能。
- Smart Collection Pro：無制限・階層構造の自動コレクション作成に強い。
どのアプリも特徴がありますが、「まずは手軽に、おしゃれなコレクション一覧を導入したい」 という方には、最初にご紹介した 「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」 が最もおすすめです。ノーコードでワンクリックでテーマに追加でき、5種類のレイアウトと豊富なカスタマイズで、ブランドに合ったコレクション一覧をすぐに実現できます。