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

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

はじめに

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

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

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

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

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

スライドショー挿入アプリ|リテリア スライドショー

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

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

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

終わりに

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

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

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

スライドショー挿入アプリ|リテリア スライドショー

recommendおすすめ記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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