Shopify ストアにポップアップを導入する方法を調べてみた

今回の記事では、Shopify でポップアップを導入する方法について調査した結果を解説します。

Shopify のプロモーションに悩んでいるクライアントから、「Shopify でポップアップを行いたい」というお話を伺ったので、Shopify のポップアップアプリについての調査を行いました。

それでは、頑張っていきましょう。

調査

とりあえず、Shopify のポップアップについて調査しました。

「Shopify ポップアップ」と検索すると、「【ポップアップアプリ 3 選】Shopify でプロモーションに悩むユーザー必見！ポップアップを手軽に導入できるオススメアプリ 3 選」という記事がヒットしました。

こちらの記事では、「ポップアップサポーター」や」「Promolayer」というアプリが紹介されていました。

早速 Shopify ストアに導入して、調査を行いました。

「ポップアップサポーター」は、商品を選択してポップアップさせるアプリであり、Promolayer はテンプレートを作成してポップアップを表示させるアプリでした。

今回の要件として、テンプレート選択や商品選択は特に必要はありませんでした。

訴求力の高い画像をクライアントに作成して頂き、そちらのバナー画像の出現条件を細かくカスタマイズできるアプリを探していたところ、「離脱防止ポップアップバナー挿入アプリ | リテリア Popup」というアプリを発見しました。

こちらのアプリは、ノーコードで Shopify にポップアップを挿入することができるアプリであり、さらにポップアップの出現条件を細かくカスタマイズできるという点が非常に魅力でした。

なので、今回の調査としては、こちらの「離脱防止ポップアップバナー挿入アプリ | リテリア Popup」を導入することに決定しました。

離脱防止ポップアップバナー挿入アプリ｜リテリア Popup

以下に、こちらのアプリの簡単な説明を記載します。

こちらの記事を参考にしました。

Shopify のストアに離脱防止ポップアップバナーを設置できるアプリを試してみた【備忘録】

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

離脱防止ポップアップバナー挿入アプリ｜リテリア Popup の簡単な説明

こちら、公式の解説記事になります。

こちらの記事で、使い方については詳細に解説されているので、参考にしてもよいでしょう。

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

アプリストアの画面から、簡単な説明を引用させて頂きます。

ノーコードで離脱防止ポップアップバナーを Shopify ストアに挿入することができるアプリであり、バナーの出現条件のカスタマイズに特に力を入れています。

月額 4.90 ドルから使用可能で、7 日間の無料期間があります。また、Shopify のパートナーアカウント（開発アカウント）を利用すると、全ての機能を完全無料で使用することができます。

Online Store 2.0 に完全対応しているため、既存のテーマやアプリと干渉することなく、使用することができます。
そもそも、アプリ間の干渉を気にしなければならないのは過去の話です。

今の新しい Shopify アプリは、基本的にアプリと干渉することはありません。

１点注意点として、Debut などの古いテーマでは使用することができません。

いくつか、分かりやすい画像があったので、以下のサイトより使用させて頂きます。

https://apps.shopify.com/popup-8?locale=ja

上の画像のように、離脱防止ポップアップバナーを設定することができるアプリです。

アプリ自体は、特に画像を提供しているわけではありません。なので、上のクーポン画像はフォトショなどで自作する必要があります。

作成したバナーを、上の画像の部分から設定することができます。

アプリをインストールした後に、有効化した後に、ストアのカスタマイズ画面から以上の設定を行うことができます。

上の画像のように、バナーの出現条件を細かくカスタマイズすることができます。

主に、以下の３つの条件でカスタマイズすることができます。

• カーソルが画面外に出たとき
• ユーザーがー上スクロールを行ったとき
• 一定時間が経過したとき

その各々に対して、再出現するかどうかや、再出現のクールタイムなどを設定することが可能です。

それでは、アプリのインストール・有効化・ストアのカスタマイズ画面からのカスタマイズの方法をざっくり解説します。

離脱防止ポップアップバナー挿入アプリのインストール

それでは、離脱防止ポップアップバナー挿入アプリのインストールを行いましょう。

以下のように、ストアの管理画面からストアをカスタマイズをクリックして下さい。

アプリの検索窓から、アプリを探しましょう。

「離脱防止ポップアップバナー挿入アプリ｜リテリア Popup」と入力します。

以下のように、アプリがヒットしているのが確認できます。

それでは、アプリの詳細画面を確認しましょう。

こちらの画面から、アプリの追加を行いましょう。

アプリをインストールすると、以下のアプリの管理画面に遷移します。

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

アプリの有効化

それでは、アプリの有効化を行います。

こちらのアプリは、App embed block という方法を使用してアプリが作成されています。

こちらの詳細な説明は割愛しますが、簡単に説明すると、Online Store 2.0 標準の方法を利用してアプリの導入を行う方法です。

導入方法は凄く簡単で、アプリを導入するテーマを設定して有効化をクリックするだけです。

アプリを有効化しましたというポップアップ画面が出たら、アプリの有効化は完了です。

有効化が完了した後は、プレビューをクリックして Shopify ストアの管理画面に移動します。

以下のようにポップアップバナーセクションが挿入されているのを確認できたら、一通り設定は終了です。

ポップアップバナーのカスタマイズ

それではこれから、バナー画像の設定方法とポップアップの出現方法のカスタマイズについて説明していきます。

こちらの部分から、以下の画像のようにポップアップバナー画像を設定することができます。

バナーにはリンクを設定することができます。

バナーの幅も自由にカスタマイズすることができます。

ここからが重要な機能です。

ポップアップバナーの出現条件を細かくカスタマイズすることができます。

カーソルが画面外にでたとき

以下のように、カーソルが画面外にでたときにポップアップを出現させることができます。「

ユーザーが上スクロールしたとき

以下のように、ユーザーが上スクロールした際にポップアップを出現させることができます。

一定時間経過後

一定時間経過後にポップアップバナーを出現させることができます。

一度きりです。

終わりに

ここまでで、Shopify ストアにポップアップを導入する方法を解説しました。

ノーコードで簡単に Shopify ストアにポップアップを導入することができるので、非常に嬉しいですね。

アプリは以下からインストールすることが可能です。

https://apps.shopify.com/popup-8?locale=ja

以下、こちらのブログの参考記事です。

Shopify のストアに離脱防止ポップアップバナーを設置できるアプリを試してみた【備忘録】

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

お疲れ様でした。