Shopifyでコレクション一覧を表示する方法｜商品カテゴリー表示カルーセルでストアを魅力的にするアプリも紹介

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

はじめに

Shopify でストアを運営していると、「商品は増えてきたのに、お客様が目的の商品にたどり着けていない気がする」と感じることはありませんか。商品数が増えるほど、トップページから何をどう見せるかが、売上を左右する重要なポイントになります。

そこで効果的なのが、コレクション一覧 の表示です。コレクション（商品カテゴリー）を画像付きのカードでおしゃれに並べることで、お客様を目的の商品へスムーズに案内できます。横スクロールの 商品カテゴリー表示カルーセル にすれば、限られたスペースでも多くのカテゴリーを魅力的に紹介できます。

この記事では、Shopify でコレクション一覧を表示する方法を、メリット・デメリットから具体的な実装手順まで丁寧に解説します。コーディングで実装する方法と、アプリを使って手軽に実装する方法の両方を比較し、おすすめのアプリ「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」の設定手順も詳しくご紹介します。

記事の構成

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

Shopify でコレクション一覧を表示できるのか
コレクション一覧を表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」の紹介
アプリのインストール・設定手順
テーマのコード編集で実装する場合のサンプルコード
関連施策との組み合わせ
よくある質問とまとめ

Shopify でコレクション一覧を表示できる？

結論から言うと、Shopify でコレクション一覧を表示することは可能 です。実現方法は大きく分けて2つあります。

テーマのコードを編集して実装する方法：Liquid・HTML・CSS・JavaScript を使って、自分でコレクション一覧を作り込む方法です。自由度は高いものの、専門知識が必要です。
アプリを導入して実装する方法：専用アプリをインストールし、管理画面の設定だけでコレクション一覧を表示する方法です。コーディング不要で、デザインの調整も簡単です。

テーマによっては標準でコレクションを並べるセクションが用意されている場合もありますが、レイアウトの種類が少なかったり、カルーセル表示や雑誌風レイアウトに対応していなかったりと、思いどおりの見せ方ができないことが少なくありません。次の章で、それぞれの方法のメリット・デメリットを詳しく見ていきましょう。

コレクション一覧を表示するメリット・デメリット

メリット

お客様を目的の商品へスムーズに案内できる

商品数が多いストアほど、お客様は「どこに何があるのか」が分からず迷子になりがちです。コレクション一覧を入口として用意することで、最短ルートでお目当ての商品へ案内でき、離脱を防げます。

カテゴリーから直感的に商品ページへ移動できる
検索やメニューを使わなくても目的の商品にたどり着ける

ストアの品ぞろえがひと目で伝わる

トップページにコレクション一覧を置けば、「このお店にはこんなにたくさんのカテゴリーがある」ということがひと目で伝わります。品ぞろえの豊富さは、それ自体が大きな魅力になり、お客様の購買意欲を高めます。

回遊率・購入率の向上が期待できる

興味のあるカテゴリーから商品ページへ自然に誘導できるため、サイト内の回遊が増え、結果として購入率（CVR）の向上が期待できます。

ブランドの世界観を演出できる

画像やレイアウト、配色を工夫することで、コレクション一覧そのものがブランドのビジュアル表現になります。雑誌風の非対称レイアウトやカルーセルを使えば、洗練された印象を与えられます。

デメリット

デフォルト機能ではデザインの自由度が低い

Shopify の標準機能やテーマのデフォルトセクションでは、レイアウトやカスタマイズの幅が限られており、ブランドの世界観に合わせた表現が難しいことがあります。

コード編集には専門知識とリスクが伴う

思いどおりのデザインを実現しようとテーマのコードを直接編集すると、HTML / CSS / Liquid の知識が必要になります。ミスをするとストア全体の表示が崩れるリスクもあり、テーマのアップデートでコードが上書きされる可能性もあります。

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

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

メリット
- 完全に自由なデザイン・レイアウトを実現できる
- 追加の月額費用がかからない
デメリット
- Liquid・HTML・CSS・JavaScript の知識が必要
- 実装・調整に時間がかかる
- テーマ更新でコードが上書きされるリスクがある
- レイアウト切り替えや細かい設定変更のたびにコード修正が必要

アプリを導入する方法

メリット
- コーディング不要で、管理画面の設定だけで完結する
- レイアウトやデザインを簡単に切り替えられる
- ワンクリックでテーマに追加でき、すぐに使い始められる
- サポートやアップデートが受けられる
デメリット
- 月額の利用料金がかかる（多くは数ドル程度）

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

コード編集は自由度が高い一方で、工数とリスクが大きくなります。一方アプリは、月額数ドルの手頃な料金で、コーディングなしにおしゃれなコレクション一覧をすぐに実現できます。まずはアプリで小さく試して、効果を確認してから本格的に作り込む という進め方が、もっとも失敗が少なくおすすめです。

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

まずはアプリをインストールしましょう。

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

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

アプリのインストールが完了したら、コレクション一覧をストアに表示するためにアプリブロックをテーマに追加します。

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

特定のページの好きな位置に設置したい場合は、「オンラインストア」→「テーマ」→「カスタマイズ」を開き、追加したいページで「セクションを追加」または「ブロックを追加」から「アプリ」タブを選んでアプリブロックを配置します。

オンラインストアのテーマ一覧で「カスタマイズ」ボタンが表示された画面

「アプリ」タブに本アプリのブロックが表示された画面

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

テーマエディタでアプリブロックを選択すると、右側に設定パネルが表示されます。ここでコレクション一覧の見た目や動きを細かく調整できます。

コレクションと見出しの設定

一覧に表示するコレクションを最大20件まで選択でき、見出しのテキスト・タグ（H1〜P）・文字サイズ・色・配置・下の余白を調整できます。「カテゴリーから探す」「人気のコレクション」など、お客様に分かりやすい見出しを入れると効果的です。

コレクションと見出しの設定画面

レイアウト設定

コレクションの並べ方や画像の見せ方を決める、デザインの要となる設定です。PC 列数（2〜6列）・モバイル列数（1〜3列）・カード間の余白・画像の比率・トリミング位置・商品ゼロのコレクションの自動非表示・カルーセルの自動再生間隔などを設定できます。

レイアウト設定の設定画面

テキスト設定

各コレクションのカードに表示する文字に関する設定です。コレクション名の表示・文字サイズ・色・配置、商品数の表示・色などを調整できます。品ぞろえの豊富さをアピールしたいときは、商品数の表示が便利です。

テキスト設定の設定画面

カード設定

カードの背景色・角丸（0〜24px）・影（なし／小／中／大）・ホバーエフェクト（なし／画像ズーム／カードが浮く）を調整できます。立体感を出してカードを目立たせたいときに効果的です。

カード設定の設定画面

ボタン設定

各コレクションのカードに「もっと見る」ボタンを追加できます。ボタンの表示・文言・スタイル（塗りつぶし／アウトライン／テキストのみ）・背景色・文字色・枠線の丸みを設定できます。

ボタン設定の設定画面

さらに細かくデザインを調整したい場合は、このブロック内にのみ適用される「追加の CSS」を入力することもできます。

追加設定の設定画面

5種類のレイアウトの使い分け

このアプリの大きな魅力は、5種類のレイアウトを設定ひとつで切り替えられることです。それぞれの特徴と、向いているストアをご紹介します。

グリッド（整然と並べる）

すべてのカードを同じ大きさで規則正しく並べるレイアウトです。きちんとした印象を与えたいときや、すべてのコレクションを平等に見せたいときに向いています。PC 列数を2〜6列で調整できます。

グリッドレイアウトのプレビュー

TODO: 画像を入れる（グリッドレイアウトのプレビュー画面のキャプチャ）

ベント（大小タイルのモザイク）

大小のタイルを組み合わせたモザイク状の配置です。動きのある印象になり、単調になりがちなコレクション一覧に variety を加えられます。

TODO: 画像を入れる（ベントレイアウトのプレビュー画面のキャプチャ）

エディトリアル（雑誌風の非対称）

雑誌のような非対称のおしゃれなレイアウトです。ブランドの世界観を演出したいアパレルや雑貨のストアに向いています。なお、エディトリアルでは背景は常に透明、角丸は画像枠のみに適用されます。

TODO: 画像を入れる（エディトリアルレイアウトのプレビュー画面のキャプチャ）

カルーセル（横スクロール）

横スクロールで切り替えて見せるレイアウトです。多くのコレクションをコンパクトに表示したいときに便利で、商品カテゴリー表示カルーセルとして活用できます。自動再生の間隔（0〜10秒）も設定でき、マウスを乗せたときやタブが非表示のときは自動で停止します。

TODO: 画像を入れる（カルーセルレイアウトのプレビュー画面のキャプチャ）

スポットライト（主役1枚 + サブ）

1枚を大きく主役として見せ、残りをサブとして配置するレイアウトです。注目させたいコレクション（新作や目玉セールなど）があるときにおすすめです。

TODO: 画像を入れる（スポットライトレイアウトのプレビュー画面のキャプチャ）

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

ストアのタイプ別に、おすすめの設定例をご紹介します。

アパレル・雑貨ストアの場合

レイアウト：エディトリアル（雑誌風の非対称）またはベント
画像比率：縦長（3:4）
ホバーエフェクト：画像ズーム
見出し：「Collection」「Categories」など英語表記でおしゃれに

ブランドの世界観を重視するストアでは、雑誌風のレイアウトと縦長画像の組み合わせが映えます。

商品点数の多い総合ストアの場合

レイアウト：カルーセル（横スクロール）
PC 列数：4〜5列
商品数を表示：オン
自動再生の間隔：4秒

多くのカテゴリーをコンパクトに見せたい場合は、カルーセルがおすすめです。商品数を表示すれば、品ぞろえの豊富さもアピールできます。

シンプルにまとめたいストアの場合

レイアウト：グリッド（整然と並べる）
PC 列数：3列／モバイル列数：2列
影：小
角丸：12px

すっきりとした印象にまとめたい場合は、グリッドに控えめな影と角丸を組み合わせると上品に仕上がります。

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

アプリを使わず、テーマのコードを直接編集してコレクション一覧を実装する方法もご紹介します。

実装の流れ

テーマのセクションファイルに Liquid + HTML を追加する
CSS でカードのデザインを整える
カルーセルにしたい場合は JavaScript を追加する

HTML（Liquid）を追加

セクションファイルに、collections をループしてカードを並べる Liquid コードを追加します。

{% comment %} コレクション一覧を表示するセクション {% endcomment %}
<section class="ur-collection-list">
  <h2 class="ur-collection-list__heading">カテゴリーから探す</h2>
  <div class="ur-collection-list__grid">
    {% for collection in collections limit: 12 %}
      {% if collection.products_count > 0 %}
        <a href="{{ collection.url }}" class="ur-collection-card">
          {% if collection.image %}
            <img
              src="{{ collection.image | image_url: width: 600 }}"
              alt="{{ collection.title | escape }}"
              loading="lazy"
              width="600"
              height="600"
            >
          {% endif %}
          <span class="ur-collection-card__title">{{ collection.title }}</span>
          <span class="ur-collection-card__count">{{ collection.products_count }} 商品</span>
        </a>
      {% endif %}
    {% endfor %}
  </div>
</section>

collection.products_count > 0 の条件を入れることで、商品がゼロのコレクションを自動的に非表示にできます。

CSS を追加

カードを整然と並べ、ホバー時に少し浮き上がる動きを付ける CSS の例です。

.ur-collection-list__heading {
  text-align: center;
  font-size: 24px;
  margin-bottom: 24px;
}

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

.ur-collection-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ur-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ur-collection-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ur-collection-card__title {
  padding: 8px 12px 0;
  font-size: 15px;
  font-weight: 600;
}

.ur-collection-card__count {
  padding: 0 12px 12px;
  font-size: 12px;
  color: #888;
}

JavaScript を追加

カルーセル（横スクロール）にしたい場合は、グリッドを横並びにしたうえで、自動スクロールの JavaScript を追加します。

// コレクションカルーセルの自動スクロール
document.addEventListener('DOMContentLoaded', () => {
  const grid = document.querySelector('.ur-collection-list__grid');
  if (!grid) return;

  let timer = setInterval(scroll, 3000);

  function scroll() {
    grid.scrollBy({ left: 220, behavior: 'smooth' });
    if (grid.scrollLeft + grid.clientWidth >= grid.scrollWidth - 1) {
      grid.scrollTo({ left: 0, behavior: 'smooth' });
    }
  }

  // マウスを乗せている間は停止
  grid.addEventListener('mouseenter', () => clearInterval(timer));
  grid.addEventListener('mouseleave', () => {
    timer = setInterval(scroll, 3000);
  });
});

コード実装の注意点

テーマのアップデートでコードが上書きされる可能性があるため、必ずバックアップを取りましょう。
レイアウトを切り替えたり、設定項目を増やしたりするたびにコードの修正が必要になります。
表示崩れやレスポンシブ対応の検証にも時間がかかります。

これらの手間やリスクを避けたい場合は、やはりアプリの利用がおすすめです。「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」なら、これらの設定をすべて管理画面から行えます。

運用のコツ

見出しは分かりやすく：「カテゴリーから探す」「人気のコレクション」など、ひと目で内容が伝わる言葉を選びましょう。
表示順を工夫する：人気カテゴリーや今押したいカテゴリーを先頭に置くと効果的です。
画像のトーンを揃える：コレクション画像の雰囲気や明るさを揃えると、一覧全体が洗練された印象になります。
季節やセールに合わせて更新する：表示するコレクションや並び順を定期的に見直すことで、常に新鮮な印象を与えられます。

よくある質問

Q. コーディングの知識がなくても使えますか？
A. はい。「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」は、ワンクリックでテーマに追加でき、設定もすべて管理画面から行えます。コーディングの知識は一切不要です。

Q. トップページ以外にも設置できますか？
A. はい。テーマエディタから、好きなページの好きな位置にアプリブロックを追加できます。

Q. スマホでも見やすく表示されますか？
A. はい。PC・モバイル別に列数を設定できるため、どのデバイスでも見やすく表示できます。

Q. 商品が登録されていないコレクションを隠せますか？
A. はい。「商品ゼロのコレクションを非表示」を有効にすると、商品数が0のコレクションを自動でスキップできます。

Q. 無料で試せますか？
A. はい。インストールから7日間の無料体験が可能です。

Q. カルーセルの自動再生は止められますか？
A. はい。自動再生の間隔を0秒に設定すると無効になります。また、マウスを乗せたときやタブが非表示のときは自動で停止します。

まとめ

この記事では、Shopify でコレクション一覧を表示する方法について解説しました。

コレクション一覧は、お客様を目的の商品へ案内し、回遊率・購入率の向上に効果的
実装方法はコード編集とアプリ導入の2つ。手軽さと安全性からアプリ導入がおすすめ
「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」なら、5種類のレイアウトと豊富なカスタマイズで、コーディングなしにおしゃれなコレクション一覧を実現できる
月額 $3.99、7日間の無料体験あり

コレクション一覧や商品カテゴリー表示カルーセルの導入を検討している方は、ぜひ一度お試しください。

👉 シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル

ブログTOP お問い合わせ