Shopify で商品カルーセル・商品スライダーを設置する方法とおすすめアプリ
目次
- はじめに
- 記事の構成
- Shopify で商品カルーセル・商品スライダーを表示できる？
- 商品カルーセル・商品スライダーとは
- 商品スライダーを表示するメリット・デメリット
- テーマのコード編集とアプリ導入の比較
- おすすめ Shopify アプリ「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」紹介
- アプリのインストール手順
- アプリをテーマに追加（有効化）
- アプリの設定項目を理解する
- すぐ使えるおすすめ設定例
- 関連施策との組み合わせ
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツ
- よくある質問
- まとめ
- 参考記事
はじめに
Shopify でストアを運営していると、「おすすめ商品や関連商品をもっと魅力的に見せたい」「限られたスペースでたくさんの商品を提案したい」と感じる場面が多いのではないでしょうか。そんなときに役立つのが、商品カルーセル（商品スライダー）です。横スライドで複数の商品を見せることで、お客様の回遊を促し、ついで買いやまとめ買いを後押しできます。
この記事では、Shopify で商品カルーセル・商品スライダーを設置する方法を、メリット・デメリットの整理から、テーマのコード編集による実装例、そしてノーコードで手軽に使えるおすすめアプリの紹介・設定方法まで、まとめて解説します。「商品スライダーをストアに導入したいけれど、何から始めればいいかわからない」という方は、ぜひ参考にしてください。
今回は、以下の記事を参考にしています。
- Shopifyで商品カルーセル・商品スライダーを導入できるアプリについて徹底解説｜ご利用ガイド
- Shopify に商品カルーセルを設置できるアプリ17選！おすすめ商品スライダーで売上アップ
- Shopify で商品スライダーを設置できるおすすめアプリと実装方法を解説
- Shopify で商品カルーセル・商品スライダーを表示できるアプリ5選！おすすめ商品で回遊率アップ
記事の構成
この記事は以下の流れで解説します。
- 商品カルーセル・商品スライダーとは何か
- Shopify で商品スライダーを表示する 2 つの方法
- 商品スライダーを表示するメリット・デメリット
- テーマのコード編集とアプリ導入の比較
- おすすめアプリ「シンプル商品カルーセル」の紹介・インストール・設定
- すぐ使えるおすすめ設定例
- 関連施策との組み合わせ
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツ・よくある質問
Shopify で商品カルーセル・商品スライダーを表示できる？
結論からお伝えすると、Shopify で商品カルーセル・商品スライダーを表示することは十分に可能です。実現方法は大きく分けて 2 つあります。
- テーマのコードを編集して実装する方法 — HTML・CSS・JavaScript（または Liquid）を使って、自分でスライダーを組み込む方法です。自由度は高いものの、専門知識とメンテナンスの手間が必要です。
- アプリを導入して実装する方法 — Shopify App Store で提供されている商品スライダーアプリを使う方法です。ノーコードで設置でき、デザインや挙動も管理画面から調整できます。
どちらの方法でも商品スライダーは設置できますが、それぞれにメリット・デメリットがあります。まずは、商品スライダーそのものを表示するメリット・デメリットから見ていきましょう。
商品カルーセル・商品スライダーとは
商品カルーセル（商品スライダー）とは、複数の商品を横方向にスライドさせながら表示する UI のことです。1 画面に商品を縦に並べるグリッド表示と違い、限られた縦スペースに多くの商品をコンパクトに収められます。お客様は矢印やスワイプ操作で「めくる」ように商品を閲覧できます。
ホームページの「おすすめ商品」「新着商品」、商品ページの「関連商品」「この商品を見た人へのおすすめ」など、さまざまな場面で使われる、EC サイトの定番 UI です。
商品スライダーを表示するメリット・デメリット
メリット
限られたスペースで多くの商品を見せられる
商品スライダーは横方向にスライドするため、ページを縦に長くすることなくたくさんの商品を提案できます。ファーストビュー付近におすすめ商品を並べれば、お客様が最初に目にする情報として効果的にアピールできます。
- 縦スクロール量を抑えつつ商品数を確保できる
- 「新着」「セール」「おすすめ」など複数のスライダーを使い分けられる
ついで買い・まとめ買いを後押しできる
商品ページに「関連商品」スライダーを設置すれば、お客様が「ついでにこれも」と感じやすくなります。結果として、1 回の注文あたりの購入点数や客単価（AOV）の向上が期待できます。
- 関連商品・併せ買い商品を自然に提案できる
- 回遊が増え、離脱率の低下にもつながる
ストアの世界観を演出できる
カードのデザインやスライダーの挙動を整えることで、ストア全体の印象を引き上げられます。洗練されたスライダーは、ブランドの信頼感にも寄与します。
デメリット
設置・カスタマイズに手間がかかる場合がある
テーマのコードを直接編集して実装しようとすると、HTML・CSS・JavaScript の知識が必要です。レスポンシブ対応やアクセシビリティへの配慮も求められ、初心者にはハードルが高くなります。
表示しすぎるとページが重くなる
商品数を増やしすぎたり、1 ページに多数のスライダーを置いたりすると、画像の読み込みが増えて表示速度に影響します。表示件数の調整や遅延読み込み（lazy load）が重要です。
操作されないと効果が出にくいことがある
スライダーはお客様が操作（スワイプやクリック）して初めて続きの商品が見えます。オートプレイや「次のカードが少し見切れる」見せ方など、続きがあることを伝える工夫が必要です。
テーマのコード編集とアプリ導入の比較
テーマのコード編集で実装する方法
- メリット
- 月額費用がかからない
- 仕様を完全に自分でコントロールできる
- デメリット
- HTML・CSS・JavaScript（Liquid）の知識が必要
- テーマ更新時にコードが消える・競合するリスクがある
- 高機能（オートプレイ・クイックビュー・バッジなど）の実装が大変
- 不具合時に自分で対応する必要がある
アプリを導入する方法
- メリット
- ノーコードで設置・カスタマイズできる
- デザインや挙動を管理画面から簡単に調整できる
- クイックビューやセールバッジなどの高機能をすぐに使える
- サポートを受けられる
- デメリット
- 月額費用がかかる（多くは数ドル程度）
結論：最初はアプリで小さく試すのがおすすめ
コード編集は自由度が高い反面、知識とメンテナンスの手間が必要です。一方、アプリなら月額数ドルでノーコードで導入でき、デザインも挙動も自由に調整できます。「まずは商品スライダーを試してみたい」「メンテナンスの手間を減らしたい」という場合は、アプリの導入が圧倒的におすすめ です。多くのアプリには無料体験期間があるため、リスクなく効果を試せます。
おすすめ Shopify アプリ「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」紹介
ここでは、ノーコードで手軽に商品スライダーを設置できる 「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」 を紹介します。
アプリの基本情報
- アプリ名：シンプル商品カルーセル｜お手軽おすすめ商品スライダー
- 開発元：株式会社 UnReact（国内事業者）
- 料金：Basic Plan 月額 $3.99（年額 $39.90 で 17% お得）
- 無料体験：インストールから 7 日間
- 特徴：コレクションの商品をスライダーで表示／6 種のカードデザイン／3 種の挙動／クイックビュー／セールバッジ／ノーコード設置
できること
「シンプル商品カルーセル」は、コレクションの商品をスライダー形式で表示し、ストア内のどのページにも設置できるアプリです。カードのデザインは 6 種類から選べ、PC とモバイルそれぞれの列数、スライダーの動き、セールバッジ、クイックビュー、カート追加ボタンなど、細かな部分まで思いどおりにカスタマイズできます。
コレクションの商品をスライダーで表示できる
お好きなコレクションを選ぶだけで、その商品をスライダー形式で表示できます。ホームページに「おすすめ商品」として、商品ページに「関連商品」として、見せたい場所に自由に設置できます。
カードデザインや列数、挙動を自由にカスタマイズ
カードのデザインは、ミニマル・枠線あり・影付き・フローティング・ポラロイド・グラスの 6 種類から選べます。PC とモバイルそれぞれの列数や画像の縦横比も調整できます。
クイックビューでスライダーから直接購入
クイックビューボタンやカート追加ボタンを表示すれば、お客様は商品ページに移動しなくても、スライダーから直接商品を確認してカートに追加できます。
セールバッジや売り切れバッジを自動表示
セール中の商品には割引率やセールバッジを、売り切れの商品には売り切れバッジを自動で表示します。
スライダーの挙動を 3 種類から選べる
スライダーの動きは「クラシック（横スライド）」「ピーク（次のカードが少し見切れる）」「フェード切替」の 3 種類から選べます。
アプリのインストール手順
まずはアプリをストアにインストールしましょう。
-
Shopify 管理画面の左下にある「設定」をクリックします。
-
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
-
検索窓にアプリ名「シンプル商品カルーセル」を入力し、表示されたアプリをクリックします。
-
アプリ詳細画面で「インストール」をクリックします。
-
権限の確認画面が表示されるので、内容を確認して「インストール」を完了します。
アプリをテーマに追加（有効化）
インストールが完了したら、ストアにスライダーを表示するためにアプリブロックをテーマに追加します。もっとも簡単なのは「自動（1 クリック追加）」です。
-
アプリの管理画面を開きます。
-
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
-
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
特定のページや好きな位置に設置したい場合は、Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開き、「セクションを追加」→「アプリ」タブから「シンプル商品カルーセル」のブロックを選んで手動で追加します。
アプリの設定項目を理解する
テーマエディタでブロックを選択すると、右側に設定パネルが表示されます。設定はグループごとに分かれているので、順に見ていきましょう。
基本設定（コンテンツ設定）
スライダーに表示する内容の基本設定です。
- 見出し — スライダー上部に表示するテキスト（初期値「おすすめ商品」）。「新着商品」「あなたへのおすすめ」など、目的に合わせて変更しましょう。
- 見出しのフォントサイズ — 14px〜48px の範囲で調整できます。
- 表示するコレクション — スライダーに表示する商品のコレクションを選びます。未選択の場合はストアの全商品から新しい順で表示されます。
- 表示する商品数 — 4・8・12・16・20・24 件から選べます（初期値 12 件）。
スライダー設定（挙動と操作）
スライダーの動きや操作まわりの設定です。
- スライダーの挙動 — クラシック（横スライド）／ピーク（次のカードが見切れる）／フェード切替（列数 1 のときのみ有効）から選べます。
- PC での列数 / モバイルでの列数 — PC は 2〜5 列、モバイルは 1〜2 列から選べます。
- 矢印ボタン・ドットの表示 — それぞれ表示・非表示を切り替えられます（1 ページしかないときは自動で非表示）。
- オートプレイの間隔（秒） — 0〜15 秒で設定。0 で無効になります。
- スライドの切替速度 — 0.1〜3.0 秒で調整できます。
- 無限ループ — 最後のスライドで先頭に戻るかどうかを設定できます。
表示条件の設定（カードデザイン）
商品カードの見た目を整える設定です。
- カードの種類 — ミニマル／枠線あり／影付き／フローティング／ポラロイド／グラスの 6 種類から選べます。
- 価格の表示方法 — 横並び／縦並び（比較価格上）／割引バッジ付きから選べます。
- カードの枠線の丸み・背景色 — 角の丸みや背景色を調整できます。
- 画像の縦横比 — 自動／正方形（1:1）／横長（4:3）／縦長（3:4）／ワイド（16:9）から選べます。揃った見た目にしたい場合は固定比率がおすすめです。
- マウスオーバーで画像を拡大 — PC でカードにマウスを乗せたときに画像をゆっくり拡大します。
バッジ・ボタンの設定
- セールバッジの表示 — 割引率で表示／テキストで表示／非表示から選べます。
- セールバッジの形状・テキスト・色 — バッジの形（標準／丸型／枠線のみ）や文字、色を設定できます。
- 売り切れバッジのテキスト — 在庫切れ時の表示（初期値「Sold Out」）を設定できます。
- ボタンの種類 — 枠線／塗りつぶし／テキストリンク／非表示から選べます。
- クイックビューボタンを表示 — 商品ページに移動せずに詳細を見せたいときに有効化します。
5 種類以上のデザインスタイルを使い分ける
「カードの種類」で選べる 6 種類のデザインスタイルは、ストアの世界観を大きく左右します。それぞれの特徴と向いているストアは次のとおりです。
- ミニマル — 余計な装飾のないシンプルなスタイル。どんなテーマにもなじみやすく、写真の世界観を引き立てたいストアに向いています。
- 枠線あり — カードの境界がはっきりするスタイル。商品ごとの区切りを明確にしたいときに便利です。
- 影付き — 立体感のあるスタイル。カードが浮いて見え、クリックを促しやすくなります。
- フローティング — ホバー時にカードが浮き上がる演出。動きで注目を集めたいストアにおすすめです。
- ポラロイド — 白フレームのアルバム風スタイル。雑貨やハンドメイドなど、温かみのあるストアに合います。
- グラス — 半透明のモダンなスタイル。背景画像と組み合わせると洗練された印象になります。
さらに細かく調整したい場合は、「追加設定」のカスタム CSS から独自のスタイルを適用することもできます。
すぐ使えるおすすめ設定例
設置する場所や目的に応じた、おすすめの設定例を紹介します。
ホームページのおすすめ商品
- 見出し：「おすすめ商品」または「新着商品」
- 表示コレクション：新着 or 売れ筋
- PC 列数：4／モバイル列数：2
- 挙動：ピーク（続きがあることを伝えられる）
- オートプレイ：4〜5 秒
商品ページの関連商品
- 見出し：「関連商品」または「あわせて見たい商品」
- 表示コレクション：同カテゴリのコレクション
- PC 列数：3〜4／モバイル列数：2
- クイックビュー：ON（離脱せずに比較できる）
セール特集ページ
- 見出し：「セール対象商品」
- 表示コレクション：セールコレクション
- セールバッジ：割引率で表示
- カードの種類：影付き or フローティングで注目度アップ
文言のテンプレ例
- 見出し：「おすすめ商品」「新着アイテム」「あなたへのおすすめ」「あわせて見たい商品」「今売れています」
- カートボタン：「カートに追加」「Add to Cart」
- カート追加後：「追加しました！」「Added!」
関連施策との組み合わせ
商品カルーセル・商品スライダーは、単体でも効果がありますが、他の施策と組み合わせることでさらに成果を高められます。
- おすすめ商品 × セールバッジ — おすすめ商品スライダーにセールバッジを表示することで、お買い得感を強調し、クリック率を高められます。
- 関連商品 × クイックビュー — 商品ページの関連商品スライダーにクイックビューを組み合わせると、お客様は今見ている商品ページを離れずに別の商品を検討でき、回遊と比較がスムーズになります。
- 新着商品スライダー × メールマガジン — 新着商品をスライダーで見せつつ、メールマガジンで新着を告知すれば、来店から購入までの導線が強化されます。
- カート追加ボタン × 送料無料ライン訴求 — スライダーから直接カートに追加できるようにし、「あと ◯◯ 円で送料無料」といった訴求と組み合わせると、ついで買いによる客単価アップが期待できます。
これらの施策を組み合わせることで、「商品スライダーでの発見 → 比較 → 購入」という流れを自然に作れます。
テーマのコード編集で実装する場合のサンプルコード
アプリを使わず、テーマのコードを編集して商品スライダーを自作することもできます。ここでは Liquid セクションでのシンプルな実装例を紹介します。
実装の流れ
- セクションに商品を出力する HTML（Liquid）を書く
- 横スクロールするスライダー用の CSS を追加する
- 矢印ボタンでスクロールさせる JavaScript を追加する
HTML を追加
{% comment %} sections/product-carousel.liquid {% endcomment %}
<div class="ur-carousel" data-carousel>
<h2>{{ section.settings.heading | default: 'おすすめ商品' }}</h2>
<button data-prev aria-label="前へ">‹</button>
<ul class="ur-carousel__track" data-track>
{% assign target = collections[section.settings.collection] %}
{% for product in target.products limit: 12 %}
<li class="ur-carousel__item">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | image_url: width: 400 }}"
alt="{{ product.title | escape }}" loading="lazy" width="400">
<p>{{ product.title }}</p>
<p>{{ product.price | money }}</p>
</a>
</li>
{% endfor %}
</ul>
<button data-next aria-label="次へ">›</button>
</div>
{% schema %}
{
"name": "商品カルーセル",
"settings": [
{ "type": "text", "id": "heading", "label": "見出し", "default": "おすすめ商品" },
{ "type": "collection", "id": "collection", "label": "表示するコレクション" }
],
"presets": [{ "name": "商品カルーセル" }]
}
{% endschema %}
CSS を追加
.ur-carousel { position: relative; margin: 40px 0; }
.ur-carousel__track {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.ur-carousel__track::-webkit-scrollbar { display: none; }
.ur-carousel__item {
flex: 0 0 calc((100% - 48px) / 4); /* PC 4 列 */
scroll-snap-align: start;
}
.ur-carousel__item img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
}
@media (max-width: 749px) {
.ur-carousel__item { flex: 0 0 calc((100% - 16px) / 2); } /* モバイル 2 列 */
}
JavaScript を追加
document.querySelectorAll('[data-carousel]').forEach((carousel) => {
const track = carousel.querySelector('[data-track]');
const step = () => track.clientWidth * 0.9;
carousel.querySelector('[data-prev]').addEventListener('click', () => {
track.scrollBy({ left: -step(), behavior: 'smooth' });
});
carousel.querySelector('[data-next]').addEventListener('click', () => {
track.scrollBy({ left: step(), behavior: 'smooth' });
});
});
コード実装の注意点
- テーマをアップデートすると、追加したコードが消えたり競合したりする可能性があります。
- オートプレイ・無限ループ・クイックビュー・セールバッジなどの高機能を自前で実装するのは手間がかかります。
- 表示速度（画像の遅延読み込み）やアクセシビリティ（キーボード操作・読み上げ対応）への配慮が必要です。
最小限のスライダーで十分ならコード実装でも対応できますが、デザインや挙動を作り込みたい場合や、メンテナンスの手間を減らしたい場合は、アプリの導入がおすすめです。
運用のコツ
- 表示件数は欲張りすぎない — 12 件前後を目安に、表示速度とのバランスを取りましょう。
- 見出しで目的を伝える — 「おすすめ商品」「関連商品」など、何のスライダーかが伝わる見出しにすると、お客様の理解が深まります。
- モバイルの見え方を必ず確認する — モバイルの列数やスワイプ操作を実機で確認しましょう。
- コレクションの並び順を活用する — 表示順はコレクションの「並び替え」設定に従うため、売れ筋順や手動並び替えを活用すると効果的です。
- 季節やキャンペーンで切り替える — 表示コレクションを切り替えるだけで、その時々の訴求に合わせられます。
よくある質問
Q. コーディングの知識がなくても使えますか？
A. はい。「シンプル商品カルーセル」はノーコードで設置でき、テーマエディタから設定するだけで利用できます。
Q. どのページに設置できますか？
A. ホーム・商品ページ・コレクションページなど、ストア内のどのページにも設置できます。
Q. スマートフォンでも見やすく表示されますか？
A. はい。PC とモバイルそれぞれで列数を設定でき、スワイプ操作にも対応しています。
Q. セール中の商品にバッジを表示できますか？
A. はい。セールバッジ（割引率またはテキスト）と売り切れバッジを自動で表示できます。
Q. 料金はいくらですか？
A. Basic Plan 月額 $3.99（年額 $39.90 で 17% お得）です。インストールから 7 日間は無料でお試しいただけます。
Q. スライダーから直接カートに追加できますか？
A. はい。クイックビューボタンやカート追加ボタンを表示すれば、スライダーから直接カートに追加できます。
まとめ
- 商品カルーセル・商品スライダーは、おすすめ商品や関連商品をコンパクトに見せ、回遊率と客単価を高める効果的な UI です。
- 実装方法はコード編集とアプリ導入の 2 通り。コードは自由度が高い一方、知識とメンテナンスの手間が必要です。
- 「まずは手軽に試したい」なら、ノーコードで設置できるアプリがおすすめです。
- 「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」 なら、6 種のカードデザイン・3 種の挙動・クイックビュー・セールバッジを備え、月額 $3.99・7 日間無料体験で導入できます。
おすすめ商品の見せ方を整えて、お客様のついで買い・まとめ買いを後押ししてみてください。
👉 シンプル商品カルーセル｜お手軽おすすめ商品スライダー（Shopify App Store）
参考記事
今回は、以下の記事を参考にしています。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
