2026/05/25

Shopify で商品スライダーを設置できるおすすめアプリと実装方法を解説

@ 信条刃

今回の記事は Shopify App Store で提供されている、商品カルーセル・商品スライダーアプリについての記事です。おすすめ商品や関連商品をスライダー形式で見せて、ストアの回遊率や客単価を高めたいと考えている方に向けて、おすすめアプリとコードによる実装方法をあわせて解説します。

商品カルーセル・商品スライダーとは

商品カルーセル（商品スライダー）とは、複数の商品を横方向にスライドさせながら表示する UI のことです。1 画面に商品を縦に積み上げていくグリッド表示とは異なり、限られた縦スペースの中でたくさんの商品をコンパクトに見せられます。お客様は左右の矢印やスワイプ操作で商品を「めくる」ように閲覧でき、ホームページの「おすすめ商品」や、商品ページの「関連商品」として広く使われています。

Amazon や楽天などの大手 EC サイトでも、「この商品を見た人はこんな商品も見ています」といった形で商品スライダーが活用されています。お客様に新しい商品との出会いを提供し、ついで買いやまとめ買いを後押しする、定番かつ効果的な見せ方です。

商品スライダーを導入する利点

限られたスペースで多くの商品を見せられる
横スライドでたくさんの商品を提案できるため、ページを縦に長くすることなく回遊のきっかけを作れます。
ついで買い・まとめ買いを後押しできる
商品ページに「関連商品」スライダーを置くことで、お客様が「ついでにこれも」と感じやすくなり、客単価の向上につながります。
おすすめ商品を効果的にアピールできる
ホームページのファーストビュー付近に新着商品やおすすめ商品を並べることで、ストアの「推し商品」を最初に印象づけられます。
キャンペーンや季節に合わせて柔軟に切り替えられる
表示するコレクションを切り替えるだけで、「新着特集」「セール対象商品」など、その時々の訴求に合わせた見せ方ができます。
直感的な操作で回遊性が高まる
矢印・ドット・スワイプといった直感的な操作で、お客様はストレスなく次々と商品を閲覧できます。
モバイルでも見やすい
スワイプで操作できる商品スライダーは、スマートフォンでの閲覧と非常に相性がよく、モバイルの回遊率向上に貢献します。

商品スライダーアプリの選び方

商品スライダーアプリは数多く提供されているため、以下のポイントを基準に選ぶとよいでしょう。

ノーコードで設置・カスタマイズできるか
カードのデザインやスライダーの挙動を細かく調整できるか
クイックビューやカート追加など、購入導線を強化する機能があるか
PC・モバイルそれぞれで最適な表示にできるか
料金が運用規模に見合っているか
日本語に対応しているか、サポート体制は十分か

特に「ノーコードで使えること」「デザインの自由度」「購入導線の強化」は、コンバージョンに直結する重要な要素です。これらを軸に、自社のストアに合ったアプリを選びましょう。

価格の比較

各アプリの料金と特徴を箇条書きで整理すると、以下のとおりです。

シンプル商品カルーセル｜お手軽おすすめ商品スライダー：月額 $3.99（年額 $39.90）／コレクション商品をどのページにもスライダー表示。6 種のデザイン・クイックビュー・ノーコード設置
スライダー革命：月額 $4.99〜$99.99／600 以上のテンプレートでスライダー・LP・セクションを作成
Singleton | Products Slider：月額 $3.99／商品ページに前後商品へのナビゲーションを設置
ProductSlider Pro：無料〜月額 $10／商品ページの画像スライダー・動画・3D/AR に特化
Carousel Slider ‑ Boost Sales：無料〜月額 $6.99／商品・コレクションカルーセルとクイックカート追加
OctoSlide Slider & Carousel：無料〜月額 $7／ベストセラーをスライダーで見せ、売上を計測

Shopify アプリの日本語サポート

日本語対応状況を箇条書きで整理すると、以下のとおりです。

シンプル商品カルーセル｜お手軽おすすめ商品スライダー：日本語対応 ○（国内開発・日本語サポートあり）
スライダー革命：日本語対応 △（アプリ説明は日本語あり／管理画面は英語中心）
Singleton | Products Slider：日本語対応 ×
ProductSlider Pro：日本語対応 ×
Carousel Slider ‑ Boost Sales：日本語対応 ×
OctoSlide Slider & Carousel：日本語対応 ×

日本語でのサポートやドキュメントを重視する場合は、国内事業者が開発する「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」が安心です。

テーマのコードを編集して商品スライダーを実装する方法

アプリを使わずに、テーマのコードを編集して簡単な商品スライダーを自作することもできます。ここでは、HTML・CSS・JavaScript を使ったシンプルな実装例を紹介します。Liquid のセクションファイルに記述する想定です。

実装の流れ

セクションまたはスニペットに商品を出力する HTML を書く
横スクロールするスライダー用の CSS を追加する
矢印ボタンでスクロールさせる JavaScript を追加する

HTML（Liquid）を追加

コレクションの商品をループで出力し、横並びのトラックに並べます。

{% comment %} sections/product-carousel.liquid {% endcomment %}
<div class="ur-carousel" data-carousel>
  <h2 class="ur-carousel__title">{{ section.settings.heading | default: 'おすすめ商品' }}</h2>

  <button class="ur-carousel__arrow ur-carousel__arrow--prev" 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 }}" class="ur-carousel__card">
          <img
            src="{{ product.featured_image | image_url: width: 400 }}"
            alt="{{ product.title | escape }}"
            loading="lazy"
            width="400"
          >
          <p class="ur-carousel__name">{{ product.title }}</p>
          <p class="ur-carousel__price">{{ product.price | money }}</p>
        </a>
      </li>
    {% endfor %}
  </ul>

  <button class="ur-carousel__arrow ur-carousel__arrow--next" data-next aria-label="次へ">›</button>
</div>

{% schema %}
{
  "name": "商品カルーセル",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し", "default": "おすすめ商品" },
    { "type": "collection", "id": "collection", "label": "表示するコレクション" }
  ],
  "presets": [{ "name": "商品カルーセル" }]
}
{% endschema %}

CSS を追加

トラックを横方向に並べ、はみ出した部分を横スクロールできるようにします。scroll-snap を使うとカードがきれいに揃います。

.ur-carousel {
  position: relative;
  margin: 40px 0;
}
.ur-carousel__title {
  margin-bottom: 16px;
  font-size: 24px;
}
.ur-carousel__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  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__card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.ur-carousel__name {
  margin: 8px 0 4px;
  font-size: 14px;
}
.ur-carousel__price {
  font-weight: bold;
}
.ur-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 20px;
}
.ur-carousel__arrow--prev { left: -8px; }
.ur-carousel__arrow--next { right: -8px; }

/* モバイルでは 2 列 */
@media (max-width: 749px) {
  .ur-carousel__item {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

JavaScript を追加

矢印ボタンをクリックしたときに、トラックを 1 画面分スクロールさせます。

document.querySelectorAll('[data-carousel]').forEach((carousel) => {
  const track = carousel.querySelector('[data-track]');
  const prev = carousel.querySelector('[data-prev]');
  const next = carousel.querySelector('[data-next]');

  // トラックの表示幅の約 90% 分だけスクロールする
  const getStep = () => track.clientWidth * 0.9;

  prev.addEventListener('click', () => {
    track.scrollBy({ left: -getStep(), behavior: 'smooth' });
  });

  next.addEventListener('click', () => {
    track.scrollBy({ left: getStep(), behavior: 'smooth' });
  });
});

コード実装の注意点

このようにコードで自作すれば、外部アプリに頼らず商品スライダーを設置できます。ただし、以下の点には注意が必要です。

テーマをアップデートすると、追加したコードが消えたり競合したりする可能性がある
オートプレイ、無限ループ、クイックビュー、セールバッジなどの高機能を自前で実装するのは大変
表示速度やアクセシビリティ（キーボード操作・読み上げ対応）への配慮が必要
不具合が起きた際、自分で原因を調査・修正する必要がある

「最小限のスライダーで十分」という場合はコード実装でも問題ありませんが、デザインや挙動を細かく作り込みたい、メンテナンスの手間を減らしたい、という場合は専用アプリの導入がおすすめです。

使いやすさ

今回ご紹介したアプリの中で、最も手軽でバランスがよいのは 「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」 です。ノーコードでワンクリック設置でき、6 種類のカードデザインや 3 種類のスライダー挙動、クイックビュー、セールバッジまで一通りそろっています。月額 $3.99 とリーズナブルなうえ、国内事業者による日本語サポートも受けられるため、「初めて商品スライダーを導入する」「まずは手軽に試したい」という方に最適です。

終わりに

商品カルーセル・商品スライダーは、おすすめ商品や関連商品をお客様に自然に提案し、回遊率と客単価を高める効果的な手段です。コードで自作することもできますが、デザインや挙動を作り込み、安定して運用するには専用アプリの活用が近道です。自社のストアの目的に合わせて、最適なアプリを選んでみてください。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify で商品スライダーを設置できるおすすめアプリと実装方法を解説

商品カルーセル・商品スライダーとは

商品スライダーを導入する利点

商品スライダーアプリの選び方

おすすめの商品スライダー Shopify アプリ

シンプル商品カルーセル｜お手軽おすすめ商品スライダー ☆ 迷ったらこれ

特徴・機能

価格設定

スライダー革命: ランディングページビルダーとセクション

特徴・機能

価格設定

Singleton | Products Slider

特徴・機能

価格設定

ProductSlider Pro

特徴・機能

価格設定

Carousel Slider ‑ Boost Sales

特徴・機能

価格設定

OctoSlide Slider & Carousel

特徴・機能

価格設定

価格の比較

Shopify アプリの日本語サポート

テーマのコードを編集して商品スライダーを実装する方法

実装の流れ

HTML（Liquid）を追加

CSS を追加

JavaScript を追加

コード実装の注意点

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopify で商品スライダーを設置できるおすすめアプリと実装方法を解説

Shopifyにコレクション一覧を設置できるアプリ6選を紹介！商品カテゴリー表示カルーセルでストアを魅力的に

Shopify に商品診断＆商品絞り込みを設置できるアプリ6選を紹介！コレクションフィルターで「探せる」ストアへ

Shopifyに縦型ショート動画ギャラリー・動画グリッドを設置できるアプリ6選を紹介！

ShopifyのサンクスページにLINE友だち追加ボタンを設置するできるアプリ6選を紹介！

Shopify にポイントプログラムを設置できる会員ポイントアプリ6選を紹介！