2026/01/17

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

@ 信条刃

Shopify

今回の記事は Shopify App Store で提供されている、ウェルカムポップアップクーポン（初回購入向けクーポンをポップアップで表示する機能）を実装できるアプリについての記事です。

「とりあえず初回購入のCVR（購入率）を上げたい」「メールやSMSのリストも一緒に増やしたい」「ノーコードでサクッと表示したい」など、目的別に選べるように、10個まとめて整理します。

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

ウェルカムポップアップクーポンとは

ウェルカムポップアップクーポンは、ストアに訪問したユーザー（特に新規ユーザー）に対して、ポップアップで割引クーポンを提示する施策です。

例えば以下のような見せ方が定番です。

「はじめての購入で10%OFF」などの初回限定クーポンを表示
メールアドレス登録と引き換えにクーポンを配布（リスト獲得）
離脱しそうなタイミング（Exit Intent）でクーポン提示して取りこぼしを減らす
スピンホイール（ガチャ）でゲーム性を持たせて登録率を上げる

Shopify は割引コードの運用がしやすいので、ポップアップと組み合わせると「初回購入の背中を押す」施策として相性が良いです。

ウェルカムポップアップクーポンを導入する利点

ウェルカムポップアップクーポンを導入することで得られる利点について解説します。

新規顧客の初回購入を後押しできる
初回限定の小さなインセンティブでも「今買う理由」が生まれます。特に比較検討中のユーザーに効きます。
離脱を減らし、取りこぼしを回収できる
Exit Intent（離脱意図）や遅延表示で、離脱直前のユーザーにクーポンを提示し、回遊や購入に戻せます。
メール・SMSリストを増やせる
クーポンをフックに、メールや電話番号（SMS）を取得できるため、継続的なCRM施策につながります。
AOV（平均注文額）の改善につながる場合がある
「送料無料まであと〇円」やアップセル提案と組み合わせるタイプのポップアップだと、客単価改善にも寄与します。
ストアの第一印象（体験）を設計できる
画像やコピー、表示タイミングの調整で「押しつけがましくない歓迎」が作れます。

ウェルカムポップアップクーポンアプリの選び方

ウェルカムポップアップクーポンアプリを選択する際には、アプリが提供する機能と運用のしやすさに注目することが重要です。

ノーコードで設定できるか（画像差し替え・文言変更・表示条件）
表示タイミングを制御できるか（即時、遅延、スクロール、Exit Intent、再訪問時など）
表示ページを絞れるか（ホームのみ、商品ページのみ、特定コレクションのみ、全ページなど）
クーポンの渡し方が選べるか（コード表示、ボタンクリックで適用、メール/SMS登録と引き換え）
ターゲティングが強いか（国、デバイス、UTM、Shopify Markets、タグなど）
分析があるか（表示回数、クリック率、CVR）
日本語対応（管理画面・サポート・翻訳）や多言語対応があるか
料金体系が運用に合うか（表示回数課金、ページビュー課金、注文数課金、完全無料など）

これらを押さえておくと、「入れたけど邪魔なだけだった」「制御できずに離脱が増えた」を避けやすいです。

価格比較

「まずはウェルカム施策を始める」観点で、各アプリの最小コスト帯を整理します（細かい制限は各プラン説明に準拠）。

無料で試しやすい枠がある
スピンホイールポップアップ（Free）
販売ポップアップ ‑ ソーシャルプルーフ（無料インストール）
ProveSource（Free Forever）
Yeps（無料）
EA • アップセルポップアップとクロスセル（無料）
Toastibar（無料）
POWR（無料）
Algoshop AI 通知バー（無料）
Adoric（無料）
月額 $10 前後で運用しやすい
シンプルウェルカムポップアップクーポンアプリ（$6.99/月）
Yeps（$6.99/月）
Toastibar（$9.99/月）
Algoshop（$9.90/月）
Adoric（$4.99〜 / 注文数に応じて）

「無料＝ずっと無料」ではなく、表示回数・ページビュー・注文数で実質的にアップグレードが発生するタイプもあるので、最初に自社のアクセス規模（PV/表示回数）に合うかを見ておくのがおすすめです。

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

日本語対応は運用コストに直結します。管理画面が日本語であることに加えて、サポート対応のしやすさも重要です。

日本語対応あり（アプリ情報に日本語が含まれる）
シンプルウェルカムポップアップクーポンアプリ
スピンホイールポップアップ、電子メールポップアップ
販売ポップアップ ‑ ソーシャルプルーフ
Yeps メールポップアップ、アナウンスバー、バナー
EA • アップセルポップアップとクロスセル
Toastibar Sales Popup & Timers
Algoshop AI 通知バー
日本語未翻訳（アプリ情報に「日本語に翻訳されていません」表記）
ProveSource: Sales Pop Ups
POWR Pop‑Ups & Discount Popup
Adoric Popup & Email Popups

使いやすさ

「ウェルカムクーポンを出したい」という目的だけで見ると、最も迷いにくいのは次の2タイプです。

できるだけシンプルに“ウェルカムクーポンを表示”したい
「シンプルウェルカムポップアップクーポンアプリ」
余計な機能が少なく、画像ポップアップで歓迎→初回購入促進まで一直線です。
ウェルカム施策を起点に、告知・タイマー・送料無料などもまとめて運用したい
「Yeps」
ターゲティングやバー/ポップアップの種類が多く、成長フェーズでも施策を積み上げやすいです。

一方で、メール/SMSリスト獲得に強く寄せるなら「スピンホイール系」、体験を壊しにくく上品にやるなら「通知バー系（Algoshop）」、客単価改善まで狙うなら「アップセル系（EA / Adoric）」が選択肢になります。

コーディングでウェルカムポップアップクーポンを実装する方法

アプリを使わず、テーマに直接「ウェルカムポップアップクーポン」を実装する方法も載せておきます。
開発コストはかかりますが、月額費用を抑えつつ、表示ルールを完全に自社仕様にできます。

注意点として、テーマのコード編集を行う前に、必ずテーマを複製してバックアップを作成してください。

実装の全体像

snippets/welcome-coupon-popup.liquid を作成（HTML/Liquid）
assets/welcome-coupon-popup.css を作成（CSS）
assets/welcome-coupon-popup.js を作成（JavaScript）
layout/theme.liquid から3点を読み込む
ローカルストレージで「一定期間は再表示しない」を制御
ボタン押下で割引を適用するリンク（/discount/コード?redirect=...）へ誘導

1) スニペットを作成（ポップアップ本体）

管理画面の「オンラインストア → テーマ → コードを編集」で、snippets/welcome-coupon-popup.liquid を新規作成し、以下を貼り付けます。

{%- comment -%}
  Welcome Coupon Popup (Snippet)
  表示制御は assets/welcome-coupon-popup.js 側で行います
{%- endcomment -%}

<div id="WelcomeCouponPopup" class="wc-popup" aria-hidden="true">
  <div class="wc-backdrop" data-wc-close></div>

  <div class="wc-dialog" role="dialog" aria-modal="true" aria-labelledby="wc-title">
    <button type="button" class="wc-close" aria-label="閉じる" data-wc-close>×</button>

    <h2 id="wc-title" class="wc-title">はじめてのご購入で10%OFF</h2>
    <p class="wc-text">
      今すぐ使えるクーポンコード：
      <strong class="wc-code">WELCOME10</strong>
    </p>

    <div class="wc-actions">
      <a class="wc-btn"
         href="/discount/WELCOME10?redirect={{ request.path | url_encode }}">
        このページで使う
      </a>

      <a class="wc-btn wc-secondary"
         href="/discount/WELCOME10?redirect=/collections/all">
        商品を見に行く
      </a>
    </div>

    <div class="wc-newsletter">
      <p class="wc-text wc-small">メールでも受け取れます（任意）</p>

      {% form 'customer', id: 'wc-newsletter-form' %}
        <input type="hidden" name="contact[tags]" value="newsletter,welcome-popup">
        <input type="email"
               name="contact[email]"
               class="wc-input"
               placeholder="メールアドレス"
               required>
        <button type="submit" class="wc-btn wc-full">メールで受け取る</button>
      {% endform %}
    </div>

    <p class="wc-note">※ ポップアップは一定期間、再表示しない設定です</p>
  </div>
</div>

クーポンコードは WELCOME10 の部分を変更してください。

2) CSSを追加（見た目）

assets/welcome-coupon-popup.css を新規作成して貼り付けます。

.wc-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.wc-popup.is-open {
  display: block;
}

.wc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.wc-dialog {
  position: relative;
  max-width: 520px;
  margin: 8vh auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.wc-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.wc-title {
  margin: 0 0 8px;
  font-size: 20px;
}

.wc-text {
  margin: 0 0 12px;
  line-height: 1.6;
}

.wc-small {
  font-size: 13px;
  opacity: 0.85;
}

.wc-code {
  letter-spacing: 0.06em;
}

.wc-actions {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
}

.wc-btn {
  display: inline-block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #111;
  color: #fff;
  background: #111;
  cursor: pointer;
}

.wc-secondary {
  background: #fff;
  color: #111;
}

.wc-full {
  width: 100%;
}

.wc-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.25);
  margin-bottom: 10px;
}

.wc-note {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.75;
}

最低限のスタイルだけにしているので、ブランドに合わせて調整してください。

3) JSを追加（表示タイミングと再表示制御）

assets/welcome-coupon-popup.js を新規作成して貼り付けます。

(function () {
  var STORAGE_KEY = "wc_popup_last_seen_at";
  var SUPPRESS_DAYS = 7;      // 再表示しない日数
  var OPEN_DELAY_MS = 1200;   // 初回表示までの遅延

  function nowMs() {
    return Date.now ? Date.now() : new Date().getTime();
  }

  function daysToMs(days) {
    return days * 24 * 60 * 60 * 1000;
  }

  function shouldOpen() {
    try {
      var last = localStorage.getItem(STORAGE_KEY);
      if (!last) return true;

      var lastMs = parseInt(last, 10);
      if (Number.isNaN(lastMs)) return true;

      return (nowMs() - lastMs) > daysToMs(SUPPRESS_DAYS);
    } catch (e) {
      // localStorage が使えない環境では毎回表示になり得るので、
      // 必要に応じてCookie実装に置き換えてください
      return true;
    }
  }

  function markSeen() {
    try {
      localStorage.setItem(STORAGE_KEY, String(nowMs()));
    } catch (e) {}
  }

  function openPopup(root) {
    root.classList.add("is-open");
    root.setAttribute("aria-hidden", "false");
    markSeen();
  }

  function closePopup(root) {
    root.classList.remove("is-open");
    root.setAttribute("aria-hidden", "true");
  }

  function init() {
    var root = document.getElementById("WelcomeCouponPopup");
    if (!root) return;

    if (!shouldOpen()) return;

    setTimeout(function () {
      openPopup(root);
    }, OPEN_DELAY_MS);

    root.addEventListener("click", function (e) {
      var target = e.target;
      if (target && target.matches && target.matches("[data-wc-close]")) {
        closePopup(root);
      }
    });

    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape") closePopup(root);
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();

4) theme.liquid で読み込む

最後に layout/theme.liquid を開き、</head> の直前にCSS、</body> の直前にスニペットとJSを追加します。

{%- comment -%} head 内の最後あたり {%- endcomment -%}
{{ 'welcome-coupon-popup.css' | asset_url | stylesheet_tag }}

{%- comment -%} body の最後あたり（</body>の直前） {%- endcomment -%}
{% render 'welcome-coupon-popup' %}
<script src="{{ 'welcome-coupon-popup.js' | asset_url }}" defer></script>

これで「初回訪問後しばらくは再表示しないウェルカムクーポンポップアップ」が動きます。
アプリほど高機能ではありませんが、最低限の要件を素早く満たすには十分実用的です。

終わりに

今回は、Shopify でウェルカムポップアップクーポンを実装するためのアプリ10選をまとめました。

どのアプリをインストールするか迷っている場合は、まず以下の判断がおすすめです。

“ウェルカムクーポンだけ”をシンプルに出したい → シンプルウェルカムポップアップクーポンアプリ
ポップアップ/バー/タイマーをまとめて運用したい → Yeps
リスト獲得を最優先にしたい → スピンホイール系（EasyApps）
体験を壊さず訴求したい → 通知バー系（Algoshop）
客単価まで伸ばしたい → アップセル系（EA / Adoric）

また、月額費用を抑えたい場合や、表示条件を完全に自社仕様にしたい場合は、記事内の「コーディング実装」も選択肢になります。

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

参考記事

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

@ 信条刃

Shopify

サイトTOP お問い合わせ

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

ウェルカムポップアップクーポンとは

ウェルカムポップアップクーポンを導入する利点

ウェルカムポップアップクーポンアプリの選び方

おすすめのウェルカムポップアップクーポン Shopify アプリ10選

シンプルウェルカムポップアップクーポンアプリ

特徴・機能

価格設定

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

特徴・機能

価格設定

販売ポップアップ ‑ ソーシャルプルーフ（Care Cart）

特徴・機能

価格設定

ProveSource: Sales Pop Ups

特徴・機能

価格設定

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

特徴・機能

価格設定

EA • アップセル ポップアップとクロスセル（EasyApps）

特徴・機能

Toastibar Sales Popup & Timers

特徴・機能

価格設定

POWR Pop‑Ups & Discount Popup（POWR.io）

特徴・機能

価格設定

Algoshop AI 通知バー（algoshop.ai）

特徴・機能

価格設定

Adoric Popup & Email Popups（Adoric）

特徴・機能

価格設定

価格比較

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

使いやすさ

コーディングでウェルカムポップアップクーポンを実装する方法

実装の全体像

1) スニペットを作成（ポップアップ本体）

2) CSSを追加（見た目）

3) JSを追加（表示タイミングと再表示制御）

4) theme.liquid で読み込む

終わりに

参考記事

最新の記事

目次

関連タグ

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

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

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

Shopify に画像ギャラリーを表示できるアプリ10選

Shopifyストアで追従ボタンを実現できるアプリ10選

Shopifyで追従する今すぐ購入ボタンを実現できるアプリ10選

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

EA • アップセルポップアップとクロスセル（EasyApps）