Shopify で商品カルーセル・商品スライダーを設置する方法とおすすめアプリ

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

はじめに

Shopify でストアを運営していると、「おすすめ商品や関連商品をもっと魅力的に見せたい」「限られたスペースでたくさんの商品を提案したい」と感じる場面が多いのではないでしょうか。そんなときに役立つのが、商品カルーセル（商品スライダー）です。横スライドで複数の商品を見せることで、お客様の回遊を促し、ついで買いやまとめ買いを後押しできます。

この記事では、Shopify で商品カルーセル・商品スライダーを設置する方法を、メリット・デメリットの整理から、テーマのコード編集による実装例、そしてノーコードで手軽に使えるおすすめアプリの紹介・設定方法まで、まとめて解説します。「商品スライダーをストアに導入したいけれど、何から始めればいいかわからない」という方は、ぜひ参考にしてください。

記事の構成

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

商品カルーセル・商品スライダーとは何か
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 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「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）

ブログTOP お問い合わせ