2026/01/18

Shopifyに離脱防止カウントダウンポップアップ表示できるアプリ10選

@ 信条刃

Shopify

今回の記事は Shopify App Store で提供されている、「離脱防止カウントダウンポップアップ」を実装できる Shopify アプリについての記事です。

カゴ落ち（カート放棄）や直帰を減らす施策の中でも、離脱しそうな瞬間に、期限付きオファーを提示するのは即効性が高く、まず試す価値があります。

離脱防止ポップアップについて調べるにあたり、以下の観点を参考にしています。

カゴ落ち（カート放棄）対策の基本設計（タイミング・訴求内容・頻度制御）
クーポン配布の設計（期限、適用条件、CTA の導線）
計測（表示回数、クリック率、CVR、A/B テスト）

離脱防止カウントダウンポップアップとは

離脱防止カウントダウンポップアップは、ユーザーがストアを離れようとしたタイミング（いわゆる Exit Intent）や、一定の条件（滞在時間・スクロール深度など）で表示するポップアップに、カウントダウンタイマーを組み合わせた施策です。

カウントダウンが入ることで「今だけ」「急いだほうがいい」という心理（緊急性・希少性）が生まれ、次のアクションにつながりやすくなります。

離脱の直前に「◯分以内ならクーポン適用」などを提示
カゴ落ちしそうなユーザーに「今だけ送料無料」などを提示
メール/SMS/WhatsApp などの連絡先を回収して、後追いで再購入導線を作る

アプリを使うと、これらをノーコードで実装できるケースが多いです。一方で「デザインや条件を完全に自由にしたい」「軽量にしたい」場合は、テーマ側でのコーディング実装も選択肢になります（後述します）。

離脱防止カウントダウンポップアップを導入する利点

離脱防止カウントダウンポップアップを導入することで得られる利点を解説します。

カゴ落ち（カート放棄）の回復率が上がる
迷っているユーザーに対し、最後のひと押し（割引・送料無料・特典）を提示できます。
“今すぐ買う理由”を作れる
カウントダウンがあるだけで、同じクーポンでも反応が変わります。期限が曖昧なオファーより強いです。
直帰率の改善につながる
その場で購入しなくても、メルマガ登録・SMS 登録・WhatsApp 登録など「離脱前の接点」を作れます。
リスト（メール/SMS/WhatsApp）の獲得ができる
1回の訪問で売れなくても、次の接点を持てるのが大きいです。特に単価が高い商材ほど効きます。
オファーのターゲティングができる
国、デバイス、ページ、UTM、商品タグなどで出し分けできるアプリを使うと、割引の出しすぎを防げます。
A/B テストで勝ちパターンが見つかる
文言、割引率、表示タイミング、デザインなどをテストできるアプリは、伸びしろを見つけやすいです。
“社会的証明（Social Proof）”との相性が良い
最近の購入通知や閲覧数と、期限付きオファーを組み合わせると、心理的な後押しが強くなります。
運用が回る（設定・スケジュール）
セール期間だけ自動でオンにする、表示回数を制限する、など運用面のミスを減らせます。
計測できると改善が早い
表示回数、クリック数、CVR、注文回復率が見えると、やるべき改善が明確になります。

離脱防止カウントダウンポップアップアプリの選び方

離脱防止ポップアップは「入れれば売れる」ではなく、出し方の設計が重要です。アプリを選ぶ際は、次の機能をチェックしておくと失敗が減ります。

Exit Intent（離脱検知）がある（マウスの動き・戻る操作など）
滞在時間、スクロール深度、ページ指定などのトリガーが豊富
カウントダウンの表示（バー/ポップアップ）と、期限切れ後の挙動を設定できる
クーポンコードの表示・コピー・自動適用などの導線が作れる
表示頻度（1回だけ、1日1回、◯日1回など）を制御できる
ターゲティング（国・デバイス・UTM・商品タグ・Shopify Markets など）
計測（表示回数、クリック率、CVR）と A/B テスト
メール/SMS/WhatsApp など外部ツール連携（Klaviyo / Mailchimp など）
日本語対応（管理画面・サポート）が必要かどうか

ここまでを踏まえると、最初は「条件設定が簡単」「頻度制御がある」「クーポン導線が作れる」アプリから入るのが無難です。

コーディングで離脱防止カウントダウンポップアップを実装する方法

アプリを入れずに、テーマ側で軽量に実装したい方向けに、Exit Intent + 滞在時間 + スクロールをトリガーにしたカウントダウンポップアップのサンプルを載せます。

ポイントは次の通りです。

PC：マウスが画面上部へ抜けたら（Exit Intent）表示
モバイル：Exit Intent が取りづらいので、滞在時間・スクロールで表示
表示は 1日1回（localStorage）などに制限
カウントダウンは表示後に開始
クーポン導線は /discount/クーポンコード?redirect=現在ページ の形で簡易実装（ストア設定により挙動は異なります）

1) スニペットを作成する

Shopify 管理画面の「オンラインストア > テーマ > コード編集」から、snippets/exit-countdown-popup.liquid を作成して、以下を貼り付けます。

<div id="ExitCountdownPopup" class="exit-popup" aria-hidden="true" role="dialog" aria-modal="true">
  <div class="exit-popup__backdrop" data-exit-popup-close></div>

  <div class="exit-popup__panel" role="document">
    <button class="exit-popup__close" type="button" aria-label="閉じる" data-exit-popup-close>
      ×
    </button>

    <p class="exit-popup__title">ちょっと待ってください</p>

    <p class="exit-popup__text">
      いま購入すると <strong>10%OFF</strong> が使えます。
      残り <span data-exit-popup-countdown>05:00</span> で終了です。
    </p>

    <div class="exit-popup__actions">
      <a
        class="exit-popup__btn"
        href="/discount/EXIT10?redirect={{ request.path }}"
        data-exit-popup-cta
      >
        クーポンを適用して購入する
      </a>

      <button class="exit-popup__secondary" type="button" data-exit-popup-close>
        今は閉じる
      </button>
    </div>

    <p class="exit-popup__note">※割引の適用条件はストア設定により異なります。</p>
  </div>
</div>

<style>
  .exit-popup { position: fixed; inset: 0; display: none; z-index: 99999; }
  .exit-popup.is-open { display: block; }
  .exit-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }

  .exit-popup__panel {
    position: relative;
    max-width: 520px;
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }

  .exit-popup__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
  }

  .exit-popup__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
  .exit-popup__text { margin: 0 0 14px; line-height: 1.7; }

  .exit-popup__actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .exit-popup__btn {
    display: inline-block;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #111;
  }
  .exit-popup__secondary {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    cursor: pointer;
  }

  .exit-popup__note { margin: 10px 0 0; font-size: 12px; opacity: .75; }
</style>

<script>
(() => {
  const popup = document.getElementById('ExitCountdownPopup');
  if (!popup) return;

  const SETTINGS = {
    durationSeconds: 5 * 60,
    showAfterSeconds: 8,
    showAfterScrollPercent: 45,
    showOncePer: 'day',
    storageKey: 'exit_countdown_popup_seen_at'
  };

  const now = () => Date.now();

  const readSeenAt = () => {
    try { return localStorage.getItem(SETTINGS.storageKey); } catch (e) { return null; }
  };

  const writeSeenAt = () => {
    try { localStorage.setItem(SETTINGS.storageKey, String(now())); } catch (e) {}
  };

  const hasSeen = () => {
    const v = readSeenAt();
    if (!v) return false;
    if (SETTINGS.showOncePer === 'session') return true;

    const seenAt = parseInt(v, 10);
    if (Number.isNaN(seenAt)) return false;

    const oneDayMs = 24 * 60 * 60 * 1000;
    return (now() - seenAt) < oneDayMs;
  };

  let countdownInterval = null;
  const countdownEl = popup.querySelector('[data-exit-popup-countdown]');

  const format = (seconds) => {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    const mm = String(m).padStart(2, '0');
    const ss = String(s).padStart(2, '0');
    return mm + ':' + ss;
  };

  const startCountdown = () => {
    if (!countdownEl) return;

    const endAt = now() + SETTINGS.durationSeconds * 1000;

    const tick = () => {
      const remaining = Math.max(0, Math.ceil((endAt - now()) / 1000));
      countdownEl.textContent = format(remaining);

      if (remaining <= 0) {
        clearInterval(countdownInterval);
      }
    };

    tick();
    clearInterval(countdownInterval);
    countdownInterval = setInterval(tick, 250);
  };

  const open = () => {
    if (popup.classList.contains('is-open')) return;
    if (hasSeen()) return;

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

    writeSeenAt();
    startCountdown();
  };

  const close = () => {
    popup.classList.remove('is-open');
    popup.setAttribute('aria-hidden', 'true');
  };

  popup.addEventListener('click', (e) => {
    const closeBtn = e.target.closest('[data-exit-popup-close]');
    if (closeBtn) close();
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') close();
  });

  const onMouseOut = (e) => {
    if (e.clientY > 10) return;
    if (!e.relatedTarget && !e.toElement) {
      open();
      document.removeEventListener('mouseout', onMouseOut);
    }
  };
  document.addEventListener('mouseout', onMouseOut);

  setTimeout(() => open(), SETTINGS.showAfterSeconds * 1000);

  const onScroll = () => {
    const doc = document.documentElement;
    const scrollTop = window.scrollY || doc.scrollTop;
    const height = doc.scrollHeight - doc.clientHeight;
    if (height <= 0) return;

    const percent = Math.round((scrollTop / height) * 100);
    if (percent >= SETTINGS.showAfterScrollPercent) {
      open();
      window.removeEventListener('scroll', onScroll);
    }
  };
  window.addEventListener('scroll', onScroll, { passive: true });
})();
</script>

2) テーマに読み込ませる

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

{% render 'exit-countdown-popup' %}

これで表示されます。

「Exit Intent だけで出したい」場合は、setTimeout と scroll のトリガー部分をコメントアウトしてください
「1日1回ではなくセッション1回」にしたい場合は showOncePer を session に変更してください
クーポンコードは EXIT10 の部分を変更してください（管理画面で作成したコードに合わせる）

アプリ導入前の PoC（効果検証）にも使えるので、まずこの形で試すのもおすすめです。

価格比較

「まずは低コストで試したい」場合に見やすいよう、ざっくり比較します（テーブルは使わず箇条書きでまとめます）。

月額が低い（$5前後）で始めたい
- Drodl: Create Smart Exit Popup：$3.99/月（Pro）
- シンプル離脱防止カウントダウンタイマーポップアップ：$4.99/月
- スピンホイールポップアップ、電子メールポップアップ：$4.99/月（Starter）
無料から試したい（上限あり）
- Poptin：無料（訪問者数上限あり）
- Yeps：無料（表示回数上限あり）
- Qikify：無料（訪問者数上限あり）
- Toastibar：無料（表示回数上限あり）
- Algoshop AI 通知バー：無料（ビュー上限あり）
- Drodl：無料（作成数など上限あり）
- B: WhatsApp Chat, Abandon Cart：無料
“分析・改善” も見据えて伸ばしたい
- Poptin（A/B テスト・分析）
- Toastibar（分析、A/B テスト）
- Qikify（Analytics）
- Algoshop（分析ダッシュボード）

価格だけでなく、表示頻度の制御とターゲティングができるかも重要です。割引の出しすぎは利益を圧迫するので、ここは必ず確認してください。

Shopify アプリの日本語サポート

日本語対応があるかどうかは、運用スピードに直結します。英語 UI が問題ない場合は選択肢が広がりますが、チーム運用だと日本語対応があるほうが楽です。

シンプル離脱防止カウントダウンタイマーポップアップ：○（日本語含む多言語）
Poptin Exit Popup Email Pop Up：×（日本語未翻訳）
Yeps：○（日本語対応）
Qikify Sales Pop up & Proof：×（日本語未翻訳）
Toastibar Sales Popup & Timers：○（日本語対応）
Algoshop AI 通知バー：○（日本語対応）
Drodl: Create Smart Exit Popup：×（日本語未翻訳）
Exit Pop Up: Exit Intent Popup：×（日本語未翻訳）
B: WhatsApp Chat, Abandon Cart：×（日本語未翻訳）
スピンホイールポップアップ、電子メールポップアップ：○（日本語対応）

使いやすさ

「離脱防止カウントダウン」を最短で作るなら、目的別に次の選び方がわかりやすいです。

離脱防止カウントダウンに特化して、シンプルに導入したい
- シンプル離脱防止カウントダウンタイマーポップアップ
Exit Intent を中心に、テンプレでサクッと回したい
- Exit Pop Up: Exit Intent Popup
- Drodl: Create Smart Exit Popup
メール/SMS 連携まで含めて “ポップアップ施策” を強くしたい
- Poptin
- スピンホイールポップアップ、電子メールポップアップ
社会的証明（売れてる感）＋カウントダウンで FOMO を強化したい
- Toastibar
- Qikify
バナー中心で、タイムセールや配送案内をスマートに運用したい
- Algoshop AI 通知バー
- Yeps（バーも強い）

また「まずは効果が出るか検証したい」場合は、本文中のコーディング例で 簡易実装 → 反応が良ければアプリで運用強化 が現実的です。

終わりに

今回は、Shopify の「離脱防止カウントダウンポップアップ」を実装できるアプリ10選を紹介しました。

離脱施策は、やりすぎるとブランド体験を壊すリスクもあります。だからこそ、

表示頻度を制限する
対象ページを絞る
割引だけに頼らず（送料無料、限定特典、リスト獲得など）設計する
計測して改善する

この4点を押さえると、成果が出やすくなります。

どのアプリをインストールするか迷っている場合は、まず「無料枠のあるアプリ」で試し、勝ちパターンが見えたら上位プランや別アプリに移行するのがおすすめです。

ここまでお付き合い頂き、誠にありがとうございました。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopifyに離脱防止カウントダウンポップアップ表示できるアプリ10選

離脱防止カウントダウンポップアップとは

離脱防止カウントダウンポップアップを導入する利点

離脱防止カウントダウンポップアップアプリの選び方

コーディングで離脱防止カウントダウンポップアップを実装する方法

1) スニペットを作成する

2) テーマに読み込ませる

おすすめの離脱防止カウントダウンポップアップ Shopify アプリ

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

特徴・機能

価格設定

Poptin Exit Popup Email Pop Up

特徴・機能

価格設定

Yeps メールポップアップ、アナウンスバー、バナー

特徴・機能

価格設定

Qikify Sales Pop up & Proof

特徴・機能

価格設定

Toastibar Sales Popup & Timers

特徴・機能

価格設定

Algoshop AI 通知バー

特徴・機能

価格設定

Drodl: Create Smart Exit Popup

特徴・機能

価格設定

Exit Pop Up: Exit Intent Popup

特徴・機能

価格設定

B: WhatsApp Chat, Abandon Cart

特徴・機能

価格設定

スピン ホイール ポップアップ、電子メール ポップアップ

特徴・機能

価格設定

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopifyに離脱防止カウントダウンポップアップ表示できるアプリ10選

Shopify にメルマガ登録フォームを表示できるアプリを5つ紹介！

Shopifyでブログの読了時間目安を表示するアプリ10選

Shopify でポップアップをページごとに表示できるアプリを5つ紹介！

Shopify にウェルカムポップアップクーポンを表示できるアプリ10選

Shopifyにハイライトメニューを表示できるアプリ7選

スピンホイールポップアップ、電子メールポップアップ