【2026年】Shopify スライドショーで複数画像を横並び表示する方法｜カルーセルのよくある疑問とおすすめアプリ
目次
- はじめに
- Q. そもそも「スライドショー」と「複数画像カルーセル」はどう違う？
- Q. 複数画像スライドショーって、入れると本当に成果につながるの？
- Q. スライドは何枚まで入れていい？多いほどお得じゃないの？
- Q. 画像を増やすと表示が重くなる？速度はどこまで気にすべき？
- Q. 結局、アプリとテーマ編集のどちらで作るべき？
- おすすめアプリ「シンプル複数画像スライドショー｜お手軽イメージカルーセル」とは
- 「シンプル複数画像スライドショー」インストール手順
- Q. インストールしたのに表示されない。テーマにはどう載せる？
- Q. 設定項目が多くて迷う。どこから触れば失敗しない？
- Q. 設置したあと、何を見れば「効いている」と判断できる？
- Q. トラブルが起きたときのチェックポイントは？
- Q. アプリを使わずテーマ編集で作るには？（サンプルコード）
- 公開前のチェックリスト
- まとめ
- 参考記事
はじめに
「Shopify でスライドショーに複数画像を横並びで載せたいのに、テーマの標準機能だとうまくいかない」——このつまずきは、実はかなり多くの方が踏む共通の壁です。
理由はシンプルで、Dawn をはじめとした無料テーマの標準スライドショーは、大きなヒーローバナーを 1枚ずつ切り替える 用途を前提に作られているからです。複数画像を横に並べたり、次の画像が少しだけ見える 「見切れ表示」 を作ったりすることは、標準設定の範囲では基本的にできません。これを実現するにはテーマの Liquid/CSS 編集か、専用アプリの導入が必要になります。
この記事では、「shopify スライドショー 複数画像」 を実現したい方が実際につまずく疑問を Q&A 形式で先回りして答えながら、「Shopify 複数画像 カルーセル」をノーコードでもコードでも設置できるところまで落とし込みます。途中で、手軽に導入できる 「シンプル複数画像スライドショー｜お手軽イメージカルーセル」（Shopify App Store）の設定手順と、アプリを使わずテーマ編集で組む場合のサンプルコードの両方を扱います。
今回は、以下の記事を参考にしています。
- Shopifyで複数画像スライドショーを作成する方法5つ紹介！
- Shopifyで複数画像スライドショーを実現できるアプリ7選を紹介！
- Shopifyで一度に複数画像を表示できるスライドショーアプリ10選を紹介！
- Shopifyストアに複数画像のスライドショーを表示できるアプリについて徹底解説
Q. そもそも「スライドショー」と「複数画像カルーセル」はどう違う？
検索意図がズレたまま設定を始めると、目的の見た目にたどり着けません。まずは言葉の整理からです。
Shopify でよく出てくる表示形式は、大きく次の2種類に分かれます。
-
ヒーロー型スライドショー（1枚ずつ切り替わる）
トップの大型バナー。1スライド＝1画像で全幅表示が多く、世界観を見せる用途に向きます。標準テーマが想定しているのは主にこちらです。 -
複数画像カルーセル（横並び・見切れ表示あり）
1画面に複数画像が並び、次の画像が少しだけ見えるタイプ。横スワイプを誘発し、回遊導線をつくるのに強いのがこの形式です。
検索で「shopify スライドショー 複数画像」「Shopify 複数画像 カルーセル」と調べる方が本当に欲しいのは、ほぼ後者です。つまり 複数の画像を同時に横並びで見せたい というニーズが核心にあります。ところが標準テーマの「スライドショー」セクションは前者のヒーロー型なので、設定をいくらいじっても複数画像の横並びにはならない——ここが最初のつまずきポイントです。
筆者の感覚では、ここを取り違えたまま「テーマのスライドショー設定」を探し続けてしまう相談が一番多いです。やりたいことが横並びカルーセルなら、最初から「アプリ」か「コード実装」の二択で考えるのが結果的に最短になります。
Q. 複数画像スライドショーって、入れると本当に成果につながるの？
「おしゃれにはなりそうだけど、効果があるのか分からない」という疑問はもっともです。役割を整理すると、刺さる場面とそうでない場面がはっきりします。
複数画像カルーセルの強みは、リンク付きのバナーを複数並べて「次の動線」をまとめて提示できる ことにあります。
- 新作コレクションへ誘導したい
- セール会場へ流したい
- ランキングや特集へ回遊させたい
- 見切れ表示で「続きが気になる」状態をつくり、スクロール・スワイプを促したい
こうした 「ストア内広告」 のような役割を、世界観を崩さずに増やせるのが利点です。テキストを足しても読まれませんが、画像なら視覚で一瞬で伝わるため、情報量を増やしつつ圧迫感を抑えられます。反応の悪いバナーを差し替えるだけで訴求を回せる、いわば A/B 的な運用がしやすいのも実務での魅力です。
一方で、目的が曖昧なまま置くと「スペースを取るだけ」になりがちです。1ページに載せる情報が少ない高級ブランド系のストアなどは、枚数とデザインを控えめに設計したほうがハマります。置く前に「クリックしてほしいページがあるか」 を一度自問するのがおすすめです。
Q. スライドは何枚まで入れていい？多いほどお得じゃないの？
枠が用意されていると、つい上限まで画像を詰めたくなります。ですが、ここはデータがはっきり「No」と言っている領域です。
カルーセルのクリックに関する Notre Dame 大学の Erik Runyon 氏による実測では、スライダー全体をクリックするのは訪問者のおよそ1% にとどまりました。さらにそのうち 約84%が1枚目のスライド をクリックしており、2枚目以降に分散するのは残りの約16%だけです。5枚構成なら、2枚目以降は1枚あたりおよそ4%という計算になります。
つまり、後ろのスライドはほとんど見られません。枚数を増やすほど1枚あたりの訴求は薄まり、しかも読み込みは重くなる——増やすほど逆効果になりやすいわけです。
ここから導ける実務上の目安はシンプルです。
- スライドは 3〜5枚まで に絞る
- 1枚目に最優先の導線 を置く（ここが事実上の主役）
- 1スライドにつき明確な CTA は1つに絞る
- 自動再生を使うなら、特にモバイルでは 手動スワイプ操作を必ず残す（自動送り待ちはモバイルの離脱要因になります）
筆者としては「残り2枚は季節ごとの入れ替え枠」と割り切る設計をおすすめします。全部を作り込もうとせず、1〜2枚目に注力したほうが運用は回ります。
Q. 画像を増やすと表示が重くなる？速度はどこまで気にすべき？
複数画像を扱う以上、表示速度は避けて通れません。ここは感覚論ではなく、Core Web Vitals の指標で考えると判断しやすくなります。
EC サイトでは LCP（最大コンテンツの描画）の目標は2.5秒未満、4秒を超えると「poor（要改善）」と評価されます。ファーストビューに置いたカルーセル画像は、まさにこの LCP の対象要素になりやすいので注意が必要です。
速度がコンバージョンに効く度合いも具体的です。ページ速度が 1秒遅延するとコンバージョンは約7%低下 するとされ、カルーセルで読み込みが2秒増えると、同じコンバージョンを維持するのに14%の改善が必要になる、という計算が成り立ちます。「とりあえず高解像度の画像を5枚」では、この負債を背負うことになります。
対策は次の通りです。
- 画像は必要以上に大きくしない（表示幅に合わせて書き出す）
- 写真は JPEG/WebP、ロゴや透過素材は PNG と使い分ける
- 遅延読み込み（lazy load）を効かせる
- 画像内に文字を詰め込みすぎない（高解像度が必要になり重くなる）
アプリ経由なら Shopify CDN で最適化されやすいものの、元データが重ければ限界があります。後述するコード例では、画像出力に loading: 'lazy' を入れて遅延読み込みを前提にしています。
Q. 結局、アプリとテーマ編集のどちらで作るべき？
ここが一番の分かれ道です。判断軸は「開発体制があるか」と「どれだけ早く効果検証したいか」の2つに集約されます。
テーマのコード編集（Liquid / CSS / JS）で実装する場合
- 向いているケース：開発体制がある／デザインに強いこだわりがある
- メリット：月額コストがかからない、表示位置や条件（特定ページだけ等）を細かく制御できる、世界観に完全に合わせられる
- デメリット：実装・保守に技術が必要、テーマ更新時に差分管理が必要、ミスると表示崩れ・速度低下が起きる
アプリで実装する場合
- 向いているケース：まず効果検証したい／スピード優先／コード編集は避けたい
- メリット：ノーコードで導入できる、UI で余白・矢印・角丸などを調整できる、テーマ更新時の保守が楽
- デメリット：月額費用がかかる、アプリ仕様に依存する（細かい挙動が完全自由ではないことも）
Shopify の UI 改善は、最初から100点を狙うより 出して→反応を見て→調整する のが最短です。複数画像カルーセルでも、実際に運用すると「PC は3枚見せたいけどスマホは1.2枚見せたい」「矢印が目立ちすぎる」「余白が詰まっている」といった調整が必ず発生します。コード実装だと変更のたびにテスト・反映の工数がかかり、担当者が変わると保守が止まりがちです。まず試して改善サイクルを速く回したいなら、アプリ導入が合理的 というのが筆者の結論的な見立てです。
以降では、そのアプリ導入の具体的な手順を見ていきます（コード派の方は後半のサンプルへ飛んでください）。
おすすめアプリ「シンプル複数画像スライドショー｜お手軽イメージカルーセル」とは
ここで紹介するのは、Shopify ストア内の好きな場所に 見切れ表示つきの複数画像スライドショー をノーコードで追加できるアプリ、「シンプル複数画像スライドショー｜お手軽イメージカルーセル」 です。
- 価格：Basic プラン 月額 $4.99（年額 $49.99／7日間の無料体験あり）
- リリース：2026年2月19日
- カテゴリー：画像ギャラリー
- 対応言語：日本語を含む多言語
このアプリの差別化ポイントは、「見切れ表示付き＋複数画像の横並び＋各画像へのリンク導線」をまとめてノーコードで設置できる ことです。標準テーマでは作りにくかった「複数画像 カルーセル」を、コードに触れずそのまま実現できます。
運用目線でできることを整理すると次の通りです。
- 見切れ表示つきの複数画像スライドショーをノーコードで追加
- 各スライドにリンク設定（新作・セール・コレクションなどへ誘導）
- 2種類のデザイン（フラット型 / ハイライト型）を選べる
- PC では複数画像を横並び表示して訴求を強くできる
- 画像比率、矢印、角丸、余白、オートスライド速度などを調整できる
- 必要なら追加 CSS で微調整も可能
実際のイメージ（抜粋）：
-
複数の画像を左右に見切れさせて表示できる
-
スライドショーは 2 つのデザインから選べる
-
ノーコードで見た目をカスタマイズできる
なお、「1枚ずつ切り替わるヒーロー型スライダーが欲しい」という場合は用途が別物です。その際は同じ開発元の UR: Smart Image Slideshow が対応しています（月額 $3.99＝年額 $39.99 で16%オフ、7日間無料、PC/モバイルで別画像を設定でき、アニメーションや速度のカスタムが可能）。横並びカルーセルなら本記事のアプリ、1枚切替バナーならこちら、と覚えておくと選びやすいです。
このアプリが特に相性が良いのは、トップで「新作・セール・特集」をまとめて見せたいストア、コレクションへの回遊を増やしたいストア、スマホの操作感を良くして CTR を上げたいストア、そして見切れ表示で 「続きが気になる」 UI を作りたいストアです。
「シンプル複数画像スライドショー」インストール手順
ここからは、ご利用ガイドを元に「シンプル複数画像スライドショー｜お手軽イメージカルーセル」の導入手順を解説します。
流れとしては「管理画面からアプリストアへ移動 → 検索してインストール → テーマにアプリブロックを追加 → 画像・リンク・デザインを調整して保存」の4ステップです。
インストール手順（詳細）
-
Shopify 管理画面左下の「設定」をクリック
-
「アプリ」から「Shopify App Store」を開く
-
検索窓で「シンプル複数画像スライドショー｜お手軽イメージカルーセル」を検索し、アプリ詳細を開く
-
「インストール」をクリックし、権限を確認してインストールを完了
以上でインストールは完了です。次は、テーマに追加して表示させます。
Q. インストールしたのに表示されない。テーマにはどう載せる？
OS2.0 テーマでは、アプリは アプリブロック としてテーマに差し込む仕組みです。インストールだけでは表示されないため、ここがつまずきやすい工程になります。追加方法は「自動（最短）」と「手動（位置を自由に選ぶ）」の2通りです。
自動でテーマに追加（1クリック）
とりあえず表示まで持っていくなら、この自動追加が最速です。
-
Shopify 管理画面で本アプリを開く
-
「テーマを選択」から追加先テーマを選ぶ
-
「テーマに追加」をクリック
-
テーマエディタが開いたら「保存」して完了
手動でテーマに追加（好きなページ・好きな場所に設置）
トップ以外（商品ページ、コレクションページ、ブログなど）に置きたい場合や、狙った位置に差し込みたい場合は手動追加を使います。
-
Shopify 管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」を開く
-
設置したいページ（テンプレート）へ移動
-
「セクションを追加」または「ブロックを追加」→「アプリ」から本アプリを選んで追加
-
設定を整えて「保存」
これで、狙った位置に「Shopify 複数画像スライドショー」を設置できます。「表示されない」場合の多くは、保存し忘れか、表示したいテンプレートと違う場所に追加してしまっているのが原因です。
Q. 設定項目が多くて迷う。どこから触れば失敗しない？
アプリブロックを追加すると、テーマエディタにノーコードの設定項目が並びます。本アプリはデザインが2種類あり、ブロック（フラット型／ハイライト型）によって一部の設定が変わります。
-
フラット型の設定項目
-
ハイライト型の設定項目
迷ったときは「画像とリンク → 比率 → 矢印・角丸 → 速度 → 余白 → 追加 CSS」の順で詰めると失敗しにくいです。重要な項目を運用目線で見ていきます。
画像設定（画像1〜画像5）と1枚目の使い方
画像枠は 画像1〜画像5 まで用意されています。先ほどのクリック実測の通り、1枚目に約84%のクリックが集中します。だからこそ、最優先の導線を1枚目に置く のが鉄則です。
運用例：
- 画像1：新作コレクション（最優先）
- 画像2：セール会場
- 画像3：ランキング
- 画像4：定番カテゴリ
- 画像5：ブログ（特集記事・入れ替え枠）
リンク設定（リンク1〜リンク5）
各画像にリンクを設定でき、クリック（タップ）で任意ページへ移動します。貼り先のおすすめは、商品が並んでいて次の行動が明確なページです。
- コレクションページ（最も自然で回遊に強い）
- 特集 LP（セール会場など）
- ブログ記事（読み物→商品への導線がある場合）
- 商品ページ（ランキング型にする場合）
「リンクを新しいタブで開く」も設定できますが、基本はストア内回遊を増やしたいはずなので、外部ページに飛ばす時だけ ON にする運用が無難です。
画像のアスペクト比
縦横比を選べます。ここがズレると一気に 「整っていない感」 が出るので、最初に方針を決めましょう。商品写真が正方形中心なら 1:1、バナー中心なら横長、コレクションカード風に見せたいなら少し縦長が合わせやすいです。ポイントは、ストア内の他の画像と比率を揃えることです。
スライドの高さ・間隔（フラット型）
フラット型には「スライドの高さ」「スライドの間隔」があります。高さを揃えると複数画像を並べたときの段差が消え、間隔を詰めると一覧っぽく、広げると余白感が出ます。まずは余白多めから始め、クリック率が低ければ少し詰めて「一覧感」を出すと調整しやすいです（スマホは詰めすぎ注意）。
矢印のスタイル・色・大きさ
矢印は目立たせたくなりますが、やりすぎると広告っぽくなり、画像より矢印に目が行ってしまいます。逆に弱すぎるとスライドだと気づかれません。まずは色をストアのボタン色（または文字色）に寄せ、サイズは小さめ〜中から始めて、気づかれないようなら少しずつ強めるのが安全です。
角の丸み（角丸）
角丸は統一感に直結します。ボタンが丸いならスライドも丸く、角張っているならスライドも角張らせる。テーマの UI と揃えるだけで完成度が上がります。
自動スライドのスピード（秒）
オートスライドの速度を秒で設定できます。ここには2つの仕様上のクセがあります。
- 0 に設定すると自動スライドが停止
- 負の値にすると逆方向にスライド
おすすめは、まず自動スライド OFF（0）で開始し、触られないようなら4〜8秒でゆっくり回す運用です。速すぎる自動送りは煩わしく、モバイルでは離脱要因になります。前述の通り、自動再生を入れても手動スワイプは必ず併用しましょう。
余白設定（PC / スマホ）
ブロック上下の余白を PC / スマホで個別に設定できます。地味ですがズレると違和感が出やすいポイントです。トップのファーストビュー付近は余白少なめ、中盤の導線は余白中、フッター付近は余白多めでも圧迫しにくい、と設置場所ごとに最適化するのがコツです。
追加 CSS（最後の仕上げ）
設定だけだと微妙に合わない場合は、追加 CSS で上書きできます。
入力欄の例：
「角丸をもう少し強めたい」「矢印の影を消したい」など、テーマに馴染ませる微調整に使えます。
/* 例：スライド画像をもう少し丸くする（クラス名は実際の出力に合わせてください） */
.ur-multi-slideshow img {
border-radius: 16px;
}
/* 例：矢印ボタンの影を弱める */
.ur-multi-slideshow .arrow-button {
box-shadow: none;
}
クラス名はストア環境で異なることがあるため、ブラウザの検証ツールで要素を確認してから当てるのが確実です。
Q. 設置したあと、何を見れば「効いている」と判断できる？
「Shopify で複数画像スライドショーを表示できた」で終わると、改善が回りません。回遊導線なので、次の指標で効果を測ります。
- スライドのリンククリック率（可能なら）
- コレクションページ・セール会場の閲覧数
- CVR（購入率）
- 平均注文額（AOV）
クリックの大半は1枚目に集中するため、「2枚目以降が伸びないのは想定内」と捉えたうえで、反応の悪い枠だけを差し替える のが効率的です。設置場所も目的から逆算します。トップ上部は主要導線をまとめて提示、トップ中盤はカテゴリ回遊、コレクションページ上部は関連特集への誘導、商品ページは購入導線の邪魔にならない下部寄りで離脱対策、ブログ末尾は「次に見てほしい」の提示——と役割を分けると効きます。
画像の作り方は 「テキストを載せすぎない」 が基本です。スマホでは画像内の細かい文字は読めないため、「新作」「セール」「カテゴリ名」程度の短い文言に抑え、詳細は遷移先で説明する設計にすると読みやすくなります。
Q. トラブルが起きたときのチェックポイントは？
代表的なつまずきと対処をまとめます。
スライドショーが表示されない
- テーマにアプリブロックを追加できているか
- 保存を押しているか
- 表示したいテンプレートに追加しているか（トップではなく商品テンプレに入れてしまった等）
画像が崩れる / 高さが揃わない
原因はほぼ画像比率のバラつきか、バナー素材に余白が含まれているケースです。画像比率を揃えて書き出し、アスペクト比設定を固定し、フラット型の「スライドの高さ」で揃えると解消します。
矢印が見づらい / 目立ちすぎる
矢印色をテーマの文字色に寄せ、サイズを少し調整します。背景が白い画像が多いなら縁取り（可能なら）も有効です。追加 CSS での調整も効きます。
自動スライドが動かない
設定で 0 にしていると停止 します。まず4〜8秒に設定して挙動を確認してください。逆方向にしたい場合は 負の値 を使います。
クリックしてもリンクに飛ばない
リンク欄の未設定、URL 形式のミス、クリック領域が矢印と重なっている（PC で起きやすい）あたりが多い原因です。リンク1〜5 がすべて入っているかを確認し、クリック領域をプレビューで確認、必要なら矢印サイズを調整します。
Q. アプリを使わずテーマ編集で作るには？（サンプルコード）
「月額を抑えたい」「世界観に完全に合わせたい」という方向けに、テーマ編集で Shopify 複数画像スライドショー を実装する場合のサンプルを置いておきます。
注意：テーマ編集はストアに影響する可能性があります。
必ずテーマを複製してバックアップを取り、プレビュー環境で検証してから公開してください。
実装の方針は、運用しやすさと軽さを優先して次の構成にしています。
- Liquid で画像とリンクを出力（ブロックで管理できるようにする）
- CSS の
scroll-snapを使って軽いカルーセルを作る - JavaScript は「矢印で横スクロールする」程度に最小限
Swiper 等のライブラリを入れれば高機能になりますが、前述の速度コストを踏まえると、まずは軽く作るのが安全です。画像出力には loading: 'lazy' を入れ、遅延読み込みで LCP への影響を抑えています。
セクションとして追加する方法（管理しやすい）
手順
- 「オンラインストア」→「テーマ」→「コードを編集」
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 を置く運用でも問題ありません）。以下は最小実装の例です。
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' }));
});
テーマにより JS の読み込み方法が違うため、実装環境に合わせて組み込んでください。
もし「コードは不安」という場合は、前半で紹介したアプリ導入が最短です。
コード実装は月額コストなしで自由度が高い反面、保守・差分管理・速度・アクセシビリティ設計を自分で見る必要があります。「まず試して成果を見たい」ならアプリ、「作り込みたい」ならコード、という棲み分けが現実的です。
公開前のチェックリスト
導入したら、公開前に最低限ここを確認しましょう。
- PC / スマホでレイアウトが崩れていない
- 画像の比率が揃っていて段差が出ない
- 矢印が押せる（重なりがない）
- 画像クリックで正しいリンクに飛ぶ
- 余白が詰まりすぎ / 空きすぎになっていない
- 表示が重くなっていない（気になるなら LCP を計測。目安は2.5秒未満）
- 自動再生にしてもモバイルで手動スワイプができる
- alt テキストが適切（アクセシビリティ）
まとめ
Shopify でスライドショーに複数画像を横並び表示したいときは、まず 「ヒーロー型スライドショー」と「複数画像カルーセル」のどちらが欲しいのか をはっきりさせるのが出発点でした。横並び・見切れ表示は標準テーマでは作りにくく、アプリ導入かテーマ編集のどちらかで実現します。
実装にあたっては、クリックの約84%が1枚目に集中すること、ページ速度1秒の遅延でコンバージョンが約7%下がること、LCP の目安は2.5秒未満であること——こうした事実を踏まえると、枚数は3〜5枚に絞り、1枚目に主役を置き、画像を最適化する という方針に自然と落ち着きます。
最短で試して効果検証したい方には、ノーコードで見切れ表示つきカルーセルを設置できる
が相性の良い選択肢です。Basic プラン月額 $4.99、7日間の無料体験があるため、リスクを抑えて導入できます。まずは3〜5枚で導線を作り、計測しながら差し替えて最適化していきましょう。
参考記事
今回は、以下の記事を参考にしています。
