Shopifyで商品カルーセル・商品スライダーを導入できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/23

はじめに

Shopify は、世界中で利用されているネットショップ作成プラットフォームです。専門的な知識がなくても、商品の登録から決済、配送までをひとつの管理画面で運営できます。そんな Shopify には、ストアの機能を後から追加・拡張できる「アプリ」という仕組みが用意されています。

このガイドでご紹介する 「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」 は、おすすめ商品をスライダー（カルーセル）形式でストアに表示できる Shopify アプリです。コレクションの商品を、ホーム・商品ページ・コレクションページなど、ストア内のどのページにも設置できます。「こんな商品もあるんだ」とお客様に気づいてもらうことで、ついで買いやまとめ買いを後押しします。

カードのデザインやスライダーの挙動、列数などを細かくカスタマイズでき、しかもコーディングは一切不要です。テーマエディタから設定するだけで、ワンクリックでストアに追加できます。

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

アプリの詳細・インストールはこちらから行えます。

👉 シンプル商品カルーセル｜お手軽おすすめ商品スライダー（Shopify App Store）

おすすめ商品をスライダーでストアに表示するアプリのメインビジュアル

「シンプル商品カルーセル」でできること

「シンプル商品カルーセル｜お手軽おすすめ商品スライダー」は、コレクションの商品をスライダー形式で表示し、ストア内のどのページにも設置できるアプリです。お客様の目に留まりやすいスライダーで関連商品やおすすめ商品を見せることで、商品の発見を促し、購入につなげます。カードのデザインは 6 種類から選べ、PC とモバイルそれぞれの列数、スライダーの動き、セールバッジ、クイックビュー、カート追加ボタンなど、細かな部分まで思いどおりにカスタマイズできます。

おすすめ商品をスライダーでストアに表示するアプリのメインビジュアル

主な特徴

コレクションの商品をスライダーで表示し、ストア内のどのページにも設置できます。
カードのデザインや画像比率、列数、スライダーの挙動を自由にカスタマイズできます。
クイックビューやカート追加ボタンで、スライダーから直接購入してもらえます。
セールバッジや売り切れバッジを自動で表示し、商品の状態がひと目で分かります。
コーディング不要で、ワンクリックでテーマに追加できます。

コレクションの商品をスライダーで表示できる！

お好きなコレクションを選ぶだけで、その商品をスライダー形式で表示できます。ホームページに「おすすめ商品」として、商品ページに「関連商品」として、といったように、見せたい場所に自由に設置できます。

コレクションの商品をスライダーで表示した様子

カードデザインや列数、挙動を自由にカスタマイズ！

カードのデザインは、ミニマル・枠線あり・影付き・フローティング・ポラロイド・グラスの 6 種類から選べます。PC とモバイルそれぞれの列数や、画像の縦横比も調整できるので、ストアの雰囲気にぴったり合うスライダーを作れます。

カードデザインや列数、挙動をカスタマイズしている設定画面

クイックビューでスライダーから直接購入！

クイックビューボタンやカート追加ボタンを表示すれば、お客様は商品ページに移動しなくても、スライダーから直接商品を確認してカートに追加できます。購入までの手間を減らし、スムーズなお買い物体験を提供します。

クイックビューでスライダーから直接購入できる様子

セールバッジや売り切れバッジで商品の状態がひと目で分かる！

セール中の商品には割引率やセールバッジを、売り切れの商品には売り切れバッジを自動で表示します。お客様は商品の状態をひと目で把握でき、お買い得な商品への注目を集められます。

セールバッジや売り切れバッジが表示された様子

スライダーの挙動（クラシック／ピーク／フェード）を自由に切り替え！

スライダーの動きは「クラシック（横スライド）」「ピーク（次のカードが少し見切れる）」「フェード切替」の 3 種類から選べます。見せ方に合わせて挙動を切り替えることで、ストアの印象を演出できます。

スライダーの挙動を切り替える設定画面

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

コーディングは一切不要です。アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、ストアにスライダーを設置できます。

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

アプリのインストール

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

👉 シンプル商品カルーセル｜お手軽おすすめ商品スライダー（Shopify App Store）

料金: Basic Plan 月額 $3.99（または年額 $39.90 で 17% お得）。インストールから 7 日間は無料でお試しいただけます。年払いにすると実質 2 ヶ月分が無料です。

インストールの手順

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

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

インストールが完了したら、ストアにスライダーを表示するためにアプリブロックをテーマに追加します。追加方法は「自動（1 クリック追加）」と「手動」の 2 通りがあります。

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

もっとも簡単な方法です。アプリの管理画面からワンクリックでスライダーを設置できます。

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

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

特定のページや好きな位置にスライダーを設置したい場合は、手動で追加します。

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

アプリのカスタマイズ

テーマエディタでブロックを選択すると、右側に設定パネルが表示されます。ここでスライダーの見た目や挙動を細かく調整できます。設定はグループごとに分かれているので、順に見ていきましょう。

コンテンツ設定

スライダーに表示する内容の基本設定です。

見出し
スライダーの上部に表示する見出しテキストです（初期値「おすすめ商品」）。「新着商品」「あなたへのおすすめ」など、目的に合わせて変更すると、お客様に内容が伝わりやすくなります。
見出しのフォントサイズ
見出しの文字の大きさを 14px〜48px の範囲で調整できます。ページ全体のバランスに合わせて設定するのがおすすめです。
表示するコレクション
スライダーに表示する商品のコレクションを選びます。未選択の場合はストアの全商品から新しい順で表示されます。コレクションを選択した場合は、そのコレクションの「並び替え」設定に従います（Shopify 管理画面 > 商品管理 > コレクション > 対象のコレクションから変更できます）。
表示する商品数
スライダーに何件の商品を表示するかを、4 件・8 件・12 件・16 件・20 件・24 件から選べます（初期値 12 件）。表示数が多いほどたくさんの商品を見せられますが、読み込みとのバランスを考えて選びましょう。

コンテンツ設定の設定画面

スライダー設定

スライダーの動きや操作まわりの設定です。

スライダーの挙動
スライダーの動き方を選びます。「クラシック（横スライド）」は標準的な横スライド、「ピーク」は次のカードが右端から少しだけ見切れて「続きがある」感を演出、「フェード切替」は 1 枚のカードを画面いっぱいに表示して不透明度で切り替えます。なお「フェード切替」は列数が 1 のときのみ有効で、多列の場合はクラシックの動きになります。
ヘッダーの配置
見出し周りのレイアウトを選びます。「シンプル（見出しのみ）」「見出し + 矢印を横並び」「見出し + もっと見るリンク」「見出しを中央揃え」から、見せ方に合わせて選べます。
「もっと見る」リンクの文字 / URL
ヘッダーの配置を「見出し + もっと見るリンク」にしたときに表示されるリンクの文字と、リンク先 URL です。コレクションページなどへ誘導したいときに便利です。
矢印の形状
左右の矢印ボタンの形を「円形」「ミニマル（線のみ）」「角丸四角」から選べます。「左右の矢印ボタンを表示」が有効なときに反映されます。
PC での列数 / モバイルでの列数
画面に同時に表示する商品の列数を、PC は 2〜5 列、モバイルは 1〜2 列から選べます。デバイスごとに最適な見え方に調整できます。
左右の矢印ボタンを表示
スライダーを操作する左右の矢印ボタンの表示を切り替えます。商品数が列数以下で 1 ページしかないときは自動で非表示になります。
ドット（ページネーション）を表示
スライダーの位置を示すドットの表示を切り替えます。1 ページしかないときは自動で非表示になります。
送りの単位
矢印ボタンを押したときに進む量を「列数ごとに送る」「1 件ずつ送る」から選べます。
オートプレイの間隔（秒）
スライドが自動で切り替わるまでの時間を 0〜15 秒で設定します。0 にするとオートプレイは無効になります。お客様の操作を待たずに次々と商品を見せたいときに便利です。
オートプレイ進捗バーを表示
オートプレイ中、次の切り替えまでの残り時間を示す進捗バーをドットの下端に表示します。オートプレイが有効なときのみ反映されます。
スライドの切替速度
スライドが切り替わるアニメーションの速さを 0.1〜3.0 秒で調整します。値が小さいほどキビキビ、大きいほど滑らかに動きます。
無限ループ
最後のスライドで「次へ」を押すと先頭に戻るようにします。無効にすると端で停止します。

スライダー設定の設定画面

カードデザイン設定

商品カードの見た目を整える設定です。

カードの種類
カードのデザインを「ミニマル」「枠線あり」「影付き」「フローティング（ホバー時に浮く）」「ポラロイド（白フレーム）」「グラス（半透明）」の 6 種類から選べます。ストアの世界観に合わせて選びましょう。
価格の表示方法
価格の見せ方を「横並び」「縦並び（比較価格上）」「割引バッジ付き」から選べます。セールを強調したいときは「割引バッジ付き」がおすすめです。
カードの枠線の丸み
カードの角の丸みを「なし」「小」「中」「大」から選べます。
カードの背景色
カードの背景色を自由に指定できます。
画像の縦横比
商品画像の縦横比を「自動（元の比率）」「正方形（1:1）」「横長（4:3）」「縦長（3:4）」「ワイド（16:9）」から選べます。「自動」は各商品の画像比率をそのまま使うため、カードの高さが商品ごとに異なることがあります。揃った見た目にしたい場合は「正方形」などの固定比率がおすすめです。
画像の表示方法
「カバー（枠いっぱい）」は枠に合わせて画像を切り抜いて表示、「コンテイン（全体を表示）」は画像全体が収まるように表示します。縦横比が「自動」以外のときに反映されます。
マウスオーバーで画像を拡大する
PC でカードにマウスを乗せたときに画像をゆっくり拡大します。商品を魅力的に見せる演出として使えます。

カードデザイン設定の設定画面

バッジ・ボタン設定

セールバッジや購入ボタン、クイックビューなどの設定です。

セールバッジの表示
セール中の商品に表示するバッジを「割引率で表示」「テキストで表示」「非表示」から選べます。「非表示」を選ぶとセールバッジ自体が出ず、以下のバッジ関連設定（形状・テキスト・色）は反映されません。
セールバッジの形状
バッジの形を「標準（塗りつぶし）」「丸型」「枠線のみ」から選べます。セールバッジを表示しているときに反映されます。
セールバッジのテキスト
セールバッジに表示する文字です。「テキストで表示」を選んだときに反映されます（「割引率で表示」のときは自動で -XX% になります）。
セールの色
セールバッジの背景色とセール価格の文字色です。バッジ色は表示時のみ反映され、価格色は常に反映されます。
売り切れバッジのテキスト
在庫切れの商品に表示するバッジの文字です（初期値「Sold Out」）。
ボタンの種類
商品カードのボタンを「枠線」「塗りつぶし」「テキストリンク」「非表示」から選べます。
ボタンの枠線の丸み
ボタンの角の丸みを「なし」「小」「中」「丸型」から選べます。
カートボタンの文字
カート追加ボタンに表示する文字です。ボタンを表示しているときと、クイックビューモーダル内のカートボタンに反映されます。
カート追加後の文字
カートに追加できた直後に一時的に切り替わるボタン文字です。「Added!」のように、追加できたことが伝わる文言にすると親切です。
クイックビューボタンを表示
商品画像の上にクイックビューボタンを重ねて表示します。PC ではマウスを乗せたときに、モバイルでは常時表示されます。商品ページに移動せずに詳細を見せたいときに便利です。
クイックビューボタンの文字
クイックビューボタンに表示する文字です。クイックビューを有効にしているときに反映されます。
商品ページリンクの文字
クイックビューモーダル内に表示する、商品ページへのリンクの文言です。
数量ラベル
クイックビューモーダル内の数量入力欄のラベルです（初期値「Qty」）。
前へ／次へボタンの読み上げラベル
スクリーンリーダー向けの、矢印ボタンの読み上げラベルです。アクセシビリティ向上のために設定できます。矢印ボタンを表示しているときに反映されます。
ページドットの読み上げラベル
スクリーンリーダー向けの、ページネーションドットの読み上げラベルです（例：「Go to slide 3」）。ドットを表示しているときに反映されます。