【2026年】Shopifyに複数画像スライドショーを表示する方法｜おすすめアプリも紹介！

はじめに
Shopifyで複数画像スライドショーを表示できる？
Shopifyで複数画像スライドショーを導入するメリット・デメリット
- メリット
- デメリット
実装方法の全体像（テーマのコード編集 / アプリ）
- テーマのコード編集で実装する方法
- アプリで実装する方法
手軽に試すならアプリがおすすめな理由
おすすめアプリ「シンプル複数画像スライドショー｜お手軽イメージカルーセル」とは
- できること（要点）
- どんなストアに向いている？
「シンプル複数画像スライドショー」インストール手順
- インストールの流れ
- インストール手順（詳細）
テーマにアプリブロックを追加して表示する方法（自動 / 手動）
- 自動でテーマに追加（1クリック）
- 手動でテーマに追加（好きなページ・好きな場所に設置）
アプリブロックのカスタマイズ方法（画像・リンク・デザイン・余白・CSS）
運用のコツ（回遊とCVRを伸ばす“見せ方”）
よくあるトラブルシューティング
テーマのコード編集で複数画像スライドショーを実装する方法（サンプルコード）
実装後のチェックリスト
まとめ

はじめに

2026 年現在、Shopify は「すぐに始められるのに拡張性が高い」EC プラットフォームとして、個人ブランドからD2C、老舗企業の直販まで幅広く選ばれ続けています。

ただ、ストアを立ち上げただけでは売上は伸びません。特に成果が出やすいのが、トップページ・コレクションページ・商品ページにおける 導線設計（回遊設計） です。

そこで活躍するのが、今回のテーマである Shopify の複数画像スライドショー（カルーセル） です。

新作コレクションへ誘導したい
セール会場へ流したい
ランキングや特集へ回遊させたい
「次が気になる」見切れ表示でスクロールを促したい

こういった “ストア内広告” のような役割を、複数画像スライドショーで自然に実現できます。

本記事では、キーワードである 「shopify スライドショー複数画像」 を軸に、次の 2 つのアプローチで「そのまま投稿できる」レベルまで落とし込んで解説します。

テーマのコード編集（Liquid / CSS / JavaScript）で実装する方法
アプリでノーコード導入する方法（おすすめアプリの手順・使い方まで）

特に、手軽に導入できるおすすめアプリとして
「シンプル複数画像スライドショー｜お手軽イメージカルーセル」 を紹介し、インストールから設置、カスタマイズ、運用のコツまでまとめます。

Shopifyで複数画像スライドショーを表示できる？

結論から言うと、Shopify で複数画像スライドショーを表示することは可能です。

ただし「Shopify 標準機能だけで、理想の複数画像カルーセルがすぐ作れるか？」というと、テーマ次第で差が出ます。

Shopify テーマでよくあるのは、次の 2 パターンです。

ヒーロー型スライドショー（1枚ずつ切り替わる）
いわゆるトップの大型バナー。1スライド=1画像で全幅表示が多い。
複数画像カルーセル（横並び・見切れ表示あり）
1画面に複数画像が並び、次の画像が少し見えるタイプ。回遊導線に強い。

多くのテーマは前者（ヒーロー型）が標準で、後者（複数画像・見切れ表示）は「アプリ」または「コード実装」で作り込むことが多いです。

だからこそ、「Shopify で複数画像スライドショーを作りたい」となった時は、次のどちらかで考えるのが最短です。

アプリでサクッと導入して、デザインを調整しながら運用する
テーマ編集で実装して、見た目や挙動を完全にコントロールする

次は、導入前に押さえておきたいメリット・デメリットを整理します。

Shopifyで複数画像スライドショーを導入するメリット・デメリット

複数画像スライドショーは、ただ“おしゃれ”になるだけではなく、運用目的がはっきりすると効果が出やすい施策です。逆に、目的が曖昧だと「スペースを取るだけ」になりやすいので、導入前に整理しておきましょう。

メリット

回遊（ページ遷移）が増え、ストア内の“次の行動”を作れる

複数画像スライドショーの一番の強みは、リンク付きのバナーを複数並べて“次の動線”を作れることです。

新作コレクション
セール会場
ランキング
特集記事（ブログ）
期間限定キャンペーン

など、ユーザーが迷わず次のページへ進める状態を作れます。

見切れ表示で「続きが気になる」視覚効果が作れる

画像が 1 枚ずつ切り替わるだけのスライドショーより、次の画像が少し見えている方が「横にスワイプできそう」が直感的に伝わります。

特にスマホでは、この差が大きいです。

「これ、横に動くやつだ」と気づきやすい
ついスワイプしてしまう
結果として、クリックや回遊に繋がりやすい

ストアの世界観を崩さずに“情報量”を増やせる

トップページに情報を足したいとき、テキストを増やすと読まれません。
一方、画像なら「視覚で伝わる」ので、世界観を維持したまま情報を増やせます。

画像でカテゴリを見せる
画像で季節キャンペーンを見せる
画像でランキングを見せる

こういう “視認性の高い導線” は、売上に直結しやすいです。

A/B 的に差し替えがしやすい

複数画像スライドショーは、差し替えが簡単です。

反応が悪いバナーを差し替える
季節イベントに合わせて入れ替える
同じ枠で訴求を回す

こうした改善を回しやすいのもメリットです。

デメリット

やりすぎると“バナーだらけ”で安っぽく見える

スライドショーは便利ですが、入れすぎると

情報過多で何が大事か分からない
バナーが広告っぽく見えてチープ
結果としてクリックされない

という状態になりがちです。

基本は「少数精鋭（3〜5枚）」がおすすめです。

表示が重いと、速度低下で逆効果になる

画像は重いです。スライドショーは複数枚表示するため、最適化しないと表示速度に影響が出ます。

画像サイズが大きすぎる
WebP 未対応の重い画像
過剰なアニメーション

このあたりは「運用のコツ」で詳しく対策します。

テーマやデバイスで見え方がズレることがある

特に複数画像・見切れ表示は、PC / スマホでの表示設計が重要です。

PC は横に複数枚並べたい
スマホは見切れでスワイプを促したい
余白・矢印・角丸などをテーマに合わせたい

アプリでもコードでも、ここを詰めないと “なんかダサい” になりやすいです。

実装方法の全体像（テーマのコード編集 / アプリ）

Shopify で複数画像スライドショーを表示する方法は、大きく分けて 2 つです。

テーマのコード編集（Liquid / CSS / JS）で実装する
アプリで実装する（ノーコードで導入）

それぞれの特徴を、運用目線で比較します。

テーマのコード編集で実装する方法

テーマファイルを編集し、スライドショー用の HTML / CSS / JS を追加して実装します。

メリット
- 月額コストがかからない
- デザイン・表示ロジックを自由に作り込める
- 表示位置・条件（特定ページだけ等）を細かく制御できる
デメリット
- 実装に技術が必要（外注コストが発生しやすい）
- テーマ更新時に差分管理が必要
- ミスると表示崩れ・速度低下・メンテ負荷が出る

「開発体制がある」「デザインに強いこだわりがある」ならコード実装が向きます。

アプリで実装する方法

Shopify アプリをインストールし、テーマエディタからアプリブロックを追加して設置します。

メリット
- ノーコードで導入できる
- UI でデザイン調整できる（余白・矢印・角丸など）
- テーマ更新時の保守が楽になりやすい
- まず試して改善するサイクルが回しやすい
デメリット
- 月額費用がかかる場合が多い
- アプリ仕様に依存する（細かい挙動が完全自由ではないことも）

「まず効果検証したい」「スピード優先」ならアプリが強いです。

手軽に試すならアプリがおすすめな理由

Shopify の UI 改善は、最初から 100 点を狙うより、出して→反応を見て→調整するのが最短です。

複数画像スライドショーでも、実際に運用すると次のような調整が必ず発生します。

「画像比率が合わずにズレる」
「PC は 3 枚見せたいけどスマホは 1.2 枚見せたい」
「矢印が目立ちすぎる / 目立たない」
「余白が詰まってる / 間延びしてる」
「どのリンクが一番クリックされるか」

コード実装で都度調整すると、どうしても

変更 → テスト → 反映が遅い
軽微な調整でも工数がかかる
担当者が変わると保守が止まる

という状態になりがちです。

アプリなら、テーマエディタ上で

画像の差し替え
余白調整
矢印や角丸の調整
オートスライド速度の調整
追加 CSS で微調整

ができるので、改善サイクルが速く回せます。

「shopify スライドショー複数画像」を最短で実現して、まず成果を見たいなら、アプリ導入が合理的です。

「シンプル複数画像スライドショー」インストール手順

ここからは、ご利用ガイドを元に「シンプル複数画像スライドショー｜お手軽イメージカルーセル」の導入手順を解説します。

アプリページ：
https://apps.shopify.com/sa-154-ur-multi-slideshow?locale=ja

インストールの流れ

ざっくり次の流れです。

Shopify 管理画面からアプリストアへ移動
アプリを検索してインストール
テーマにアプリブロックを追加
画像・リンク・デザインを調整して保存

インストール手順（詳細）

Shopify 管理画面左下の「設定」をクリック
「アプリ」から「Shopify App Store」を開く
検索窓で「シンプル複数画像スライドショー｜お手軽イメージカルーセル」を検索し、アプリ詳細を開く
「インストール」をクリックし、権限を確認してインストールを完了

以上でインストールは完了です。次は、テーマに追加して表示させます。

テーマにアプリブロックを追加して表示する方法（自動 / 手動）

Shopify の Online Store 2.0（OS2.0）テーマでは、アプリは アプリブロックとしてテーマに差し込みます。

このアプリも、テーマエディタ上で追加できるようになります。

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

最短ルートの「自動追加」です。

Shopify 管理画面で本アプリを開く
「テーマを選択」から追加先テーマを選ぶ
「テーマに追加」をクリック
テーマエディタが開いたら「保存」して完了

「とりあえず表示まで持っていく」なら、この方法が一番速いです。

手動でテーマに追加（好きなページ・好きな場所に設置）

トップ以外（商品ページ、コレクションページ、ブログなど）に置きたい場合や、狙った位置に差し込みたい場合は手動追加がおすすめです。

Shopify 管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」を開く
設置したいページ（テンプレート）へ移動
「セクションを追加」または「ブロックを追加」→「アプリ」から本アプリを選んで追加
設定を整えて「保存」

これで、狙った位置に「Shopify 複数画像スライドショー」を設置できます。

アプリブロックのカスタマイズ方法（画像・リンク・デザイン・余白・CSS）

アプリブロックを追加したら、テーマエディタの右（または左）に設定項目が表示され、ノーコードで調整できます。

本アプリはデザインが 2 種類あり、ブロック（フラット型／ハイライト型）によって一部設定が変わります。

フラット型の設定項目
ハイライト型の設定項目

ここでは、特に重要な設定を「運用目線」で解説します。

画像設定（画像1〜画像5）

画像枠が 画像 1〜画像 5 まで用意されており、スライドに表示する画像を指定します。

画像の枚数は「多いほど良い」ではなく、基本は 3〜5 枚が扱いやすいです。
まずは「最優先の導線」を 1 枚目に置くのがコツです。

運用例：

画像1：新作コレクション
画像2：セール会場
画像3：ランキング
画像4：定番カテゴリ
画像5：ブログ（特集記事）

リンク設定（リンク1〜リンク5）

各画像にリンクを設定でき、クリック（タップ）で任意ページへ移動します。

リンクの貼り先としておすすめは次の通りです。

コレクションページ（最も自然で回遊に強い）
特集 LP（セール会場など）
ブログ記事（読み物→商品への導線がある場合）
商品ページ（ランキング型にする場合）

「リンクを新しいタブで開く」も設定できるので、外部ページに飛ばす時だけ ON にする運用が無難です（基本はストア内回遊を増やしたいはずなので）。

画像のアスペクト比

画像の縦横比（比率）を選択できます。

ここでズレると一気に “整ってない感” が出るので、最初に方針を決めましょう。

商品写真が正方形中心 → 1:1 が合わせやすい
バナー中心 → 横長が合わせやすい
コレクションカードっぽく見せたい → 少し縦長もアリ

ポイントは「ストア内で他の画像比率と揃える」ことです。
スライドショーだけ比率が違うと、違和感が出ます。

スライドの高さ・間隔（フラット型）

フラット型には「スライドの高さ」「スライドの間隔」があります。

高さ：複数画像を並べたときに段差が出ないように揃える
間隔：詰めると一覧っぽい / 広げると余白感が出る

おすすめの考え方：

まず “余白多め” から開始
クリック率が低ければ、少し詰めて「一覧感」を出す
スマホは詰めすぎると窮屈なので注意

矢印のスタイル・色・大きさ

矢印は「目立たせたい」気持ちになりがちですが、やりすぎると広告っぽくなります。

矢印が目立ちすぎる → 画像より矢印に目が行く
矢印が弱すぎる → スライドだと気づかれない

おすすめは、まず

色はストアのボタン色（または文字色）に寄せる
サイズは “小さめ〜中”
目立たなければ少しずつ強める

です。

角の丸み（角丸）

角丸は “統一感” に直結します。

ボタンが丸い → スライドも丸い
ボタンが角張っている → スライドも角張らせる

テーマの UI と揃えるだけで、完成度が上がります。

自動スライドのスピード（秒）

オートスライドの速度を秒で設定できます。

重要ポイントとして：

0 に設定すると自動スライドが停止
負の値にすると逆方向にスライド

運用のおすすめ：

まずは自動スライド OFF（0）で開始
触られないなら 4〜8 秒でゆっくり回す
速すぎる自動スライドは “うるさい” ので避ける

余白設定（PC / スマホ）

ブロック上下の余白を PC / スマホで個別に設定できます。

余白は地味ですが、ズレると違和感が出やすいポイントです。

詰まりすぎる → 圧迫感が出る
空きすぎる → 間延びする

おすすめは、設置場所ごとに最適化することです。

トップのファーストビュー付近：余白少なめ
中盤の導線：余白中
フッター付近：余白多めでもOK（圧迫回避）

追加 CSS（最後の仕上げ）

「設定だけだと微妙に合わない」場合は、追加 CSS で上書きできます。

入力欄の例：
追加CSSの入力欄（テーマエディタ）

例えば「画像の角丸をもう少し強めたい」「矢印の影を消したい」など、テーマに馴染ませる微調整に使えます。

例（あくまでイメージ）：

/* 例：スライド画像をもう少し丸くする（クラス名は実際の出力に合わせてください） */
.ur-multi-slideshow img {
  border-radius: 16px;
}

/* 例：矢印ボタンの影を弱める */
.ur-multi-slideshow .arrow-button {
  box-shadow: none;
}

クラス名はストア環境で異なることがあるため、ブラウザの検証ツールで要素を確認してから当てるのが確実です。

運用のコツ（回遊とCVRを伸ばす“見せ方”）

「Shopify で複数画像スライドショーを表示できた」で終わらせず、成果に繋げるための考え方をまとめます。

設置場所は“目的”から逆算する

複数画像スライドショーは、置く場所で役割が変わります。

トップページ上部
- 目的：主要導線（新作・セール・特集）をまとめて提示
- コツ：最重要を 1 枚目に。枚数は 3〜5 に絞る
トップページ中盤
- 目的：カテゴリ回遊、ランキング導線
- コツ：商品一覧に入る前に “次の選択肢” を作る
コレクションページ上部
- 目的：関連コレクション、特集への誘導
- コツ：同カテゴリの回遊や、キャンペーン誘導に強い
商品ページ
- 目的：関連カテゴリ・別の特集への回遊（離脱対策）
- コツ：購入導線の邪魔にならない位置（下部寄り）に置く
ブログページ
- 目的：記事から商品やコレクションへ誘導
- コツ：記事末尾に「次に見てほしい」を提示

「クリックしてほしいページがあるか？」が設置判断の基準になります。

スライドの枚数は少数精鋭が強い

ありがちなのが、枠があるからといって 10 個くらい入れたくなるケースです。

でも、ユーザーが見ているのは一瞬です。

3〜5 枚が最も扱いやすい
1 枚目は最重要導線
2〜3 枚目は準重要導線
残りは季節枠（入れ替え枠）

“入れ替える前提”で設計すると、運用が回ります。

画像の作り方は「テキストを載せすぎない」

画像バナーはテキストを入れたくなりますが、スマホだと読めません。

おすすめは、画像内テキストは最小限にして

「カテゴリ名」
「セール」
「新作」

くらいの短い文言に抑え、詳細は遷移先で説明する設計です。

どうしても説明が必要なら、画像ではなくスライドの下に短いテキストを添える（可能な場合）方が読みやすいです。

リンク先は“迷わせない”ページを選ぶ

クリックされたのに迷うページに飛ぶと、回遊が止まります。

おすすめのリンク先：

コレクション（商品が並んでいて次の行動が明確）
セール会場（商品が並んでいる）
ランキング（商品が並んでいる）

逆に、トップページをリンク先にするのは意味が薄いことが多いです。
「次にどこへ行くか」を決めるために置いているので、リンク先は “決断が早い” ページに寄せると成果が出やすいです。

速度対策は“画像最適化”が最重要

複数画像スライドショーは画像枚数が増えるので、速度への配慮が必須です。

画像は必要以上に大きくしない
画像の比率を揃えてトリミングを減らす
可能なら WebP を使う
文字を画像内に詰め込みすぎない（高解像度が必要になる）

アプリの場合は Shopify CDN で最適化されやすいですが、それでも「元が重い」画像だと限界があります。

計測して改善する（最低限のKPI）

複数画像スライドショーは “回遊導線” なので、次を見て効果を判断します。

スライドのリンククリック率（可能なら）
コレクションページの閲覧数
セール会場の閲覧数
CVR（購入率）
平均注文額（AOV）

「どの導線が効いているか」が分かると、差し替えが速くなります。

よくあるトラブルシューティング

スライドショーが表示されない

まず確認すること：

テーマにアプリブロックを追加できているか
保存を押しているか
表示したいテンプレートに追加しているか（トップではなく商品テンプレに入れてしまった等）

TODO: 画像を入れる（テーマエディタでブロックが入っていることを確認する画面）

画像が崩れる / 高さが揃わない

原因はほぼこれです。

画像の比率がバラバラ
画像の余白が含まれている（バナー素材の作りが違う）

対策：

画像比率を揃えて書き出す
アスペクト比設定を固定する
フラット型の「スライドの高さ」を使って揃える

矢印が見づらい / 目立ちすぎる

対策：

矢印色をテーマの文字色に寄せる
サイズを少しだけ上げる / 下げる
背景が白い画像が多いなら矢印に縁取り（可能なら）

追加 CSS で調整するのも有効です。

自動スライドが動かない

設定で 0 にしていると停止します。
まずは 4〜8 秒などに設定して挙動を確認してください。

また、逆方向にしたい場合は 負の値を使います。

クリックしてもリンクに飛ばない

原因として多いのは次です。

リンク欄が未設定
リンク先が間違っている（URLの形式ミス）
クリック領域が矢印と重なっている（PCで起きることがある）

対策：

リンク 1〜5 が全て入っているか確認
クリックできる領域をプレビューで確認
必要なら矢印サイズを調整

テーマのコード編集で複数画像スライドショーを実装する方法（サンプルコード）

ここからは、アプリを使わずに テーマ編集で Shopify 複数画像スライドショーを実装する場合のサンプルです。

注意：テーマ編集はストアに影響する可能性があります。
必ずテーマを複製してバックアップを取り、プレビュー環境で検証してから公開してください。

実装の考え方

実装方法はいろいろありますが、運用しやすさと軽さを優先すると、次の構成が扱いやすいです。

Liquid で画像とリンクを出力（ブロックで管理できるようにする）
CSS の scroll-snap を使って “軽いカルーセル” を作る
JavaScript は「矢印で横スクロールする」程度に最小限

ライブラリ（Swiper 等）を入れれば高機能になりますが、まずは軽く作るのが安全です。

セクションとして追加する方法（おすすめ：管理しやすい）

手順

「オンラインストア」→「テーマ」→「コードを編集」
sections に multi-image-slideshow.liquid を作成
下記コードを貼り付け
テーマエディタで「セクションを追加」→ Multi image slideshow を追加して使う

セクションコード例

{% comment %}
Multi Image Slideshow (simple)
- Scroll-snap based carousel
- "Peek" effect (next slide partially visible on mobile)
- Link per slide
{% endcomment %}

<section class="mis" data-mis>
  {% if section.settings.heading != blank %}
    <h2 class="mis__heading">{{ section.settings.heading }}</h2>
  {% endif %}

  <div class="mis__viewport">
    <button class="mis__nav mis__nav--prev" type="button" aria-label="前へ" data-mis-prev>
      ‹
    </button>

    <div class="mis__track" data-mis-track>
      {% for block in section.blocks %}
        {% if block.type == 'slide' and block.settings.image != blank %}
          <a class="mis__slide" href="{{ block.settings.link | default: '#' }}" {{ block.shopify_attributes }}>
            {{ block.settings.image | image_url: width: 1400 | image_tag: loading: 'lazy', class: 'mis__img', alt: block.settings.alt | escape }}
          </a>
        {% endif %}
      {% endfor %}
    </div>

    <button class="mis__nav mis__nav--next" type="button" aria-label="次へ" data-mis-next>
      ›
    </button>
  </div>
</section>

<style>
  .mis { margin: 0 auto; padding: {{ section.settings.padding_y }}px 0; }
  .mis__heading { margin: 0 0 12px; font-size: 1.2em; }

  .mis__viewport { position: relative; }
  .mis__track {
    display: flex;
    gap: {{ section.settings.gap }}px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px;
  }

  .mis__slide {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - 56px); /* mobile peek */
    text-decoration: none;
  }

  .mis__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: {{ section.settings.radius }}px;
  }

  .mis__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    background: rgba(255,255,255,.8);
    cursor: pointer;
    line-height: 1;
    font-size: 20px;
  }
  .mis__nav--prev { left: 6px; }
  .mis__nav--next { right: 6px; }

  @media (min-width: 990px) {
    .mis__slide { flex: 0 0 calc(33.333% - {{ section.settings.gap }}px); } /* PC: 3 columns */
    .mis__nav { width: 40px; height: 40px; font-size: 22px; }
  }
</style>

<script>
  (function () {
    const root = document.currentScript && document.currentScript.previousElementSibling;
  })();
</script>

{% schema %}
{
  "name": "Multi image slideshow",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し", "default": "おすすめコレクション" },
    { "type": "range", "id": "gap", "label": "スライド間隔(px)", "min": 0, "max": 32, "step": 2, "default": 12 },
    { "type": "range", "id": "radius", "label": "角丸(px)", "min": 0, "max": 30, "step": 2, "default": 12 },
    { "type": "range", "id": "padding_y", "label": "上下余白(px)", "min": 0, "max": 80, "step": 4, "default": 24 }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "スライド",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "画像" },
        { "type": "url", "id": "link", "label": "リンク先" },
        { "type": "text", "id": "alt", "label": "altテキスト", "default": "スライド画像" }
      ]
    }
  ],
  "max_blocks": 8,
  "presets": [
    { "name": "Multi image slideshow" }
  ]
}
{% endschema %}

追加のJavaScript（矢印で横スクロール）

上のコード例は骨格なので、矢印での移動を付けたい場合は JS を追加します。
（テーマの assets に JS を置く運用でも OK です）

以下は最小実装の例です。

document.querySelectorAll('[data-mis]').forEach((wrap) => {
  const track = wrap.querySelector('[data-mis-track]');
  const prev = wrap.querySelector('[data-mis-prev]');
  const next = wrap.querySelector('[data-mis-next]');
  if (!track || !prev || !next) return;

  const scrollByAmount = () => {
    const firstSlide = track.querySelector('.mis__slide');
    if (!firstSlide) return 320;
    return firstSlide.getBoundingClientRect().width + parseFloat(getComputedStyle(track).gap || 0);
  };

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