はじめに

オンラインストアでは新規顧客に対してクーポンを提示して購入を後押しをするといった施策がよく行われます。そんなときに使われるのがポップアップアプリですが、ShopifyにはShopify公式の無料アプリでこのような機能を実現することができます。この記事では無料で利用できるShopify Formsを使ってディスカウントコード付きのポップアップを作る方法を解説します。

Shopify Formsとは？

Shopify FormsはShopifyが提供している無料フォームツールです。フォームを作成してお客様の連絡先リストを収集し、管理することができます。その名の通りフォームを作るためのものですが、簡単なポップアップも作ることができます。

アプリインストール後にShopify Formsを最初に開くと、下記のような画面になります。まずは「フォームを作成する」をクリックしましょう。

すると次のようなダイアログが表示され、ポップアップかインライン（埋め込み）かの選択ができます。今回はポップアップを選択して、適当なフォーム名を入れて作成をクリックします。

ポップアップ表示方式

まず最初にポップアップの表示方法を選ぶことができます。画面の中央に表示して入力を求めたい場合はオーバーレイ、あまり目立たせず画面の下からニュッと出てくる感じのものを実装したい場合はフロートを選択します。

タイトルと説明文

初期状態ではサインアップとなっていますが、ここでは「5%OFFクーポンを獲得」といったものに書き換えます。

フィールド

入力項目や表示順番も自由に編集することができます。初期状態ではファーストネームとメールの入力を求めていますが、できるだけ多くのメールアドレスを収集するのが目的であれば入力は最小限としたいです。ここではメールアドレスだけに絞ります。これでよく見かけるいい感じのポップアップになりました。

成功

フォーム送信が成功した際に表示するメッセージなどを編集することができます。ここにはディスカウントという項目があり、Shopifyストアに登録してあるディスカウントコードを選択することで、「メールアドレスと引き換えに割引クーポンをプレゼントする」というよく見かける動作を実装することができます。すでに登録してあるクーポンしか選択できないため、必要であれば一度管理ページのディスカウントを開いてディスカウントコードを作成してください。

行動

ポップアップを表示する条件も細かく設定することができます。

デスクトップだけ、モバイルだけといったデバイスによる制限もできますし、ホームページにだけ表示するといった特定のページタイプにだけ表示することもできます。

またデスクトップ限定ではありますが、お客様がページを離れようとしたときに表示することもできるので、「帰ろうとするお客様に割引クーポンを提示して引き止める」といった処理も可能になります。無料アプリでここまでできるのはかなりありがたいのではないでしょうか。

おわりに

この記事では無料で利用できるShopify Formsを活用して割引クーポン付きのポップアップフォームを表示するための設定を解説しました。無料で使えるのでぜひお試しください。