Shopifyでスライドショーを簡単に設置できるアプリを解説

はじめに

スライドショーとは、以下のように同じ場所で複数の写真が切り替わって表示される機能です。ECサイトを始め、さまざまなサイトに導入されています。

出典：リテリア1

スライドショーはサイト内でも非常に目立つ存在です。Shopifyのストアにスライドショーをうまく設置すれば、以下のような効果が期待できるでしょう。

• 企業のコンセプトやサービスを印象づける効果
• おすすめ情報を伝える効果
• 画像によりイメージで情報を伝える効果

なお、今回は以下の記事を参考に解説を進めていきます。

参考：高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説
参考：【Shopifyアプリで多彩なスライドショーを実現！】Shopifyアプリ開発会社である株式会社リテリアが、「スライドショー挿入アプリ｜リテリア スライドショー」をリリース
参考：Shopify にスライドショーを挿入する方法を徹底解説！

Shopifyでスライドショーを設置する方法

Shopifyのストアにスライドショーを設置には、主に以下の方法があります。

• アプリを用いる
• コーディングを用いる

今回はコーディングが苦手な人に向けて、手軽にアプリを用いてスライドショーを設置する方法を見ていきたいと思います。

スライドショーを設置できるアプリについて

スライドショーを設置できるアプリに関しては、各所からさまざまなものがリリースされています。しかし、月額料金で数十ドルするような高価なアプリも多く、導入を躊躇している人も多いかもしれません。

今回使用するアプリ「スライドショー挿入アプリ｜リテリア スライドショー」は月額料金が3.99ドルと非常に安価で、7日間の無料体験期間もあり気軽に試せるのがメリットです。
スライドショー挿入アプリ｜リテリア スライドショー

このアプリには主に以下のような特徴があります。

• ノーコードでスライドショーを設置できる
• インストール後30秒で設定が完了する
• カスタマイズ性が高い
• Online Store 2.0に完全対応しており、既存テーマ・アプリとの干渉がない
• 月額料金は3.99ドル、7日間の無料体験期間あり

スライドショー挿入アプリ｜リテリア スライドショーの使い方

ここからは、Shopifyのストアにスライドショーを設置できるアプリ「スライドショー挿入アプリ｜リテリア スライドショー」のインストール方法やカスタマイズ方法を、実際に操作しながら解説していきます。

アプリのインストール方法

まず、ストアの管理画面でアプリをクリックし、でてきた黒背景の画面にあるアプリと販売チャネルの設定をクリックします。

ストアをカスタマイズをクリックします。

検索窓にスライドショー挿入アプリ｜リテリア スライドショーと入力して検索します。

該当するアプリをクリックし、アプリを追加するをクリックしましょう。

アプリをインストールをクリックします。

すると以下のダッシュボードがでてくるので、テーマに反映の項目でテーマを選択し、有効化をクリックします。

ここではStudio（公開中のテーマ）を選択しています。

アプリをインストールしましたのポップアップがでれば、インストールは完了です。

先ほどのテーマに反映の項目でプレビューをクリックすると、ストア（テーマの編集画面）が表示されます。

画面左側の項目を下までスクロールすると、リテリアスライドショーというアプリが追加されているのが確認できます。

アプリのカスタマイズ方法

まず、ストア（テーマの編集画面）を表示します。

画面左側の項目を下までスクロールし、リテリアスライドショーが表示されているアプリの右側をドラッグアンドドロップして、スライドショーを設置したい場所まで移動します。

今回はヘッダーの下、特集コレクションの上にスライドショーを設置していきたいと思います。

画面左側の項目にあるリテリアスライドショーをクリックすると、画面右側にアプリの設定画面が表示されます。

• 画面左側
  

• 画面右側
  

スライドショーに表示する画像とURLを指定する

スライドショーに表示する画像と、画像にリンクさせるURLを設定していきます。このアプリでは、画像を4枚まで設定可能です。

1枚目の画像を設定したところです。

画面右側で画像の下にある代替テキストを追加するをクリックすると、画像のalt属性を追加できます。

画像の内容に沿ったテキストを追加しておくと、SEO（検索エンジン最適化）に効果的です。

スライドショーの詳細設定

そのほか、このアプリではスライドショーの矢印やインジケーターの変更、動作の調整、余白の調整などができます。

• 矢印の指定
  スライドショーの矢印は、なし・矢印1・矢印2・三角形から選択できます。大きさも大・中・小とカスタマイズが可能です。
  
  

• インジケーターの設定
  スライドショーのインジケーター（画像下にある○●などの表示）は、丸ぽち・現在の枚数/最大枚数・プログレスバーから選択できます。インジケーター自体も表示・非表示を選択可能です。
  
  

• スライドショーの動作設定
  スライドショーの表示はスライド（通常）・フェード・キューブ・カバーフロー・フリップから選択できます。自動スライドのオン・オフやスライドの間隔・スピードも選択可能です。
  
  
  出典：リテリア

• テーマカラーや余白の設定
  そのほか、テーマカラー（矢印やインジケーターの色）や余白を好きなデザインに変更可能です。
  

まとめ

今回はShopifyのストアにスライドショーを設置できる以下のアプリを中心に解説しました。
スライドショー挿入アプリ｜リテリア スライドショー

実際に使ってみて、ノーコードで素早くスライドショーを設置できる点、ストアのテーマ編集画面で表示を確認しながらスライドショーを作成できる点が便利だなと思いました。月額料金も安価なため導入しやすいと思います。

最後に、参考にした記事を再度掲載しておきます。
参考：高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説
参考：【Shopifyアプリで多彩なスライドショーを実現！】Shopifyアプリ開発会社である株式会社リテリアが、「スライドショー挿入アプリ｜リテリア スライドショー」をリリース
参考：Shopify にスライドショーを挿入する方法を徹底解説！

ここまでお読みいただき、ありがとうございました。