Shopifyでポップアップを表示するには?『Promolayer』の設定方法を紹介!
![](http://goriderep.com/cdn/shop/articles/promolayer_1200x1200.png?v=1720747827)
みなさんのShopifyストアでは、ポップアップを利用していますか?
デフォルトの機能ではないShopifyのポップアップですが、アプリを導入することで簡単に実装できます。
今回はおすすめのアプリとその設定方法について解説していきます。
Table of content
ポップアップとは
そもそも、ポップアップという単語自体に聞き馴染みがない方もいらっしゃるかと思います。
ポップアップというのは、サイトを閲覧中に表示される、お知らせやメルマガ登録フォームを表示するものです。
![goride site popup](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/2024-07-03-2.00.40.png?v=1719982875)
ECサイトをみている時によく見かけますね。
ポップアップを利用することで、新商品入荷などの顧客に絶対に伝えたい情報を表示したり、メルマガ購読者数を増やすためのポップアップの表示が可能です。
売り上げ増加に直接関わることもあれば、メルマガの登録者数を増やし長期的なリピーターの獲得にもつながるため、マーケティング施策の一環として非常にメジャーな手法です。
Shopifyポップアップアプリ Promolayer
Shopifyでポップアップを表示するにはアプリを導入する必要があります。
今回の記事では「Promolayer」というアプリを紹介します!
Promolayerは日本産のポップアップアプリで、月額も無料から利用可能です。
Promolayer 設定方法
設定方法は非常にシンプルです。
管理画面右上の、「ディスプレイを作成」をクリックし新規ポップアップを作成します。
![Promolayer Admin](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/2024-07-03-3.04.00.png?v=1719986681)
次に、ポップアップのテンプレートを選択します。表示したい情報や施策、ポップアップ自体の表示形式などでジャンル分けされており、数多くのテンプレートから、ブランドイメージやストアにあったものを選択できます。
![Promolayer Filter](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/2024-07-03-3.09.24.png?v=1719986973)
テンプレートを選択後、テキストとデザインの設定を行います。
文字サイズやフォント、表示するデバイス(PC、スマートフォン、)、背景画像など自由度高く設定できます。
次に、ポップアップの表示ルールについて設定できます。
ページを開いた瞬間に表示するのか、⚫︎秒後に表示するのか、ブラウザバックをした時に表示するのかなど、表示させる内容に沿ったタイミングの設定が可能です。
逆に、非表示のルールも設定可能です。特定のページのみに表示させたり、ログイン済みのユーザーには表示しなかったり、Hanakoアドレスで制限をかけたりなどの設定が可能です。
最後にアクションの設定を行います。
新商品のお知らせなどを表示する場合は、ボタンを押すとストア内の別ページに遷移するように設定できます。
またコンバージョンが発生した際に特定のメールアドレスに通知を送ったり、Webhookの設定も可能です。
最後にプレビューを行います。
![promolayer admin preview](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/2024-07-03-4.07.49.png?v=1719990552)
プレビュー環境にて、ルールの確認やデザインの確認などを行います。
最後に、DraftかLiveか(本番公開するかしないか)を選択し保存して設定は完了です。
ECサイトにおいて、ポップアップはさまざまな役割を果たしてくれます。ぜひPromolayerをインストールして、ポップアップを導入してみてください!