＊本サイトはアフィリエイトプログラムを利用しています。
Shopifyのスライドショー機能はECサイトに動きを持たせ、訴求力を高める方法として有効です。本記事では、スライドショー機能を有効活用したい方に向けて、Shopifyでスライドショーを設定する方法や、簡単にスライドショーを設定できるおすすめアプリの使い方を詳しく紹介します。
動画はスライドショーに表示できるのか、商品画像はスライドショー化できるのか、といった疑問にも答えていますので、ぜひ最後までお読みください。
Shopifyでスライドショーを設定する3つの方法
はじめに、Shopifyでスライドショーを設定する方法を解説します。Shopifyでスライドショーを設定する方法は以下の3つです。
- テーマに実装されているスライドショー機能を使う
- スライドショーを設定できるアプリを活用する
- コーディングで設定する
3つめの「コーディングで設定する」方法は高度なスキルが必要とされるため割愛します。本記事は初心者でも簡単にスライドショーを設定できる、「テーマに実装されているスライドショー機能を使う」方法と「スライドショーを設定できるアプリを活用する」方法について解説します。
テーマに実装されているスライドショー機能を使う
※この方法はテーマにスライドショー機能がある場合にのみ可能です。
Shopifyのテーマに実装されているスライドショー機能の使い方を解説します。まず、管理画面より「オンラインストア」の「テーマ」を選択し、「カスタマイズ」をクリックします。
※スライドショー機能が新たに実装されたテーマの場合、バージョンが古いとスライドショー機能が表示されない場合があります。その際にはテーマのバージョンを更新してください。テーマの更新は、上の画像の「⚪︎⚪︎のバージョンx.x.xが利用できます」の箇所で、「テーマライブラリーに追加」をクリックします。
テンプレートの項目より「セクションを追加」をクリックし、「スライドショー」を選択します。
スライドショーのサイズや秒数など、スライドショー全体の設定は、赤枠の「スライドショー」で行います。
画像の設定は、ブロックで行います。
設定したい画像の数だけ、ブロックを増やして設定します。
スライドショーを設定できるアプリを活用する｜おすすめのアプリ
Shopifyアプリを活用して、スライドショーを実装する方法です。この方法では、スライドショー機能のないテーマにも機能実装ができます。また、テーマのスライドショー機能にはない機能が利用できる場合もあります。
スライドショー機能を実装できるおすすめのShopifyアプリを2つ紹介します。
- シンプルスライダー
- リテリアスライドショー
おすすめ1. シンプルスライダー
1つめに紹介するアプリは「シンプルスライダー」です。シンプルスライダーの特徴は設定の手軽さで、Web制作の知識がない方でも簡単に設定できます。
シンプルスライダーは、ECサイトでよく使われる、画像が左右に見切れて設定できるタイプのスライダーです。このタイプは、閲覧者に製品やコンテンツへの視覚的な期待感を高める効果があります。左右に少し見えている画像が次に表示される内容を暗示することで、ユーザーのスクロール・クリック意欲を自然に促進します。複数のキャンペーンバナーを見せたい時に最適です。
利用料金は月額3.55ドルのLIGHT PLANと、月額9.99ドルのPROFESSIONAL PLANがあります。5日間の無料体験期間があるため、気になった方は気軽に試してみると良いでしょう。
| LIGHT PLAN | PROFESSIONAL PLAN | |
|---|---|---|
| 月額料金 | 3.99ドル | 9.99ドル |
| スライド数 | 3枚 | 10枚 |
| ナビゲーション設定 | ◯ | ◯ |
| ページャー設定 | ◯ | ◯ |
| レイアウト設定 | ◯ | ◯ |
| ドラッグ＆ドロップ順序変更 | ー | ◯ |
| リアルタイムプレビュー | ー | ◯ |
| スマホ専用画像の設定 | ー | ◯ |
| キャンペーン設定 | ー | ◯ |
シンプルスライダーの使い方
まずShopifyストア公式ページからシンプルスライダーをインストールします。
利用したいプランの「5日間の無料トライアル」をクリックします。
サブスクリプションを承認します。この時点では請求はされません。
アプリが利用可能になりました。早速、スライダーを作ってみましょう。今回はPROFESSIONAL PLANで作成します。
アプリのホーム画面にある「スライダーを管理する」をクリックします。
新規スライダー作成をクリックします。
スライダーの名前を入力し、テンプレートを選択。「作成」をクリックします。
スライダー管理画面に新しいスライダーが追加されました。「設置」をクリックします。
画像を設定します。プレビュー画面で確認もできます。スライドスピードや画像の余白、レイアウトをノーコードで設定可能です。設定が完了したら「保存」をクリックします。
スライド管理画面で「設置」をクリックします。スライダーの「IDをコピー」をクリックし、「テーマカスタマイザーを開く」をクリックします。
カスタマイザー画面が表示され、自動的にアプリセクションが追加されます。「セクションを追加」 > 「アプリ」からでも追加可能です。
スライダーIDに、先程コピーしたIDを貼り付けます。
スライダーを表示させたい場所に移動させ、「保存する」をクリックします。
ストアにスライダーが表示されました。
設定は以上です。シンプルスライダーは誰でも手軽に、スライダーを設定できます。気になった方はぜひ試してみてください。
おすすめ2. リテリアスライドショー
「リテリアスライドショー」は、簡単にスライダーを設置できるアプリです。利用料金は月額3.99ドルで、無料期間はインストールしてから7日間です。（2025年3月時点）
リテリアスライドショーの使い方
最初に、リテリアスライドショーをShopifyストア公式ページからダウンロードします。
アプリを追加するテーマを選択し、「テーマに追加」をクリックします。
スライドショーを追加したい箇所で「セクションを追加」をクリックし、「アプリ」から「リテリアスライドショー」を選択します。
サイドバーからスライドショーに表示させたい画像を選びます。画像にリンクを挿入することも可能です。
サイドバーを下にスクロールすると、矢印の大きさや形、インジケーターの設定画面があらわれます。スライドショーの余白やテーマカラーを変更することも可能です。
スライドショーにおすすめな画像サイズとフォーマット
次に、スライドショーに用いる画像について、最適なサイズとフォーマット（ファイル形式）について解説します。
画像サイズ
画像のサイズは、16:9もしくは4:3で作成するのがおすすめです。画像のサイズが小さいと大画面にした際に画質が落ちてしまうため、幅2,000px程度までを目安に作成するとよいでしょう。
フォーマット（ファイル形式）
最もおすすめのフォーマットは「PNG（ピング）」です。圧縮しても画質が落ちず、透過処理にも対応できるためwebサイトの制作にはおすすめです。
そのほかにも、「JPEG（ジェイペグ）」など対応可能なフォーマットについては以下の記事でもご紹介しています。
スライドショーに動画は設定できる？
スライドショーに動画を表示したい場合は、アプリを活用するかコーディングを用いて埋め込むかのどちらかになります。
Shopifyアプリ「SmardBN:Banner Slider」は、スライドショーにYouTubeなどの動画を埋め込むことが可能です。利用料金は月額15.99ドル、日本語対応はしていません。
商品画像をスライドショーにできる？
ECサイトのトップ画面に活用されることの多いスライドショーですが、Shopifyでは商品画像をスライドショーにすることも可能です。商品をさまざまな見せ方で訴求できるため、コンバージョンにも繋がりやすくなります。
商品画像をスライドショー化する具体的な方法は以下の記事で解説しています。
スライドショーを有効活用し、訴求力を高めよう！
本記事では、Shopifyでのスライドショーの活用方法や設定方法について解説しました。スライドショー機能を使えばECサイトに動きを持たせることができ、ユーザーのショップ滞在時間を伸ばして商品購入に繋がりやすくすることが可能です。
スライドショー機能を有効活用し、魅力的なECサイトを構築しましょう！
おすすめShopifyアプリ
株式会社プレイビット
Shopifyを活用したECサイトの構築・運用の支援サービスを提供しています。
Shopifyの制作・運用に特化したプロ集団が、トータルサポートさせていただきます。ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。
