Shopifyのコレクション一覧の表示方法｜業種別の商品カテゴリー表示カルーセル設定とアプリ・コード実装ガイド

目次

• はじめに
• その前に押さえておきたいコレクションの2つの仕様
• まず知っておきたい：無料テーマだけでどこまで表示できる？
• ユースケース別：あなたのストアに合うコレクション一覧の見せ方
  • アパレル・雑貨ストア：世界観で見せたいなら雑誌風レイアウト
  • 商品点数の多い総合ストア：カルーセルで多カテゴリーを一望させる
  • シンプルにまとめたい小規模ストア：標準グリッドで十分なケース
  • 注目商品を訴える期間限定・セール運用：スポットライトで1枚を主役に
• レイアウトとストアの対応をまとめると
• アプリで実装する：「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」
  • アプリの基本情報
  • できること
• アプリのインストール手順
• アプリをテーマに追加（有効化）
• 設定項目をユースケースに落とし込む
  • コレクションと見出しの設定
  • レイアウト設定
  • テキスト設定
  • カード設定
  • ボタン設定
• 5種類のレイアウトを設定ひとつで切り替える
  • グリッド（整然と並べる）
  • ベント（大小タイルのモザイク）
  • エディトリアル（雑誌風の非対称）
  • カルーセル（横スクロール）
  • スポットライト（主役1枚 + サブ）
• コードで実装する：テーマを直接編集する場合のサンプル
  • 実装の流れ
  • HTML（Liquid）を追加
  • CSS を追加
  • JavaScript を追加
  • コード実装で気をつけたいこと
• コレクション一覧を活かす周辺施策
  • 商品カテゴリー表示カルーセルとバナーの併用
  • コレクションページの並べ替えとの組み合わせ
  • 検索・フィルター機能との併用
• 運用のコツ
• よくある質問
• まとめ
• 参考記事

はじめに

Shopify のコレクション一覧をどう見せるかは、ストアの業種や品ぞろえによって最適解が変わります。アパレルなら雑誌のような世界観、総合ストアなら多くのカテゴリーを一度に見せる商品カテゴリー表示カルーセル、小規模ストアならすっきり整ったグリッド、というように、同じ「コレクション一覧」でも向いている見せ方は別物です。

この記事は、Shopify のコレクション一覧の表示方法を業種・店舗規模・運用体制ごとのユースケースから整理します。「うちのストアならどの見せ方が合うのか」「無料テーマの標準機能だけでどこまでできるのか」「コレクション 表示 方法はアプリとコードのどちらを選ぶべきか」という疑問に、具体的な設定値と実装例で答えていきます。あわせて、コーディングなしでレイアウトを切り替えられるアプリ「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」の設定手順と、テーマのコードを直接編集する場合のサンプルコードも紹介します。

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

• Shopifyにコレクション一覧を設置できるアプリ6選を紹介！商品カテゴリー表示カルーセルでストアを魅力的に
• Shopifyでコレクション一覧を表示できるアプリ5選！商品カテゴリー表示カルーセルでストアを魅力的に
• Shopifyでコレクション一覧や商品カテゴリーのカルーセルを表示するアプリについて徹底解説｜ご利用ガイド

その前に押さえておきたいコレクションの2つの仕様

ユースケースの話に入る前に、見せ方の自由度を左右する2つの仕様を確認しておきます。ここを誤解したまま設計を始めると、後から手戻りが発生しやすい部分です。

1つ目は、Shopify のコレクションには 自動コレクション と 手動コレクション の2種類があり、作成後にこの種別を切り替えられない（不可逆）という点です。自動はタグ・価格・在庫などの条件で商品を自動的に振り分け、手動は商品を1つずつ指定します。途中で「やはり条件で自動化したい」と思っても作り直しになるため、扱う商品数や更新頻度から先に種別を決めておくと安全です。

2つ目は、Shopify のコレクションには本来 親子の階層構造 が存在しないことです。「大カテゴリー > 中カテゴリー > 小カテゴリー」のようなツリーは標準では作れず、表現したい場合は「オンラインストア > メニュー」でメニュー項目をドラッグ&ドロップして疑似的に親子化します。コレクションを作成し、タイトルと URL ハンドルを整え、メニューに追加し、ドラッグで入れ子にする、という流れです。コレクション一覧そのものはこの階層とは独立して並べられるので、ナビゲーション設計とは分けて考えておくと混乱しません。

この2点を踏まえたうえで、ストアのタイプ別にコレクション一覧の表示方法を見ていきましょう。

まず知っておきたい：無料テーマだけでどこまで表示できる？

検索意図として多いのが「追加費用をかけずに、標準機能でコレクション一覧を表示したい」というものです。ここを最初にはっきりさせておきます。

Shopify のコレクション表示には、大きく2つの系統があります。1つは Featured collection（単一コレクションの中の商品を見せる）、もう1つが Collection list（複数のコレクションをタイルやカードで一覧表示する）です。今回のテーマである「コレクション一覧」は後者にあたります。トップページ上部に Collection list でカテゴリーナビを置き、下部に Featured collection で売れ筋を訴求する、という併用がよく使われる定番パターンです。

無料テーマの代表である Dawn にも Collection list セクションは用意されています。ただしデスクトップ表示は標準で1〜5カラムのグリッドが基本で、横スライドの商品カテゴリー表示カルーセルにする「Enable carousel on desktop」はデフォルトでオフです。デスクトップでカルーセル化しようとすると、CSS / JavaScript の追加や Flickity などの外部ライブラリ、あるいはアプリが必要になります。実際、Shopify Community でも「Dawn の Collection list をノーコードで横スライダーにできないか」という質問が繰り返し立っており、無料テーマだけでは回遊性の高いカルーセル UI を組みにくいのが実情です。

つまり、整然としたグリッドで数カテゴリーを並べる程度なら無料テーマで足ります。一方で、画像比率の細かい調整、雑誌風の非対称レイアウト、デスクトップでのカルーセルなどに踏み込むと、無料テーマの1〜2種類の基本レイアウトでは表現の幅が足りなくなります。ここからは、その「足りなくなる」シーンを業種ごとに具体化していきます。

ユースケース別：あなたのストアに合うコレクション一覧の見せ方

アパレル・雑貨ストア：世界観で見せたいなら雑誌風レイアウト

ブランドの世界観が購買を左右するアパレルや雑貨では、整然と並んだグリッドよりも、あえて崩した非対称のレイアウトが映えます。エディトリアル（雑誌風）やベント（大小タイルのモザイク）で抜け感を出し、縦長（3:4）の画像でルックブックのような印象に寄せると、ストアの空気感がトップページから伝わります。

このタイプで効くのが、画像ズームのホバーエフェクトと英語表記の見出しです。「Collection」「Categories」といった控えめな見出しに、ホバーで画像がわずかに拡大する動きを添えるだけで、既製のテーマとは違う仕立ての良さが出ます。筆者の経験では、アパレル系で最初に崩れがちなのが画像のトリミング位置です。商品の顔が切れてしまうと一気に安っぽく見えるので、トリミング位置を中央固定にせず、被写体に合わせて調整できる環境を持っておくと失敗が減ります。

推奨設定の目安は次のとおりです。

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

商品点数の多い総合ストア：カルーセルで多カテゴリーを一望させる

カテゴリーが10種類、20種類と多い総合ストアでは、すべてを縦に並べるとトップページが間延びします。ここで活躍するのが横スクロールの商品カテゴリー表示カルーセルです。限られた縦幅で多くのカテゴリーを見せられ、お客様は指やマウスで気軽に流し見できます。

前述のとおり、無料テーマのデスクトップ・カルーセルは標準オフでハードルが高い領域です。総合ストアほどカルーセルの恩恵が大きい一方、自前実装の負担も大きくなるため、ここはアプリかコードかの判断が分かれるポイントになります。商品数の表示をオンにして「○○商品」と添えると、品ぞろえの厚みがそのまま訴求になります。自動再生は4秒前後がほどよく、速すぎるとかえって読み取れません。

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

シンプルにまとめたい小規模ストア：標準グリッドで十分なケース

取り扱いカテゴリーが数種類の小規模ストアや、ミニマルな世界観のストアでは、凝ったレイアウトよりも整ったグリッドのほうが上品にまとまります。このゾーンは、実は無料テーマの標準 Collection list でも近い見た目を作れる範囲です。

ただし標準セクションだと、影の付け方や角丸の数値といった細部の調整に手が届かないことがあります。控えめな影と12px 程度の角丸を足すだけで、のっぺりしたカードが一段洗練されるので、その微調整ができるかどうかが仕上がりの分かれ目です。

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

注目商品を訴える期間限定・セール運用：スポットライトで1枚を主役に

新作投入やセールのように「今これを見てほしい」という時期がはっきりしているストアでは、1枚を大きく主役に据え、残りをサブで添えるスポットライト型が有効です。トップに来たお客様の視線を、まず狙いのコレクションへ集めてから、周辺カテゴリーへ広げられます。季節やキャンペーンに合わせて主役を差し替える運用が前提になるため、レイアウトをコード修正なしで切り替えられる体制だと回しやすくなります。

レイアウトとストアの対応をまとめると

ここまでのユースケースを、後述のアプリが備える5種類のレイアウトに当てはめて整理すると次のようになります。

レイアウト	見せ方	向いているストア
グリッド	同じ大きさで整然と並べる	小規模・ミニマル系
ベント	大小タイルのモザイク	雑貨・動きを出したいストア
エディトリアル	雑誌風の非対称	アパレル・世界観重視
カルーセル	横スクロール	多カテゴリーの総合ストア
スポットライト	1枚を主役＋サブ	新作・セール訴求

自社で運用しているストアの規模と更新頻度を起点に、この表から見せ方の当たりを付けてみてください。次の章からは、これらのレイアウトをコーディングなしで切り替えられるアプリと、コードで自作する方法をそれぞれ具体的に見ていきます。

アプリで実装する：「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」

「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」は、前章で挙げたグリッド・ベント・エディトリアル・カルーセル・スポットライトの5種類のレイアウトを、設定ひとつで切り替えられるアプリです。ユースケースが変わっても、コードを書き直さずに見せ方だけを差し替えられるのが、業種をまたいで運用するストアや時期で訴求を変えるストアにとっての強みです。コーディング不要で、ワンクリックでテーマに追加できます。

アプリの基本情報

• アプリ名：シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル
• 料金：Basic Plan 月額 $3.99（または $39.99/年で16%お得）
• 無料体験：インストールから7日間
• 特徴：5種類のレイアウト、豊富なカスタマイズ、ワンクリック追加、日本語対応

価格帯の感覚をつかむために他のアプリと並べると、コレクション一覧をカルーセル表示できるツールは月額 $3.99 程度のものから、無料プラン＋上位 $9.99/月で多数のテンプレートを使えるもの、AI ソート対応で $100〜$500/月のハイエンドまで幅があります。多機能なものほど高額になる一方、「日本語の管理画面でレイアウトを切り替えたいだけ」という用途では、月額数ドルのレンジで十分にまかなえます。本アプリはその手頃なレンジに位置します。

以下の Shopify 公式のアプリストアからインストールできます。
👉 シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル

できること

コレクションをおしゃれに並べてお客様を案内

カテゴリー別にコレクションを美しく並べることで、お客様をお目当ての商品へ自然に案内できます。トップページにコレクション一覧を置けば、ストアの品ぞろえがひと目で伝わります。

5種類のレイアウトからお好みのスタイルで表示

グリッド・ベント・エディトリアル・カルーセル・スポットライトの5種類から、お店の雰囲気に合ったレイアウトを選べます。整然と並べたいときも、雑誌のように個性的に見せたいときも、業種に合わせた表示が叶います。

見出し・カード・ボタンを細かくカスタマイズ

見出しの色やサイズ、カードの背景色・角丸・影、ボタンのスタイルなどを細かく調整できます。ブランドの世界観に合わせて、細部までこだわった見た目に仕上げられます。

画像比率やトリミング位置も自由に設定

画像の比率（正方形・横長・縦長・ワイド）や、トリミング位置（中央・上・下・左・右）を自由に設定できます。アパレルのユースケースで触れた「被写体が切れる問題」を避けたいときに役立つ設定です。

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

アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、簡単にコレクション一覧を設置できます。コーディングの知識は一切不要です。

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

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

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

   

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

   

3. 検索窓にアプリ名を入力し、表示されたアプリをクリックします。

   

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

   

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

   

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

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

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

   

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

   

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

   

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

設定項目をユースケースに落とし込む

テーマエディタでアプリブロックを選択すると、右側に設定パネルが表示されます。ここでは各設定が前半のユースケースのどこに効くかを意識しながら見ていきます。

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

一覧に表示するコレクションを最大20件まで選択でき、見出しのテキスト・タグ（H1〜P）・文字サイズ・色・配置・下の余白を調整できます。アパレルなら「Collection」、総合ストアなら「カテゴリーから探す」のように、業種に合った見出しを置くと案内がスムーズになります。

レイアウト設定

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

テキスト設定

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

カード設定

カードの背景色・角丸（0〜24px）・影（なし／小／中／大）・ホバーエフェクト（なし／画像ズーム／カードが浮く）を調整できます。小規模ストアで上品にまとめたいときは、角丸12px に影「小」の控えめな組み合わせが扱いやすい設定です。

ボタン設定

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

さらに細かくデザインを調整したい場合は、このブロック内にのみ適用される「追加の CSS」を入力することもできます。テーマ全体を触らずにこのコレクション一覧だけを微調整できるので、表示崩れのリスクを抑えられます。

5種類のレイアウトを設定ひとつで切り替える

このアプリの核心は、前半のユースケースで挙げた見せ方を、コードを触らず設定ひとつで行き来できる点にあります。それぞれの特徴を改めて整理します。

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

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

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

大小のタイルを組み合わせたモザイク状の配置です。動きのある印象になり、単調になりがちなコレクション一覧に変化を加えられます。雑貨ストアのように、商品ごとの表情を見せたい場面に向いています。

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

雑誌のような非対称のおしゃれなレイアウトです。ブランドの世界観を演出したいアパレルや雑貨のストアに向いています。なお、エディトリアルでは背景は常に透明、角丸は画像枠のみに適用されます。世界観を作り込むほど効果が出る一方、画像のトーンがそろっていないと崩れて見えやすいので、登録画像の明るさをそろえてから使うのがおすすめです。

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

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

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

1枚を大きく主役として見せ、残りをサブとして配置するレイアウトです。新作や目玉セールなど、注目させたいコレクションがあるときにおすすめです。時期に合わせて主役を差し替える運用と相性がよく、キャンペーンごとにコード修正をしなくて済みます。

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

アプリを使わず、テーマのコードを直接編集してコレクション一覧を実装する方法も紹介します。自由度は最も高い反面、保守の負担とテーマ更新時の上書きリスクが伴うため、開発リソースを社内に持つストア向けの選択肢です。

実装の流れ

1. テーマのセクションファイルに Liquid + HTML を追加する
2. CSS でカードのデザインを整える
3. カルーセルにしたい場合は 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 の条件を入れることで、商品がゼロのコレクションを自動的に非表示にできます。小規模ストアのグリッド表示なら、まずこの Liquid だけでも形になります。

CSS を追加

カードを整然と並べ、ホバー時に少し浮き上がる動きを付ける CSS の例です。前半で触れた「角丸12px・影は控えめに」という小規模ストア向けの設定を、そのまま数値に落とし込んでいます。

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

コード実装で気をつけたいこと

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

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

コレクション一覧を活かす周辺施策

コレクション一覧は単体でも効きますが、ほかの施策と組み合わせることでストアの導線がさらに整います。

商品カテゴリー表示カルーセルとバナーの併用

トップページ上部にキャンペーンバナーを置き、その下にコレクション一覧（商品カテゴリー表示カルーセル）を配置すると、「今のおすすめ → カテゴリーから探す」という自然な導線が生まれます。冒頭で触れた Featured collection と Collection list の併用パターンとも噛み合い、訴求とナビゲーションを役割分担させられます。

コレクションページの並べ替えとの組み合わせ

コレクション一覧でカテゴリーへ誘導したあと、各コレクションページ内の商品並び順を最適化すると、より効果的です。売れ筋商品や新商品を上位に表示することで、購入率をさらに高められます。

検索・フィルター機能との併用

コレクション一覧で大まかなカテゴリーに案内し、その先で検索やフィルターを使って絞り込めるようにすると、お客様は欲しい商品にすばやくたどり着けます。回遊性の高いストアづくりに効果的です。

運用のコツ

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

よくある質問

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

Q. 無料テーマの標準機能だけでコレクション一覧は表示できますか？
A. グリッド状に並べるだけなら、Dawn などの無料テーマの Collection list セクションで表示できます。ただしデスクトップでの横スクロール（カルーセル）は標準でオフのため、カルーセルや雑誌風レイアウトまで踏み込むと、CSS / JavaScript の追加かアプリが必要になります。

Q. コレクションに大カテゴリー・小カテゴリーの階層は作れますか？
A. Shopify のコレクション自体には親子の階層構造がありません。「オンラインストア > メニュー」でメニュー項目をドラッグ&ドロップし、疑似的に親子化して表現します。

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

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

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

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

まとめ

Shopify のコレクション一覧の表示方法は、業種や店舗規模によって最適なレイアウトが変わります。

• アパレル・雑貨は雑誌風のエディトリアルやベント、総合ストアは商品カテゴリー表示カルーセル、小規模ストアは整ったグリッド、セール運用はスポットライトが向く
• 無料テーマの標準 Collection list はグリッドまでは対応するが、デスクトップのカルーセルや非対称レイアウトには CSS / JavaScript の追加かアプリが必要
• コレクションは自動／手動の種別が不可逆、階層構造は標準でない、という仕様を踏まえて設計すると手戻りが減る
• 「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」なら、5種類のレイアウトをコードなしで切り替えられ、月額 $3.99・7日間の無料体験から試せる

自分のストアに合う見せ方を確かめたい方は、ぜひ一度お試しください。

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

参考記事

• Shopifyにコレクション一覧を設置できるアプリ6選を紹介！商品カテゴリー表示カルーセルでストアを魅力的に
• Shopifyでコレクション一覧を表示できるアプリ5選！商品カテゴリー表示カルーセルでストアを魅力的に
• Shopifyでコレクション一覧や商品カテゴリーのカルーセルを表示するアプリについて徹底解説｜ご利用ガイド