Shopifyでコレクション一覧や商品カテゴリーのカルーセルを表示するアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/23

はじめに

Shopify（ショッピファイ）は、世界中の多くのお店が利用しているネットショップ作成サービスです。そして Shopify アプリとは、その Shopify のストアに新しい機能を追加できる拡張ツールのことです。アプリをインストールするだけで、専門的な知識がなくてもストアをより便利に、より魅力的にすることができます。

このガイドでご紹介する「シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル」は、ストアのコレクション（商品カテゴリー）をおしゃれに並べて表示できるアプリです。グリッド・ベント・エディトリアル・カルーセル・スポットライトという5種類のレイアウトから、お店の雰囲気に合ったスタイルを選べます。カテゴリー別に商品を整理して見せることで、お客様をお目当ての商品へスムーズに案内できます。コーディングは一切不要で、テーマに追加するだけですぐにお使いいただけます。

料金：Basic Plan 月額 $3.99（または $39.99/年で16%お得）。インストールから7日間、無料でアプリをお試しいただけます。年払いにすると実質2ヶ月分が無料となり、お得にご利用いただけます。

アプリストアはこちらからご覧いただけます。
👉 シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル

コレクション一覧をストアに簡単に導入できる様子を示したアプリのメイン画像

「シンプルコレクション一覧」でできること

このアプリを使うと、ストアのコレクション（商品カテゴリー）を魅力的なデザインで一覧表示できます。グリッド・ベント・エディトリアル・カルーセル・スポットライトの5種類のレイアウトから、お店の雰囲気にぴったりのスタイルを選べます。見出しの色やサイズ、カードの背景色、角丸、影、ホバーエフェクトまで細かくカスタマイズできるので、ブランドの世界観に合わせた仕上がりになります。商品数の表示や「もっと見る」ボタンの追加、雑誌風のおしゃれな並べ方も可能です。「カテゴリーがたくさんある」ことがお客様に伝わり、目的の商品を見つけてもらいやすくなります。

コレクション一覧をストアに簡単に導入できる様子を示したアプリのメイン画像

このアプリの特徴

グリッド・ベント・エディトリアル・カルーセル・スポットライトの5種類のレイアウトから選べます。
見出し・カード・ボタンの色やサイズ、ホバーエフェクトも細かく設定できます。
画像の比率やトリミング位置、PC・モバイル別の列数を自由に設定できます。
商品数がゼロのコレクションは自動で非表示にできます。
ワンクリックでテーマに簡単に追加できます。

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

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

コレクションをおしゃれに並べてお客様を案内する表示例

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

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

5種類のレイアウトから選んで表示している様子

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

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

見出し・カード・ボタンを細かくカスタマイズしている設定画面

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

画像の比率（正方形・横長・縦長・ワイド）や、トリミング位置（中央・上・下・左・右）を自由に設定できます。コレクション画像をきれいに見せたいときに便利です。

画像比率やトリミング位置を設定している様子

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

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

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

アプリのインストール

まずはアプリをインストールしましょう。下記のリンクからアプリストアへアクセスできます。
👉 シンプルコレクション一覧｜お手軽商品カテゴリー表示カルーセル

インストールの手順

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

アプリブロックをテーマに追加

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

自動でテーマに追加（1クリック追加）

手軽に設置したい場合は、こちらの方法がおすすめです。

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

手動でテーマに追加（任意ページに設置したい場合）

特定のページの好きな位置に設置したい場合は、こちらの方法をお使いください。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブからアプリブロックを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

アプリのカスタマイズ

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

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

一覧に表示するコレクションと、その上に表示する見出しに関する設定です。

コレクションを選択：一覧に表示したいコレクション（商品カテゴリー）を選びます。最大20件まで選択できます。表示したい順番に並べておくと、そのままの順序で表示されます。
見出しテキスト：コレクション一覧の上に表示する見出しの文章を入力します。「カテゴリーから探す」「人気のコレクション」など、お客様に分かりやすい言葉を入れると効果的です。
見出しのタグ：見出しの HTML タグを選びます（H1・H2・H3・P）。ページの見出し階層に合わせて選んでください。SEO と支援技術への配慮のため、1ページに H1 は1つだけにするのがおすすめです。
見出しの文字の大きさ：見出しの文字サイズを 14px〜48px の範囲で調整できます。
見出しの文字の色：見出しの文字色を設定します。
見出しの配置：見出しの位置を「左揃え」「中央揃え」「右揃え」から選べます。
見出し下の余白：見出しとコレクション一覧の間の余白を 8px〜48px の範囲で調整できます。

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

レイアウト設定

コレクションの並べ方や画像の見せ方を決める、デザインの要となる設定です。

レイアウト：コレクションの並べ方を5種類から選べます。
- グリッド（整然と並べる）：すべてのカードを同じ大きさで規則正しく並べます。
- ベント（大小タイルのモザイク）：大小のタイルを組み合わせたモザイク状の配置です。動きのある印象になります。
- エディトリアル（雑誌風の非対称）：雑誌のような非対称のおしゃれなレイアウトです。
- カルーセル（横スクロール）：横スクロールで切り替えて見せます。多くのコレクションをコンパクトに表示したいときに便利です。
- スポットライト（主役1枚 + サブ）：1枚を大きく主役として見せ、残りをサブとして配置します。注目させたいコレクションがあるときにおすすめです。
PC 列数：PC で表示する列数を 2〜6 列の範囲で設定します。グリッド／カルーセルで反映されます。（ベント・スポットライト・エディトリアルは各レイアウト固有の配置のため反映されません。）
モバイル列数：スマートフォンで表示する列数を 1〜3 列の範囲で設定します。グリッド／カルーセル、およびスポットライトのモバイル表示で反映されます。
カード間の余白：カードとカードの間隔を 0px〜60px の範囲で調整できます。
画像の比率：コレクション画像の縦横比を選べます。「正方形（1:1）」「横長（4:3）」「縦長（3:4）」「ワイド（16:9）」から、お店の画像に合うものを選んでください。
画像のトリミング位置：画像と枠の比率が違うときに、画像のどこを残すかを選びます。人物の顔が上寄りなら「上」、商品ロゴが左寄りなら「左」を選ぶときれいに収まります。「中央」「上」「下」「左」「右」から選べます。
商品ゼロのコレクションを非表示：商品数が0のコレクションを自動でスキップします。準備中のコレクションを選んでいても非表示にできて便利です。
自動再生の間隔：カルーセルの自動再生の間隔を 0秒〜10秒で設定します。0 にすると自動再生は無効になります。マウスを乗せたときやタブが非表示のときは自動で停止します。

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

テキスト設定

各コレクションのカードに表示する文字に関する設定です。

コレクション名を表示：カードにコレクション名を表示するかどうかを切り替えます。
コレクション名の文字の大きさ：コレクション名の文字サイズを 12px〜24px の範囲で調整できます。
コレクション名の文字の色：コレクション名の文字色を設定します。
テキスト配置：カード内のテキストの位置を「左揃え」「中央揃え」「右揃え」から選べます。
商品数を表示：各コレクションに含まれる商品数を表示するかどうかを切り替えます。品ぞろえの豊富さをアピールしたいときに便利です。
商品数の文字の色：商品数の文字色を設定します。

テキスト設定の設定画面

カード設定

コレクションを表示する各カードの見た目に関する設定です。

カードの背景色：カードの背景色を設定します。グリッド／ベント／カルーセル／スポットライトで反映されます。（エディトリアルは雑誌風デザインのため背景は常に透明になります。）
角丸：カードの角の丸みを 0px〜24px の範囲で調整できます。やわらかい印象にしたいときは大きめがおすすめです。グリッド／ベント／カルーセル／スポットライトではカード全体に、エディトリアルでは画像枠のみに適用されます。
影：カードに付ける影の強さを「なし」「小（微かに）」「中（ほどよく浮く）」「大（しっかり浮く）」から選べます。立体感を出してカードを目立たせたいときに効果的です。
ホバーエフェクト：マウスを乗せたときの動きを選べます。「なし」「画像ズーム」「カードが浮く」から選択できます。（エディトリアルでは「カードが浮く」は自動的に無効になります。）

カード設定の設定画面