高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は、Shopify アプリである「スライドショー挿入アプリ|リテリア スライドショー」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

「スライドショー挿入アプリ|リテリア スライドショー」は、Shopify のストアに高カスタマイズ性スライドショーを導入することができるアプリです。

テーマデフォルトのスライドショーに物足りなさを感じているマーチャントの皆様の悩みを解決できる自信がございます。
あなたのストアのデザインと調和の取れたスライドショーを導入して、ワンランク上のブランドを演出しましょう!

興味のある方は、以下の URL よりアプリのインストールを行なってください。

https://apps.shopify.com/shopify-application-339?locale=ja&from=hp-guide

それでは、アプリをインストールすることでできること・インストール方法・使い方の解説を行なっていきます。

「スライドショー挿入アプリ|リテリア スライドショー」にできること

Shopify アプリである、『スライドショー挿入アプリ|リテリア スライドショー』は、Shopify ストアにノーコードで高カスタマイズ性スライドショーを追加することができるアプリです。
導入した際の表示例は以下の通りです。

ストアのデザインと調和の取れたスライドショーを導入することで、ストアのブランドを演出できます。
テーマデフォルトのスライドショーに物足りなさを感じているマーチャントの皆様の悩みを解消できる自信があります。

アプリインストール

それでは、実際にアプリのインストールを行なっていきましょう。

ストアの管理画面の『アプリ管理』画面に表示されている『ストアをカスタマイズ』にクリックして、Shopify app store に移動してください。

検索窓に、『スライドショー挿入アプリ|リテリア スライドショー』と入力してください。
以下の画像にて赤枠で囲っているアプリをクリックしてください。

アプリを追加する」をクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用アカウント(通称:開発アカウント)にて開発ストアにインストールを行うと、全ての機能を無料でご利用いただくことができます。
マーチャント用のアカウント(実際に物販などで運用しているアカウント)ですと、月額$3.99 でご利用いただけます。インストール後、7 日間は無料でご利用いただけます。

アプリを追加する」をクリックすると、以下の画面に遷移します。
右上の『アプリをインストール』をクリックして、アプリのインストールを行いましょう。

以下の管理画面に遷移します。

以上で、アプリのインストールは完了です。

アプリの設定

自動インストール

  1. アプリケーションをインストールします。

  2. 「有効化」ボタンをクリックすると、連絡先ページでアプリケーションが自動的にインストールされます。
    スクリーンショット 2022-03-06 19.17.23.png

  3. 「プレビュー」ボタンをクリックすると、テーマがプレビューされます。
    スクリーンショット 2022-03-06 19.17.23 2.png

  4. アプリの項目が追加されていることを確認します。
    image.png

自動アンインストール

  1. 「無効化」ボタンをクリックします。

スクリーンショット 2022-03-06 19.27.37.png

  1. 「プレビュー」ボタンをクリックし、テーマをプレビューします。
    image.png

  2. アプリが無効になっていることを確認します。
    image.png

アプリをカスタマイズする

テーマアプリ拡張機能で追加されたブロックの動作を確認するためにカスタマイズします。
アプリのブロック設定を変更し、ストアデザインを確認します。

image.png

スキーマの説明

"画像(n 枚目)"

このスキーマに画像を指定することで、指定した画像をスライドショーに掲載できます。
画像を指定しない場合、スライドショーは表示されません。
画像の最大枚数は 4 枚です。

(スキーマ)
image.png

(セクション)
image.png

"リンク(n 枚目)"

このスキーマにてリンクを指定することで、スライド画像にリンクを埋め込むことが可能です。
例)リンク(1 枚目)にリンクを指定した場合、画像(1 枚目)のスライドにリンクが埋め込まれます。

"矢印種類"

このスキーマはセレクタです。
スライドボタンのスタイルを指定することができます。
選択肢は以下の通りです。

  • "なし"
  • "矢印 1"
  • "矢印 2"
  • "三角"

● なし

何も表示しません。
image.png

● 矢印 1

>型の矢印を挿入します。
image.png

● 矢印 2

型の矢印を挿入します。
image.png

● 三角

型の矢印を挿入します。
image.png

"矢印サイズ"

上記のスキーマで指定した矢印の大きさは、3 段階で変更できます。

  • 大(70px)
  • 中(50px)
  • 小(30px)

お好みのサイズに変更可能です。

"インジケーターを表示"

このスキーマは、チェックボックスです。
インジケータをスライドに表示させたい場合は、このチェックボックスにチェックを入れてください。
チェックを入れないと、後述の「インジケーターの種類表示」スキーマが使えなくなりますので、ご注意ください。

"インジケーターの種類"

このスキーマはセレクタです。
インジケーターの表示スタイルを選択できます。
選択肢は以下の通りです。

  • "丸ぽち"
  • "現在の枚数/最大枚数"
  • "プログレスバー"

● 丸ぽち

image.png

● 現在の枚数/最大枚数

image.png

● プログレスバー

image.png

"自動スライドする"

このスキーマはチェックボックスです。
このチェックボックスをオンにすると、スライドショーがオートスライド機能を有効化できます。

"スライドショーアニメーション"

このスキーマはセレクタです。
スライド時のアニメーションを選択できます。
選択肢の中から好みのアニメーションを選んでください。

  • スライドフェード
  • フェード
  • キューブ
  • カバーフロー
  • フリップ

スライド

Image from Gyazo

フェード

Image from Gyazo

● キューブ

Image from Gyazo

● カバーフロー

Image from Gyazo

● フリップ

画像:Gyazo

"テーマカラー"

このスキーマは、スライドショーのスライドボタンやインジケーターの色を指定することができます。
お好みの色にカスタマイズして下さい。

"スライドショーの余白設定"

このスキーマは、スライドショーの左右と上下の余白を調整することができます。

image.png

終わりに

今回は、「スライドショー挿入アプリ|リテリア スライドショー」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/shopify-application-339?locale=ja&from=hp-guide

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説