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

## はじめに
Shopifyに、<strong>「今なら送料無料」「○時間以内に購入すれば○％オフ」</strong>といったポップアップバナーを設置したら、ストアからの離脱防止に一役買いそうですよね。実際、「ポップアップバナーを設置するとコンバージョンが増加する」との調査結果もあります。

今回は、Shopifyのストアにそうした<strong>ポップアップバナーを簡単に設置できるアプリ</strong>を試してみたので、使い方を備忘録として載せておきます。

なお、<strong>離脱防止ポップアップ</strong>とは以下のようなものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/169e4687-5851-2877-2ca9-2ac77a2084cf.png)

使い方を紹介するのは以下のアプリになります。

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

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


## 導入のきっかけ
離脱防止ポップアップは、購入意欲のあるユーザーに非常に有効に作用するとされています。

離脱防止ポップアップとは、「ユーザーが商品を購入せずストアを離れようとするときに表示するポップアップ」のことです。ユーザーをストアに引き留め、その一部をコンバージョンへつなげる効果が期待できます。

ユーザーの離脱防止への取り組みを行なっているところは、企業レベルでもまだそこまで多くありません。

しかし<strong>離脱防止のポップアップを設置すると、コンバージョンが最大46％増加する</strong>との調査結果もあるほど。ストアの売上アップを図るうえで、ポップアップバナーの設置は試してみたい施策の一つといえます。

参考：[appier「【マーケティング用語集】離脱防止テクノロジー」](https://www.appier.com/ja-jp/blog/everything-you-need-to-know-about-exit-intent-technology#:~:text=%E9%9B%A2%E8%84%B1%E9%98%B2%E6%AD%A2%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC%20%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0&text=%E9%9B%A2%E8%84%B1%E9%98%B2%E6%AD%A2%E3%81%AE%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%81%AF,%E3%81%95%E3%81%9B%E3%82%8B%E3%81%A8%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

離脱防止の取り組みは、商用Webサイトやランディングページはもちろん、ECとも好相性です。ポップアップバナーをうまく設置すれば、顧客獲得やカゴ落ち削減の効果が期待できるでしょう。

今回の見ていくポップアップ設置アプリは、出現条件を細かく設定できることから、より訴求力の高いバナーを表示できる点が魅力です。

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

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

アプリの特長を簡単にまとめると、以下の通りです。

- ノーコードで使える
- ポップアップが出現する条件を細かく設定でき、訴求力の高いバナーを表示できる
- Shopify Online Store 2.0対応のため、既存のテーマやアプリとの干渉を気にせずに済む

月額料金は<strong>4.90ドル</strong>と低コストで、7日間の無料体験もあります。また開発アカウントなら無料で使えるということで、今回は試しに使ってみました。


## 「離脱防止ポップアップバナー挿入アプリ｜リテリア Popup」の使い方
ここからは、アプリのインストール方法や基本的な使い方を解説していきます。


### 「離脱防止ポップアップバナー挿入アプリ｜リテリア Popup」のインストール方法
まずはShopifyのストアの管理画面にある<strong>アプリ管理</strong>をクリックし、右上の<strong>ストアをカスタマイズ</strong>をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/14209ce4-d0fd-6144-e780-b6c6be318146.png)

<strong>🔍アプリを検索する</strong>のボックスに<strong>離脱防止ポップアップバナー挿入アプリ｜リテリア Popup</strong>と入力し、Enterキーを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/da610439-28f2-8889-c355-329427992b1d.png)

該当のアプリをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/2ec65c24-ea06-b68c-ddb3-0e40a36018d3.png)

すると以下の画面に遷移するので、<strong>アプリを追加する</strong>をクリックしてアプリ画面に移動しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/162597d6-4293-ab17-4f6b-e9478a9e7186.png)

内容を確認し、<strong>アプリをインストール</strong>をクリックします。

なお、Shopifyのパートナー用アカウント（開発アカウント）でアプリをインストールすると、すべての機能を無料で使えます。今回はこの開発アカウントでインストールしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/dc13042f-2a1b-e337-975a-0f5c7711dbf9.png)

インストールが終わると、以下の初期設定画面に遷移します。<strong>テーマに反映</strong>の項目でアプリをインストールするテーマを選択し、<strong>有効化</strong>をクリックしましょう。

ここでは「Studio（公開中のテーマ）」を選択しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/043aeed3-b0f1-2401-fe00-4e26e1c94327.png)

以下のように<strong>アプリを有効化しました</strong>というポップアップが出れば、初期設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/1ad87506-c28c-fa5c-fef3-92488d1f5941.png)

ここまで終わったら、<strong>有効化</strong>ボタンの隣にある<strong>プレビュー</strong>ボタンをクリックしてみましょう。

以下のようにポップアップが表示されました（まだ画像やリンクを設定していないためNo imageになっています）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/7252fb91-cefe-26ad-b345-da27cfbcc2c5.png)

また「テーマ設定」の「アプリを埋め込む」の部分に<strong>ポップアップバナーセクション</strong>が追加され、オン（青色）になっているのがわかります。ここまででアプリの導入は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/857e7ff9-a701-054e-7878-43873e7ff9a0.png)

### 実際にポップアップバナーを設置する方法
ここからは、実際にポップアップバナーを作ってみようと思います。

先ほどのこの画面にある<strong>ポップアップバナーセクション</strong>をクリックすると、詳細設定の画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/857e7ff9-a701-054e-7878-43873e7ff9a0.png)

まずは、<strong>ポップアップバナーの画像</strong>を設定しましょう。<strong>画像を選択</strong>の部分をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/0bc5d105-5737-dfdd-d216-6826677c232a.png)

すると以下の画面になるので、画像をアップロードするか、無料の画像から選択するかをして、画像を設定していきます。

画像を選んだら、<strong>選択する</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/2de1ae07-3aba-2581-ef29-9329ce2edc53.png)

以下のようにポップアップが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/d45b165d-ffd9-6301-a58d-e54c3f6ec666.png)

次に、<strong>バナーのリンク</strong>のボックスへ、ポップアップバナーの遷移先として設定したいURLを入力します。

この設定をすることで、ポップアップバナーをクリックしたユーザーを、指定した場所へ誘導できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/4e1cb845-512b-57af-c8ee-a58b41b7aa0e.png)

そのほか、<strong>バナーの幅</strong>もスマホ・PCにわけて細かく設定できます。


### ポップアップバナーの出現条件を細かくカスタマイズする方法
このアプリの魅力は、<strong>ポップアップバナーの出現条件を細かく設定できる</strong>点にあります。ここからは、その設定方法を確認していきましょう。

ポップアップバナーの出現条件としては、<strong>カーソルが画面外に出たとき・ユーザーが上スクロールしたとき・一定時間が経過したとき</strong>の3つを選べます。

#### 1. カーソルが画面外に出たとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/843f23ba-39f5-72fe-7fb5-316210e5fa02.png)

#### 2. ユーザーが上スクロールしたとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/3042f0e1-c822-0850-0ed1-6ef34000db68.png)

#### 3. 一定時間が経過したとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/f6e556e4-9a76-9afc-5b7e-3db878fcf44b.png)

「カーソルが画面外に出たとき」と「ユーザーが上スクロールしたとき」を選んだ場合、まずバナーを一定時間で再出現させるか否かを決められます。再出現させる場合は、再出現までの時間を60秒までの幅で設定可能です。

「一定時間が経過したとき」を選んだ場合、一定時間経過後に一度だけバナーを表示することになります。バナーが表示されるまでの時間に関しては、60秒までの幅で設定可能です。

この3つのバナー出現条件は、それぞれ組み合わせて使うこともできます。何度かテストをしてみれば、自分のストアに合ったバナー表示が実現できそうです。


## 最後に
Shopifyのストアにポップアップバナーを設置できるアプリ、<strong>離脱防止ポップアップバナー挿入アプリ｜リテリア Popup</strong>の基本的な使い方は以上になります。

実際に操作してみたところ、かなり簡単にポップアップバナーを設置できました。

「ストアの集客はできているけれど、あと一歩で売れない」「ストアのカゴ落ちを少しでも減らしたい」などの悩みがある場合は、一度試してみるとよいかもしれません。

アプリストアは以下の通りです。興味を持った方はインストールしてみてください。

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

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