【2026年】Shopifyに離脱防止カウントダウンポップアップを表示する方法は？おすすめアプリも紹介！

目次

• はじめに
• 記事の構成
• Shopify で離脱防止カウントダウンポップアップを表示できる？
• Shopify の離脱防止カウントダウンポップアップを表示するメリット・デメリット
  • メリット
  • デメリット
• テーマのコード編集とアプリ導入の比較
  • テーマのコード編集で実装する方法
  • アプリを導入する方法
  • 結論：最初はアプリで小さく試すのがおすすめ
• おすすめ Shopify アプリ「シンプル離脱防止カウントダウンタイマーポップアップ」紹介
  • アプリの基本情報
  • できること
• アプリのインストール手順
• アプリをテーマに追加（有効化）
  • テーマエディタで「アプリ埋め込み」を有効化する
• アプリの設定項目を理解する
  • 基本設定
  • 表示条件の設定
  • クールダウンと再表示制御
• すぐ使えるおすすめ設定例
  • 迷ったらこれ：出しすぎない王道セット
  • 読み物ページ向け：体験を壊さず回遊につなげる
  • カート周り向け：放棄回復を最優先
  • 文言のテンプレ例
• Shopify「あといくらで送料無料」施策と組み合わせる考え方
  • 組み合わせ例
• テーマのコード編集で実装する場合のサンプルコード
  • 実装の流れ
  • HTML を追加
  • CSS を追加
  • JavaScript を追加
  • コード実装の注意点
• 運用のコツ
  • まずは 1〜2 条件からテストする
  • メッセージは短く、オファーは明確に
  • クールダウンで「しつこさ」をコントロールする
  • 導線は “カートに戻す” か “迷いを解消する” かを選ぶ
  • 「Shopify あといくらで送料無料」と一緒に見る指標
• よくある質問
  • Shopify の標準機能だけで離脱防止カウントダウンポップアップを付けられる？
  • アプリを入れたのに表示されません
  • しつこく見えるのが不安です
  • カウントダウンは何分が良い？
  • 「あといくらで送料無料」をポップアップ内で自動計算できますか？
• まとめ
• 参考記事

はじめに

Shopify ストアを運営していると、売上を伸ばすうえで避けて通れないのが 「離脱」 です。

• 商品は見られているのに、カートに入れた後に戻ってこない
• 送料や納期の確認でページを閉じられてしまう
• キャンペーンを走らせても、最後の一押しが足りない

そんなときに効く施策の 1 つが、「Shopify 離脱防止カウントダウンポップアップ」 です。

訪問者がストアを離れようとした瞬間に、

• 期間限定クーポン
• 本日限定の送料無料
• 在庫僅少の案内

などを カウントダウンで提示できるため、「今買う理由」を作りやすくなります。

本記事では、キーワードである 「Shopify 離脱防止カウントダウンポップアップ」 を軸に、Shopify で実現する方法を整理します。

• テーマのコード編集で実装する方法（Liquid / JS / CSS）
• アプリを導入してノーコードで実装する方法

後半では、手軽に導入できるおすすめアプリとして 「シンプル離脱防止カウントダウンタイマーポップアップ」 を紹介し、インストールから設定、失敗しにくい運用例までまとめます。

あわせて、よく一緒に検討される 「Shopify あといくらで送料無料」 の施策との組み合わせ方も解説します。

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

• Shopifyに離脱防止カウントダウンポップアップを導入する方法を4つ紹介！
• Shopifyに離脱防止カウントダウンポップアップ表示できるアプリ10選
• 【2026年】Shopifyの離脱防止カウントダウンポップを表示できるアプリ13選を紹介！
• Shopifyに離脱防止カウントダウンタイマーポップアップを導入できるアプリについて徹底解説｜ご利用ガイド

記事の構成

この記事は以下の流れで解説します。

• Shopify で離脱防止カウントダウンポップアップを表示できるか
• 離脱防止カウントダウンポップアップのメリット・デメリット
• テーマのコード編集とアプリ導入の違い（選び方）
• おすすめアプリ「シンプル離脱防止カウントダウンタイマーポップアップ」の特徴
• アプリのインストール手順と有効化（ご利用ガイドの流れ）
• 設定項目の解説と、すぐ使えるおすすめ設定例
• 「Shopify あといくらで送料無料」施策との組み合わせ方
• テーマのコード編集で実装する場合のサンプルコード
• 運用のコツ・よくある質問・まとめ

読み終える頃には、「最短で試す方法」と「やりすぎずに成果につなげる設計」が分かる状態を目指します。

Shopify で離脱防止カウントダウンポップアップを表示できる？

結論から言うと、Shopify で離脱防止カウントダウンポップアップを表示することは可能です。

ただし、Shopify の標準機能として「離脱時にカウントダウン付きポップアップを出す」機能が用意されているわけではありません。

実現方法は大きく 2 つです。

• テーマのコードを編集して実装する方法（Liquid / HTML / CSS / JavaScript）
• アプリを導入して実装する方法（ノーコード中心）

どちらでも「Shopify 離脱防止カウントダウンポップアップ」は実現できますが、難易度・自由度・運用コスト が変わります。

「まずは最短で効果検証したい」ならアプリ、「デザインや表示ルールを細かく作り込みたい」ならコード編集が候補になります。

Shopify の離脱防止カウントダウンポップアップを表示するメリット・デメリット

導入前に押さえておきたいポイントを整理します。

メリット

カート放棄の抑制につながりやすい

離脱防止ポップアップは、購入直前のユーザーに対して最後の一押しを作れるのが強みです。

• 「本日 23:59 まで 10%OFF」
• 「あと 10 分限定で送料無料」
• 「今すぐカートに戻る」

のように、行動理由を短く提示できます。

緊急性を作れて、キャンペーンと相性が良い

カウントダウンは「今行動したほうが得」という心理を作りやすい表現です。

とくに、

• 期間限定セール
• 週末キャンペーン
• クーポン配布

などの施策では、ポップアップがあるだけで意思決定が早まることがあります。

表示条件を設計すると、体験を崩しにくい

離脱防止ポップアップは「出せば出すほど良い」わけではありません。

たとえば、

• 一定時間読んだ人にだけ出す
• ページを一定割合スクロールした人にだけ出す
• 別タブから戻った人にだけ出す

のように条件を絞ると、興味が高い層にだけ訴求しやすく、体験を壊しにくくなります。

「Shopify あといくらで送料無料」施策と組み合わせると単価を上げやすい

送料が原因で離脱している場合、

• 「送料無料まであと少し」
• 「送料無料キャンペーンは本日まで」

といった訴求は効きやすいです。

このあたりは後半で具体例を紹介します。

デメリット

出し方を間違えると、ストア体験を壊す

ポップアップは便利な反面、出し方を間違えると逆効果になります。

• ページを開くたびに出る
• 閉じても何度も出る
• 読み物（ブログ）にも強制的に出る

こうなると「しつこいストア」という印象になり、長期的にはマイナスです。

安易な「煽り」表現は信頼を落とす

カウントダウンは緊急性を作れますが、

• 実際には常に延長される
• 毎日「本日限定」

のような運用は、ユーザーに見抜かれて信頼を落とす可能性があります。

「本当に期限があるオファー」を中心に設計するのがおすすめです。

テーマやアプリ構成によっては表示速度に影響することがある

アプリが増えるほど、ストアの表示速度や競合リスクは上がりやすいです。

ポップアップは表示タイミングが重要なので、

• 表示が遅い
• レイアウトが崩れる

といった不具合は機会損失になります。

次の章で、コード編集とアプリ導入の違いを整理します。

テーマのコード編集とアプリ導入の比較

「Shopify 離脱防止カウントダウンポップアップ」を実装する方法は、コード編集 と アプリ導入 の 2 つです。

テーマのコード編集で実装する方法

Liquid / HTML / CSS / JavaScript を編集して実装します。

メリット

• 自由度が高い（表示位置、デザイン、表示条件、カウントダウンの動きまで自分で決められる）
• 月額費用がかからない（外部アプリ費用を抑えられる）
• 実装次第で 軽くできる（必要最低限の JS だけで動かせる）

デメリット

• 実装と保守にスキルが必要（テーマ構造の理解が必要）
• テーマ更新で上書きされるリスク（バックアップ運用が必須）
• 「閉じたら再表示しない」「条件ごとのクールダウン」などを自前で作る必要がある

「開発リソースがある」「自由度を優先したい」場合に向きます。

アプリを導入する方法

Shopify アプリをインストールし、管理画面の設定で表示させる方法です。

メリット

• ノーコードで導入できる
• テスト公開までが速い（最短で今日中に検証できる）
• 表示条件やクールダウンなど、運用に必要な機能がまとまっている

デメリット

• 月額費用がかかる
• 自由度はアプリの仕様に依存する
• アプリ同士の競合や、表示速度への影響に注意が必要

結論：最初はアプリで小さく試すのがおすすめ

離脱防止のように「出し方で結果が変わる」施策は、まず 小さく試して、数字を見ながら改善するのが失敗しにくいです。

その意味で、最初はアプリ導入が現実的です。

• どのページで
• どの条件で
• どんな文言で

効果が出るのかを見て、必要ならコード実装に移行する、という順番が安全です。

おすすめ Shopify アプリ「シンプル離脱防止カウントダウンタイマーポップアップ」紹介

手軽に「Shopify 離脱防止カウントダウンポップアップ」を導入するなら、「シンプル離脱防止カウントダウンタイマーポップアップ」 が候補になります。

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

アプリの基本情報

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

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

できること

本アプリは、離脱しそうな訪問者にカウントダウン付きのポップアップを表示し、購入や回遊を後押しできるのが強みです。

• ノーコードで導入できる
• 表示条件を細かく調整できる（滞在時間、スクロール深度、離脱動作など）
• 条件ごとのクールダウン（再表示までの秒数） を設定できる
• ポップアップの テキスト、色、タイマー期間 をカスタマイズできる
• テーマに アプリ埋め込み（App embeds） として追加して運用できる

「まずはカート放棄を減らしたい」「キャンペーンを “見せるべき人” にだけ出したい」というストアと相性が良いです。

アプリのインストール手順

ここでは、ご利用ガイドの流れをベースに、インストール手順をまとめます。

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

1. Shopify 管理画面の左メニューから 「設定」 をクリックします。

   

2. 「アプリと販売チャネル」 をクリックし、Shopify App Store に移動します。

   

3. 検索窓で 「シンプル離脱防止カウントダウンタイマーポップアップ」 を検索し、アプリ詳細を開きます。

   

4. 「インストール」 をクリックし、権限を確認してインストールを完了します。

   

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

アプリをテーマに追加（有効化）

インストール後は、テーマに追加してストア上でポップアップが動作するようにします。

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

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

1. Shopify 管理画面で 「オンラインストア」→「テーマ」 を開き、対象テーマの 「テーマを編集する」 をクリックします。

   

2. テーマエディタ左側の 「アプリ埋め込み（App embeds）」 を開きます。

   

3. 「離脱防止カウントダウン…（UR: Exit-Intent Countdown…）」 を ON にします。

   

4. 右上の 「保存」 をクリックします。

   

ここまでで、ストア上でポップアップが表示される準備が整います。

「アプリを入れたのに表示されない」という場合は、ほとんどが この ON と保存ができていない ことが原因です。

アプリの設定項目を理解する

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

ここから「タイマーの見せ方」と「表示条件」を作り込んでいきます。

基本設定

タイマーのタイトル

ポップアップ上部に表示するタイトルです。

例

• Limited Sale!
• 本日限定セール
• カートに商品が残っています

タイトルは長くしすぎず、最初の 1 行で意図が伝わるのが理想です。

カウントダウン終了日時

YYYY-MM-DD HH:MM 形式で入力します。

設定画面にもある通り、訪問者のローカル時間で表示されます。

海外からのアクセスが多いストアは、時差の影響が出やすいので、

• 終了時間に余裕を持たせる
• 「日本時間で◯時まで」と文言で補足する

などが安全です。

ボタンのリンク先 URL

ボタンを押した時の遷移先です。訴求したい導線に合わせて設定します。

例

• 対象商品ページ
• コレクションページ
• カートページ
• キャンペーン LP

離脱防止なら「カートに戻す」「対象商品を見せる」など、行動が明確な遷移先にするのがおすすめです。

ボタンのテキスト

例

• 今すぐ見る
• カートに戻る
• セール会場へ

迷いを減らすために、動詞を入れて短くするとクリックされやすいです。

タイマーラベル

days:hours:min:sec のように、日・時・分・秒のラベルを指定できます（: 区切り）。

例

• 日:時間:分:秒
• D:H:M:S

表示する単位は、ストアのオファー設計に合わせると自然です。

• 「本日中」系なら時・分・秒を強調
• 「週末まで」系なら日・時があると分かりやすい

タイマーメッセージ

補足メッセージを入力します。

ポイントは、

• オファー内容を短く
• 行動理由が一瞬で伝わる

です。

例

• この特別オファーをお見逃しなく！
• 今だけ送料無料キャンペーン実施中
• まとめ買いでお得に

ここで 「Shopify あといくらで送料無料」 を意識するなら、たとえば次のように書けます。

• 送料無料まであと少し。今ならまとめ買いがおすすめです。
• 送料無料の条件を確認して、お得に購入しましょう。

「あといくら」をストアのカート金額に応じて自動計算して出したい場合は、別途「送料無料バー」系の仕組みが必要になります。

一方で、離脱防止ポップアップでは “行動のきっかけ” を作ることが目的なので、まずは上記のような文言でも十分テストが可能です。

表示条件の設定

本アプリの強みは、表示条件を組み合わせて「見せたい人にだけ」表示しやすい点です。

表示条件は 6 種類あり、複数を同時に ON にできます。

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

それぞれの使い分けをもう少し具体的に見ていきます。

画面外離脱（PC）

「カーソルが画面外に離脱した時に表示（PC）」です。

いわゆる Exit intent で、タブを閉じる、戻る、別ページへ移動する直前に出やすく、離脱防止の王道条件です。

おすすめ用途

• カート放棄対策（クーポン提示）
• 送料が理由で迷っている層への最後の案内

ヘッダー付近（PC）

「ブラウザ上部にマウスが移動した時に表示（PC）」です。

上部へマウスが行くのは、

• 戻る
• タブを閉じる
• URL を操作する

などの行動に近いため、離脱意図が高まったタイミングを拾いやすいです。

上スクロール

「ユーザーが上スクロールした際に表示」です。

商品ページや LP で上に戻る動きは、比較検討や離脱の兆候になりやすいので、最後の訴求ポイントとして使えます。

一定時間経過（1 回限り）

「一定時間経過後に表示（1 回限り）」です。

“ちゃんと見ている人” に絞って表示できるので、体験を壊しにくい条件です。

おすすめ用途

• 長めの商品説明ページ
• ブログ記事
• こだわりのストーリーがあるブランドサイト

スクロール量

「ページを指定％スクロールしたら表示」です。

指定したスクロール率に達したら表示します。

「ある程度読み進めた人」にだけ出せるため、一定時間経過と同じく、比較的体験を壊しにくい条件です。

例

• 70% 到達で「最後にクーポン」
• 80% 到達で「カートに戻る」

別タブから復帰

「別タブから復帰したときに表示」です。

比較検討で他サイトを見て戻ってきたユーザーに対して、再度訴求できます。

おすすめ用途

• 価格比較されやすい商材
• 競合が多いカテゴリ

クールダウンと再表示制御

条件ごとに クールダウン（再表示までの秒数） を設定できます。

また、「ユーザーが閉じたら再度表示しない」を ON にすると、ユーザーがポップアップを閉じた後、指定期間は表示を抑制できます。

離脱防止は「しつこさ」と紙一重なので、クールダウンと再表示制御は最初にしっかり設計するのがおすすめです。

すぐ使えるおすすめ設定例

「Shopify 離脱防止カウントダウンポップアップ」は、最初から作り込みすぎると、

• 出しすぎて体験を壊す
• どの条件が効いたのか分からない

という状態になりやすいです。

まずは次の方針でスモールスタートするのがおすすめです。

迷ったらこれ：出しすぎない王道セット

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

まずは 1 条件だけで、

• 表示回数
• クリック率
• 購入率

を見て判断すると改善が速いです。

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

ブログやブランドストーリーのようなページでは、離脱時に突然ポップアップが出ると邪魔に感じることがあります。

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

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

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

カートページ、カートドロワー周辺は、離脱防止の成果が出やすいポイントです。

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

送料がネックになりやすい商材なら、

• 本日中は送料無料キャンペーン中
• まとめ買いで送料がお得になります

のような一言を添えると効果が出ることがあります。

文言のテンプレ例

ポップアップは「短さ」が重要です。表示される数秒で理解されなければ閉じられます。

クーポン

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

送料無料

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

カート放棄

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

Shopify「あといくらで送料無料」施策と組み合わせる考え方

ここは SEO 的にもよく検索されるテーマなので、少し丁寧に整理します。

「Shopify あといくらで送料無料」は、

• 送料無料の条件（例：8,000 円以上）を提示する
• いまのカート金額との差分を見せる

ことで、平均注文単価（AOV）を上げやすい代表的な施策です。

ただ、送料無料だけだと「今すぐ動く理由」が弱いことがあります。

そこで、離脱防止カウントダウンポップアップを組み合わせると、

• 送料無料という “得”
• カウントダウンという “急ぎ”

を同時に作れるため、最後の一押しが強くなります。

組み合わせ例

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

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

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

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

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

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

「動的な金額差分」は正確性が重要なので、できれば専用の仕組みに任せるのが安全です。

離脱防止ポップアップは、

• 期限
• 特典
• 行動導線

を短く提示する役割に寄せると成果が出やすいです。

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに「Shopify 離脱防止カウントダウンポップアップ」を実装する場合、テーマに JavaScript と HTML/CSS を追加します。

ここでは、

• 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〜2 条件からテストする

条件を 4〜6 個同時に ON にすると、

• どの条件が効いたのか分からない
• 表示が多すぎて邪魔になる

という状態になりがちです。

最初は

• 画面外離脱（PC）
• 一定時間経過（1 回限り）

のどちらか 1 つから始めるのがおすすめです。

メッセージは短く、オファーは明確に

ポップアップで伝えたい情報を詰め込みすぎると読まれません。

• 何が得か
• いつまでか
• 何をすればいいか

を 1 画面で理解できるようにしましょう。

クールダウンで「しつこさ」をコントロールする

ページ回遊が多いストアほど、

• 条件ごとのクールダウン
• 閉じたら再表示しない期間

の設計が成果と体験の両方に直結します。

導線は “カートに戻す” か “迷いを解消する” かを選ぶ

離脱防止のリンク先は、基本的に次のどちらかが強いです。

• カートに戻す（購入完了に近い）
• 迷いを解消する情報へ（送料、納期、返品、サイズ表、レビュー）

ストアの離脱理由に合わせて導線を選ぶと無駄が減ります。

「Shopify あといくらで送料無料」と一緒に見る指標

送料無料施策と組み合わせる場合は、

• 平均注文単価（AOV）
• カート離脱率
• 送料無料到達率（到達できている人の割合）

をセットで見るのがおすすめです。

「注文単価は上がったが購入率が落ちた」など、トレードオフが出ることもあるため、数字で判断しましょう。

よくある質問

Shopify の標準機能だけで離脱防止カウントダウンポップアップを付けられる？

Shopify の標準機能だけでは用意されていません。

テーマのコード編集か、アプリ導入で実現するのが一般的です。

アプリを入れたのに表示されません

多くは次が原因です。

• テーマエディタの アプリ埋め込みを ON にしていない
• 保存を押し忘れている
• 公開テーマではなく、プレビューで違うテーマを見ている

まずは「オンラインストア → テーマ → カスタマイズ」からアプリ埋め込みを確認してください。

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

次の 3 点でだいぶ改善できます。

• 表示条件を 1〜2 個に絞る
• 条件ごとにクールダウンを入れる
• 「閉じたら再表示しない」を ON にする

特に最初は「出しすぎない」が正解になりやすいです。

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

商材やオファーにより変わりますが、迷ったら

• 5〜15 分

あたりでテストすると運用しやすいです。

短すぎると焦りが強くなり、長すぎると緊急性が薄れます。

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

ポップアップがカート金額を読み取り、差分を自動計算して表示できるかは、利用するアプリや実装に依存します。

本記事で紹介した「シンプル離脱防止カウントダウンタイマーポップアップ」は、カウントダウンと表示条件の設計に強みがあるため、

• “あといくら” の動的表示は別施策（送料無料バーなど）で担当
• ポップアップは期限・特典・導線で背中を押す

という役割分担にすると組み合わせやすいです。

まとめ

Shopify に離脱防止カウントダウンポップアップを表示するなら、ポイントは次のとおりです。

• 「Shopify 離脱防止カウントダウンポップアップ」は実現できる（コード編集 or アプリ）
• 最短で検証するなら アプリ導入が現実的
• 表示条件とクールダウンを設計して、出しすぎを防ぐのが重要
• 「Shopify あといくらで送料無料」 施策と組み合わせると、単価アップと離脱防止を同時に狙いやすい

おすすめアプリ 「シンプル離脱防止カウントダウンタイマーポップアップ」 を使えば、ノーコードで導入しやすく、表示条件も細かく調整できます。

まずは小さく導入して、クリック率や購入率を見ながら改善していきましょう。

参考記事

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

• Shopifyに離脱防止カウントダウンポップアップを導入する方法を4つ紹介！
• Shopifyに離脱防止カウントダウンポップアップ表示できるアプリ10選
• 【2026年】Shopifyの離脱防止カウントダウンポップを表示できるアプリ13選を紹介！
• Shopifyに離脱防止カウントダウンタイマーポップアップを導入できるアプリについて徹底解説｜ご利用ガイド