Shopify 離脱防止カウントダウンポップアップのよくある疑問に回答｜送料無料施策との合わせ技も

はじめに
Q. Shopify 離脱防止カウントダウンポップアップは本当に効果があるの？
Q. なぜ「送料無料」と一緒に語られることが多いの？
Q. 送料無料のしきい値は、いくらに設定すればいいの？
Q. Shopify の標準機能だけで付けられないの？
Q. アプリとコード、どっちで作るのが正解？
アプリで導入する：シンプル離脱防止カウントダウンタイマーポップアップ
- 基本情報
- このアプリの固有の強みはどこ？
Q. インストールはどうやるの？
Q. インストールしたのに表示されない、なぜ？
- テーマエディタで「アプリ埋め込み」を有効化する
Q. どの設定項目を、どう埋めればいいの？
Q. 表示条件は6種類もあるけど、どれを選べばいい？
- クールダウンと再表示制御は最初に決める
Q. とりあえず最初は、どう設定すれば外さない？
Q. 「あといくらで送料無料」とは、具体的にどう組み合わせる？
Q. アプリを使わず、コードで自作するとどうなる？
Q. 結局、効果はどう測ればいいの？
よくある質問
まとめ
参考記事

はじめに

「カートまでは進むのに、最後の購入ボタンで戻ってこない」——Shopify を運営していると、この一歩手前の離脱が一番もどかしいところだと思います。そこで検討されるのが「Shopify 離脱防止カウントダウンポップアップ」ですが、いざ調べ始めると疑問が次々に出てきます。

そもそも本当に効果があるのか
カウントダウンを付ける意味はどこにあるのか
「Shopify あといくらで送料無料」の訴求と組み合わせていいのか
アプリとコード、どちらで実装すべきか

この記事は、こうした「実際に導入する前に引っかかる疑問」を一問一答の形で先に潰していく構成にしました。途中で、ノーコードで離脱防止ポップアップを表示できる「シンプル離脱防止カウントダウンタイマーポップアップ」の設定や、コードで自作する場合のサンプルにも触れます。読みながら、自分のストアに必要な答えだけ拾っていってください。

この記事は以下の記事を参考にしています。

Q. Shopify 離脱防止カウントダウンポップアップは本当に効果があるの？

最初に多くの方が気にするのがここです。先に現実的な数字をお伝えすると、離脱しようとした訪問者を取り戻す exit-intent ポップアップ単体の回収率は、離脱訪問者のおおよそ4〜7%（厳しめの調査では1〜3%）です。つまり「入れれば全員戻ってくる魔法」ではありません。上位の解説記事はここを盛りがちですが、まずは等身大の期待値を持っておくほうが運用がブレません。

では「カウントダウンを足す意味」はどこにあるのか。ここが分かれ目です。カウントダウンタイマー付きポップアップの平均CV率は 14.41% で、タイマーなしの 9.86% を大きく上回ります。別の調査ではタイマー付き12.84%・なし4.73%（171%増）、最良キャンペーンでは36.16%という数字も出ています。さらに、カート復帰用の離脱ポップアップにカウントダウンを足すと、訪問者あたり売上が60%超・チェックアウト率が30%超向上したというデータもあります。

つまり、回収率そのものは控えめでも、「戻ってきた数%の人を、いかに購入まで連れていくか」という二段目で効くのがカウントダウンです。離脱の引き止めとカウントダウンによる後押しはセットで考えるのが、データ上は理にかなっています。

Q. なぜ「送料無料」と一緒に語られることが多いの？

検索すると「Shopify あといくらで送料無料」と離脱防止ポップアップが並んで出てくるのを不思議に思った方もいるかもしれません。理由はカゴ落ちの中身にあります。

カート放棄の最大の原因は 予期せぬ送料や追加コストで、全体の48% を占めます（カゴ落ち率の世界平均は70.22%・Baymard 調べ）。しかも消費者は送料の金額そのものより「最後の最後で知らされること」を嫌う傾向があり、送料を商品ページやカートで早めに見せる店は離脱率が17%低かったという調査もあります。

ここから導かれる答えはシンプルです。離脱の半分は送料が引き金なのだから、引き止める側のメッセージも送料無料に寄せると刺さりやすい、ということです。だからこの2つはセットで語られます。具体的な組み合わせ方は後半の章で扱います。

Q. 送料無料のしきい値は、いくらに設定すればいいの？

「あといくらで送料無料」を出すなら避けて通れない疑問です。調査ベースの目安をまとめます。

最適なしきい値は 現在のAOV（平均注文単価）の15〜30%上 に置く
進捗バー（プログレスバー）を併用すると注文額が 12〜18%増。しきい値設定だけ（バーなし）だと8〜12%増、商品レコメンドまで併用すると18〜28%増
消費者の 52〜58% が無料化のために予定外の商品を追加し、平均でしきい値を$3〜$8 超過する
2025年のしきい値の中央値は $64（2019年の$52から+23.1%）

ポイントは、現状の注文単価より「ちょっと頑張れば届く」位置に置くことです。高すぎると諦められ、低すぎると単価が上がりません。そして金額だけでなく「残りいくら」を見せる進捗表現を足すと、上の数字どおり効きが変わります。残額の動的計算は専用の仕組みに任せるのが安全で、これは後ほど役割分担として整理します。

Q. Shopify の標準機能だけで付けられないの？

ここは率直に書きます。Shopify の標準機能として「離脱時にカウントダウン付きポップアップを出す」専用機能は用意されていません。実現する道は2つです。

テーマのコードを編集する（Liquid / HTML / CSS / JavaScript）
アプリを導入する（ノーコード中心）

どちらでも「Shopify 離脱防止カウントダウンポップアップ」は実現できますが、難易度・自由度・運用コストが変わります。デザインや表示ルールを一から作り込みたいならコード、まず最短で効果検証したいならアプリ、という棲み分けです。次の疑問で、選び方をもう少し掘り下げます。

Q. アプリとコード、どっちで作るのが正解？

「自由にやりたいからコード」と即断する前に、運用の手間まで含めて比べるのがおすすめです。

コード編集の魅力は、表示位置・デザイン・カウントダウンの動きまで自分で決められる自由度と、月額費用がかからない点です。一方で、テーマ構造を理解した実装と保守が必要で、テーマ更新でコードが上書きされるリスク があるためバックアップ運用が必須になります。「閉じたら再表示しない」「条件ごとのクールダウン」といった運用機能も自前で作り込むことになります。

アプリ導入の魅力は、ノーコードで最短その日のうちに検証でき、表示条件やクールダウンなど運用に必要な機能が最初からまとまっている点です。費用は月額がかかり、自由度はアプリ仕様に依存します。

筆者の実務感覚では、離脱防止のように「出し方次第で結果がひっくり返る」施策は、まず小さく試して数字を見ながら調整するのが失敗しにくいです。どのページで・どの条件で・どんな文言が効くのかを掴んでから、必要に応じてコードに移行する、という順番が安全だと考えています。最初に試したい一本としては、アプリ導入が現実的です。

アプリで導入する：シンプル離脱防止カウントダウンタイマーポップアップ

ここからは、ノーコードで導入できる「シンプル離脱防止カウントダウンタイマーポップアップ」を例に進めます。横並びの導入方法を比較する記事は多いものの、実装の安心材料や運用の正解値まで踏み込んだものは意外と少ないので、その観点を中心に紹介します。

アプリ: シンプル離脱防止カウントダウンタイマーポップアップ

シンプル離脱防止カウントダウンタイマーポップアップ

基本情報

アプリ名: シンプル離脱防止カウントダウンタイマーポップアップ
価格: 月額 $4.99（7 日間の無料体験あり）
カテゴリー: ポップアップ
対応言語: 日本語を含む多言語

※価格や仕様は変更される場合があります。最新情報はアプリストアのページをご確認ください。

このアプリの固有の強みはどこ？

競合のアプリ比較記事（Poptin・Yeps・Qikify などとの横並び）ではあまり触れられない、実装面での安心材料が筆者は本命だと思っています。

表示条件が6種類（カーソル画面外離脱・ブラウザ上部へのマウス移動・上スクロール・一定時間経過1回限り・指定%スクロール・別タブから復帰）あり、複数同時にONにできる
条件ごとにクールダウン（再表示までの秒数）を細かく設定できる
ポップアップのテキスト・色・タイマー期間をカスタマイズできる
テーマに アプリブロック（App embeds）方式 で追加するため、テーマ更新で設定が消えるリスクがほぼなく、計測タグやコードを書かずに導入できる

コードを触らずに導入でき、しかもテーマ更新で吹き飛ばないという点は、コード自作の最大の弱点を回避できる実装上のメリットです。「まずカート放棄を減らしたい」「キャンペーンを見せるべき人にだけ出したい」というストアに向いたアプリです。

Q. インストールはどうやるの？

ご利用ガイドの流れに沿って進めます。

ご利用ガイド: Shopify で離脱防止カウントダウンポップアップを表示できるアプリについて徹底解説｜ご利用ガイド

Shopify 管理画面の左メニューから「設定」をクリックします。
「アプリと販売チャネル」をクリックし、Shopify App Store に移動します。
検索窓で「シンプル離脱防止カウントダウンタイマーポップアップ」を検索し、アプリ詳細を開きます。
「インストール」をクリックし、権限を確認してインストールを完了します。

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

Q. インストールしたのに表示されない、なぜ？

実は問い合わせで一番多いのがこれです。原因のほとんどは、テーマ側でアプリ埋め込みを ON にして保存する 工程が抜けていることです。逆に言えば、ここさえ押さえればまず表示されます。手順を見ていきます。

テーマエディタで「アプリ埋め込み」を有効化する

ご利用ガイドでも、この方法が分かりやすくおすすめされています。

Shopify 管理画面で「オンラインストア」→「テーマ」を開き、対象テーマの「テーマを編集する」をクリックします。
テーマエディタ左側の「アプリ埋め込み（App embeds）」を開きます。
「離脱防止カウントダウン…（UR: Exit-Intent Countdown…）」を ON にします。
右上の「保存」をクリックします。

ここまでで、ストア上にポップアップが表示される準備が整います。表示されないときは、まずこの ON と保存 を疑ってください。あわせて、公開テーマではなく別テーマのプレビューを見ていないかも確認すると確実です。

Q. どの設定項目を、どう埋めればいいの？

テーマエディタでアプリ埋め込みを選択すると、下のような設定項目が現れます。

テーマカスタマイズ画面

ここで「タイマーの見せ方」と「表示条件」を作っていきます。主要な項目を、埋め方の判断とあわせて見ていきます。

タイマーのタイトル：ポップアップ上部に出る見出しです。Limited Sale! 本日限定セール カートに商品が残っています のように、最初の1行で意図が伝わる短さが理想です。

カウントダウン終了日時：YYYY-MM-DD HH:MM 形式で入力します。設定画面の注記どおり 訪問者のローカル時間で表示 されるため、海外アクセスが多いストアは終了時刻に余裕を持たせるか、「日本時間で◯時まで」と文言で補足すると安全です。

ボタンのリンク先 URL：押した時の遷移先です。対象商品ページ・コレクション・カート・キャンペーンLPなど、離脱防止なら 行動が明確な遷移先 を選びます。

ボタンのテキスト：今すぐ見る カートに戻る セール会場へ のように、動詞を入れて短くするとクリックされやすいです。

タイマーラベル：days:hours:min:sec のように日・時・分・秒のラベルを : 区切りで指定します。「本日中」系なら時・分・秒を、「週末まで」系なら日・時を強調すると自然です。

タイマーメッセージ：オファー内容と行動理由を一瞬で伝える補足文です。この特別オファーをお見逃しなく！ のような汎用文のほか、ここで送料無料を意識するなら 送料無料まであと少し。今ならまとめ買いがおすすめです。 のように書けます。ただし「あといくら」をカート金額に応じて自動計算したい場合は、後述する送料無料バー側の仕組みが必要です。離脱防止ポップアップはまず 行動のきっかけ作り に役割を寄せると、上の文言でも十分テストできます。

Q. 表示条件は6種類もあるけど、どれを選べばいい？

このアプリの肝が表示条件です。6種類あり、複数を同時にONにできます。

カーソルが画面外に離脱した時（PC）
ブラウザ上部にマウスが移動した時（PC）
ユーザーが上スクロールした時
一定時間経過後（1 回限り）
ページを指定％スクロールした時
別タブから復帰した時

ポップアップの表示条件は6種類から自由に選べる！（複数可）

条件	拾えるタイミング	向いている用途
画面外離脱（PC）	タブを閉じる・戻る直前のExit intent	カート放棄対策、送料で迷う層への最後の案内
ヘッダー付近（PC）	上部へマウスが動く＝離脱予兆	離脱意図が高まった瞬間の引き止め
上スクロール	比較検討・離脱の兆候	商品ページ・LPでの最後の訴求
一定時間経過（1回限り）	しっかり見ている人に絞れる	長い商品説明、ブログ、ブランドストーリー
スクロール量	読み進めた人だけに表示	70%で「最後にクーポン」、80%で「カートに戻る」
別タブから復帰	他サイトを見て戻った瞬間	価格比較されやすい商材、競合が多いカテゴリ

調査では、運用上のスイートスポットとして 5〜8秒のディレイ表示でCVR 5.1%、スクロール35〜50%トリガーで5.2% といった数値も報告されています。一定時間経過やスクロール量を使うときの初期値の目安として覚えておくと、いきなり外しにくくなります。

筆者の感覚では、いきなり6条件を全開にするのは禁物です。どれが効いたか分からなくなり、表示過多でUXも落ちます。まずは1〜2条件から始めるのが鉄則です。

クールダウンと再表示制御は最初に決める

条件ごとに クールダウン（再表示までの秒数） を設定できます。ページ遷移しても時間がリセットされないのがポイントです。

出現条件ごとにクールダウン（再表示までの）時間を設定でき、ページ遷移しても時間がリセットされない！

加えて「ユーザーが閉じたら再度表示しない」をONにすると、閉じた後の指定期間は表示を抑制できます。離脱防止は「しつこさ」と紙一重なので、この2つは最初に設計しておくのがおすすめです。表示頻度が多すぎるとUXが悪化するので、クールダウンは必須だと考えてください。

Q. とりあえず最初は、どう設定すれば外さない？

作り込みすぎると「出しすぎて体験を壊す」「どの条件が効いたか分からない」状態になりがちです。スモールスタートの型を3つ用意しました。

出しすぎない王道セット

条件: 画面外離脱（PC）のみ
クールダウン: 600〜1800 秒（10〜30 分）
「閉じたら再度表示しない」: ON（7〜30 日）
オファー: 期限が明確なもの（クーポン、送料無料、限定特典）

まず1条件だけにして、表示回数・クリック率・購入率を見て判断すると改善が速いです。

読み物ページ向け（体験を壊さず回遊につなげる）

条件: 一定時間経過（1 回限り）またはスクロール 70〜80%
文言: 最後まで読んでいただきありがとうございます。人気商品はこちら のように丁寧に
ボタン: 人気ランキングを見る / おすすめセットを見る

「売り込み」より「回遊導線」として使うと嫌われにくいです。

カート周り向け（放棄回復を最優先）

条件: 画面外離脱（PC）＋ヘッダー付近（PC）（2 つまで）
文言: カートに商品が残っています + あと少しで購入完了です
ボタン: 購入手続きへ / カートに戻る

送料がネックになりやすい商材なら、本日中は送料無料キャンペーン中 まとめ買いで送料がお得になります の一言を添えると効果が出ることがあります。

文言テンプレート

ポップアップは短さが命です。数秒で理解されなければ閉じられます。

クーポン

タイトル: 本日限定クーポン
メッセージ: 今だけ 10%OFF。タイマーが 0 になる前にご利用ください。
ボタン: クーポンを使う

送料無料

タイトル: 送料無料は本日まで
メッセージ: タイマー終了までのご注文は送料無料でお届けします。
ボタン: 対象商品を見る

カート放棄

タイトル: カートに商品が残っています
メッセージ: 今ならすぐ購入できます。お手続きに戻りますか？
ボタン: カートに戻る

なお、割引に頼りすぎるのは避けたいところです。毎回クーポンで釣ると利益を削りますし、ユーザーも値引き待ちになります。割引以外の決め手として 送料無料・保証・限定特典 を用意しておくと、ポップアップの打ち手が広がります。

Q. 「あといくらで送料無料」とは、具体的にどう組み合わせる？

前半で触れたとおり、カゴ落ちの48%は送料が引き金です。だからこそ「Shopify あといくらで送料無料」と離脱防止カウントダウンは相性が良いのですが、役割を混ぜると失敗します。整理します。

「あといくらで送料無料」は、送料無料の条件（例：8,000円以上）と現在のカート金額の差分を見せ、平均注文単価（AOV）を押し上げる 施策です。ただし送料無料だけでは「今すぐ動く理由」が弱い。そこにカウントダウンを足すと、送料無料という得 と カウントダウンという急ぎ を同時に作れます。

具体的なパターンは次の3つです。

例1：送料無料キャンペーンの期限をカウントダウンで見せる

施策: 本日 23:59 まで送料無料
出し方: 離脱時に「送料無料終了まであと◯分」と提示
期待効果: 迷っている人の意思決定を前倒しできる

例2：まとめ買い導線を離脱時に出して単価を上げる

施策: まとめ買いで送料がお得
出し方: 離脱時に人気の追加購入商品（関連コレクション）へ誘導
期待効果: ついで買いが起きる

例3：「あといくら」を動的に見せたいなら役割分担する

役割 A: 「あといくらで送料無料」を動的に計算して表示する（送料無料バーなど）
例: シンプル送料無料バー｜あといくらで送料無料表示のような専用アプリで、残額を自動計算して表示できます。
役割 B: 離脱時に期限・特典・クーポンで背中を押す（カウントダウンポップアップ）

残額の動的計算は正確性が命なので専用の仕組みに任せ、離脱防止ポップアップは 期限・特典・行動導線 を短く出す役に寄せると、両輪がきれいに噛み合います。先ほどのしきい値の話（AOVの15〜30%上、進捗バー併用で注文額12〜18%増）も、この役割A側で活きてきます。

ポップアップ系アプリの選択肢を広げたいときは、Shopifyの離脱防止カウントダウンポップを表示できるアプリ13選や離脱防止カウントダウンポップアップ表示できるアプリ10選もあわせて見比べると、要件に合う一本が選びやすくなります。

Q. アプリを使わず、コードで自作するとどうなる？

開発リソースがあるなら、コードで「Shopify 離脱防止カウントダウンポップアップ」を作る選択肢もあります。ここでは、

PC の Exit intent（画面外離脱）で表示
カウントダウンを表示
閉じたら一定期間は再表示しない（localStorage）

という最小構成のサンプルを示します。

注意点

作業前に テーマを複製してバックアップ を取ってください
テーマによってファイル名や構造が違うため、配置場所はストアのテーマに合わせて調整してください
既に別のポップアップアプリやカスタム JS がある場合、競合する可能性があります

実装の流れ

theme.liquid にポップアップの HTML を追加
assets に CSS と JS を追加（または theme.liquid に埋め込み）
JS で Exit intent を検知して表示
JS でカウントダウンを動かす

HTML を追加

layout/theme.liquid の </body> の直前あたりに、以下を追加します。

{% comment %}
  Exit-intent countdown popup (sample)
  - Place before </body>
  - Customize texts and links for your campaign
{% endcomment %}

<div id="ur-exit-popup" class="ur-exit-popup" aria-hidden="true">
  <div class="ur-exit-popup__overlay" data-ur-exit-close></div>
  <div class="ur-exit-popup__panel" role="dialog" aria-modal="true" aria-label="限定オファー">
    <button type="button" class="ur-exit-popup__close" aria-label="閉じる" data-ur-exit-close>×</button>

    <p class="ur-exit-popup__title">本日限定オファー</p>
    <p class="ur-exit-popup__message">タイマーが 0 になる前に、クーポンをお受け取りください。</p>

    <div class="ur-exit-popup__timer" aria-label="カウントダウン">
      <span class="ur-exit-popup__time" data-ur-exit-min>--</span><span class="ur-exit-popup__label">分</span>
      <span class="ur-exit-popup__time" data-ur-exit-sec>--</span><span class="ur-exit-popup__label">秒</span>
    </div>

    <a class="ur-exit-popup__btn" href="/cart">カートに戻る</a>
    <p class="ur-exit-popup__note">※表示はサンプルです。内容はストアに合わせて調整してください。</p>
  </div>
</div>

CSS を追加

assets/base.css や assets/theme.css など、テーマのメイン CSS に以下を追加します。

/* Exit-intent popup (sample) */
.ur-exit-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ur-exit-popup.is-open {
  display: block;
}

.ur-exit-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.ur-exit-popup__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 32px));
  background: #fff;
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.ur-exit-popup__close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ur-exit-popup__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

.ur-exit-popup__message {
  margin: 0 0 12px;
  opacity: 0.9;
}

.ur-exit-popup__timer {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 14px;
}

.ur-exit-popup__time {
  font-size: 28px;
  font-weight: 700;
}

.ur-exit-popup__label {
  opacity: 0.8;
  margin-right: 8px;
}

.ur-exit-popup__btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  background: #111;
  color: #fff;
  font-weight: 700;
}

.ur-exit-popup__note {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.7;
}

JavaScript を追加

assets/exit-intent-popup.js を新規作成し、以下を追加します。

(function () {
  var popup = document.getElementById('ur-exit-popup');
  if (!popup) return;

  var STORAGE_KEY = 'ur_exit_popup_last_closed_at';
  var COOLDOWN_DAYS = 7; // 閉じたら再表示しない期間（例：7日）

  // 期限チェック（閉じたらしばらく出さない）
  try {
    var lastClosed = Number(localStorage.getItem(STORAGE_KEY) || '0');
    if (lastClosed) {
      var diffDays = (Date.now() - lastClosed) / (1000 * 60 * 60 * 24);
      if (diffDays < COOLDOWN_DAYS) return;
    }
  } catch (e) {
    // localStorage が使えない環境では制御できないので継続
  }

  var isOpen = false;
  var timerId = null;
  var endAt = null;

  var elMin = popup.querySelector('[data-ur-exit-min]');
  var elSec = popup.querySelector('[data-ur-exit-sec]');

  // カウントダウン時間（例：10分）
  var durationSec = 10 * 60;

  function pad2(n) {
    return String(n).padStart(2, '0');
  }

  function openPopup() {
    if (isOpen) return;
    isOpen = true;

    popup.classList.add('is-open');
    popup.setAttribute('aria-hidden', 'false');

    // タイマー開始
    endAt = Date.now() + durationSec * 1000;
    tick();
    timerId = window.setInterval(tick, 250);
  }

  function closePopup() {
    if (!isOpen) return;
    isOpen = false;

    popup.classList.remove('is-open');
    popup.setAttribute('aria-hidden', 'true');

    if (timerId) {
      window.clearInterval(timerId);
      timerId = null;
    }

    try {
      localStorage.setItem(STORAGE_KEY, String(Date.now()));
    } catch (e) {}
  }

  function tick() {
    var remain = Math.max(0, Math.floor((endAt - Date.now()) / 1000));
    var min = Math.floor(remain / 60);
    var sec = remain % 60;

    if (elMin) elMin.textContent = pad2(min);
    if (elSec) elSec.textContent = pad2(sec);

    if (remain <= 0) {
      // 0 になったら閉じる（または文言変更でもOK）
      closePopup();
    }
  }

  // Close buttons
  popup.addEventListener('click', function (e) {
    var target = e.target;
    if (target && target.hasAttribute('data-ur-exit-close')) {
      e.preventDefault();
      closePopup();
    }
  });

  // Exit intent detection (PC)
  var hasTriggered = false;
  document.addEventListener('mouseout', function (e) {
    // 画面上部に抜けた時だけ（誤爆を減らす）
    if (!e.relatedTarget && e.clientY <= 0) {
      if (!hasTriggered) {
        hasTriggered = true;
        openPopup();
      }
    }
  });
})();

作成した JS を読み込むために、theme.liquid の </body> 直前に次を追加します。

{{ 'exit-intent-popup.js' | asset_url | script_tag }}

コード実装で気をつけたいこと

Exit intent はブラウザ依存で、想定通りに発火しないことがあります
スマホは離脱の検知が難しいため、別条件（スクロール、一定時間など）に寄せるのが一般的です
ポップアップはアクセシビリティ（フォーカス制御など）にも配慮すると安心です

このサンプルは1条件・固定文言の最小構成です。実運用で必要になる「条件ごとのクールダウン」「閉じた後の抑制期間」「複数トリガーの出し分け」までコードで作り込むなら、相応の工数がかかります。テーマ更新で消えるリスクも考えると、アプリのアプリブロック方式に任せたほうが速いケースが多いです。

Q. 結局、効果はどう測ればいいの？

入れた瞬間に売上が跳ねるものではないので、数字で判断する前提を持っておくと運用がブレません。見るべき指標を絞ります。

表示回数・クリック率・購入率（条件ごとに比較する）
平均注文単価（AOV）
カート離脱率
送料無料到達率（しきい値に届いている人の割合）

送料無料と組み合わせると、「注文単価は上がったが購入率が落ちた」というトレードオフが起きることもあります。単一の数字だけで良し悪しを決めず、セットで眺めるのが安全です。

よくある質問

カウントダウンは何分が良い？

商材やオファーで変わりますが、迷ったら5〜15分でテストすると運用しやすいです。短すぎると焦りが強く出すぎ、長すぎると緊急性が薄れます。

しつこく見えるのが不安です

次の3点でかなり改善できます。表示条件を1〜2個に絞る、条件ごとにクールダウンを入れる、「閉じたら再表示しない」をONにする——です。最初は「出しすぎない」が正解になりやすいです。

「あといくらで送料無料」をポップアップ内で自動計算できますか？

ポップアップがカート金額を読み取って差分を自動計算できるかは、アプリや実装に依存します。本記事の「シンプル離脱防止カウントダウンタイマーポップアップ」はカウントダウンと表示条件の設計に強みがあるため、動的な残額表示は送料無料バー側に任せ、ポップアップは期限・特典・導線で背中を押す、という役割分担にすると組み合わせやすいです。

離脱防止ポップアップだけで売上は十分伸びますか？

冒頭のとおり、exit-intent単体の回収率は離脱訪問者の4〜7%程度です。これ単体に過度な期待をかけるより、カウントダウンや送料無料訴求と掛け合わせて「戻ってきた人を購入まで運ぶ」設計にするほうが、データ上の伸びしろは大きくなります。

まとめ

Shopify に離脱防止カウントダウンポップアップを入れるなら、押さえどころは次のとおりです。

exit-intent単体の回収率は4〜7%と控えめ。カウントダウンを足して「戻ってきた人の購入率」を引き上げる のが効き目の本質
カゴ落ちの48%は送料が引き金。だから「Shopify あといくらで送料無料」との合わせ技が刺さる
しきい値はAOVの15〜30%上、進捗バー併用で注文額12〜18%増という目安を起点に調整する
表示条件は1〜2個から。クールダウンと「閉じたら再表示しない」を最初に設計して出しすぎを防ぐ

ノーコードで始めるなら「シンプル離脱防止カウントダウンタイマーポップアップ」が、アプリブロック方式でテーマ更新に強く、6種類の表示条件と条件別クールダウンまで備えていて扱いやすい一本です。まずは小さく入れて、クリック率や購入率を見ながら磨いていきましょう。

参考記事

この記事は以下の記事を参考にしています。

ブログTOP お問い合わせ

Shopify 離脱防止カウントダウンポップアップのよくある疑問に回答｜送料無料施策との合わせ技も

目次

はじめに

Q. Shopify 離脱防止カウントダウンポップアップは本当に効果があるの？

Q. なぜ「送料無料」と一緒に語られることが多いの？

Q. 送料無料のしきい値は、いくらに設定すればいいの？

Q. Shopify の標準機能だけで付けられないの？

Q. アプリとコード、どっちで作るのが正解？

アプリで導入する：シンプル離脱防止カウントダウンタイマーポップアップ

基本情報

このアプリの固有の強みはどこ？

Q. インストールはどうやるの？

Q. インストールしたのに表示されない、なぜ？

テーマエディタで「アプリ埋め込み」を有効化する

Q. どの設定項目を、どう埋めればいいの？

Q. 表示条件は6種類もあるけど、どれを選べばいい？

クールダウンと再表示制御は最初に決める

Q. とりあえず最初は、どう設定すれば外さない？

出しすぎない王道セット

読み物ページ向け（体験を壊さず回遊につなげる）

カート周り向け（放棄回復を最優先）

文言テンプレート

Q. 「あといくらで送料無料」とは、具体的にどう組み合わせる？

Q. アプリを使わず、コードで自作するとどうなる？

実装の流れ

HTML を追加

CSS を追加

JavaScript を追加

コード実装で気をつけたいこと

Q. 結局、効果はどう測ればいいの？

よくある質問

カウントダウンは何分が良い？

しつこく見えるのが不安です

「あといくらで送料無料」をポップアップ内で自動計算できますか？

離脱防止ポップアップだけで売上は十分伸びますか？

まとめ

参考記事

おすすめ Shopify アプリ

シンプル予約システム｜来店日時指定・イベント予約カレンダー

シンプル追従営業日カレンダー｜お手軽追従休業日設定

シンプル店舗受け取り｜お手軽ローカルピックアップ

シンプル注文履歴おすすめ商品｜お手軽マイページアップセル

シンプル顧客メタフィールドCSVインポート・エクスポート

シンプルフォーム一体型LP｜お手軽チャットボット購入

シンプル商品メタフィールドCSVインポート・エクスポート

シンプル新しいお客様アカウント拡張｜生年月日・追加フォーム

関連記事

【2026年】Shopifyの離脱防止カウントダウンポップを表示できるアプリ13選を紹介！

【2025】Shopifyの送料無料表示アプリ20選を紹介！

【2025】Shopifyであといくらで送料無料の表示を実現できる送料無料バーアプリ8選を紹介！

【2025年】Shopifyに送料無料バー表示する方法は？おすすめアプリも紹介！

【2026年】Shopify でメール登録率を高めるおすすめメルマガポップアップアプリ 21 選を紹介！

Shopify メルマガポップアップアプリの導入ガイド — 登録率アップの設定術とコード実装

Menu

Social