2026/01/17

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

@ 信条刃

Shopify

今回の記事は Shopify App Store で提供されている、「ページごとにポップアップを出し分けできる」アプリについての記事です。

ポップアップとは

ポップアップは、訪問者の画面上に重なって表示される告知ウィンドウのことです。クーポン配布、セール告知、メール登録、購入後のアップセルなど、狙ったタイミングで“ひと押し”できるのが強みです。

「ページごとに表示を分ける」ことが重要で、たとえば同じ10%OFFでも、

トップページ：はじめての方限定クーポン
商品ページ：いま見ている商品に合わせた訴求（送料無料・セット割）
カート：離脱防止（本日終了、特典追加）

のように文脈に合わせるだけで反応が変わります。

ポップアップを導入する利点

ポップアップは雑に出すと嫌われますが、ページごとに出し分けると“邪魔”が“案内”になります。主なメリットは以下です。

コンバージョンの底上げ
購入直前のページ（商品・カート）で、背中を押す訴求ができます。
クーポンのムダ打ち削減
どのページで、誰に出すかを絞ることで「割引しすぎ」を防げます。
回遊と滞在の改善
コレクションやブログで「関連商品」「人気ランキング」などを見せやすいです。
メール・SMSなどのリスト獲得
ブログやトップで登録導線を作ると、広告以外の資産が増えます。
A/Bテストが回しやすい
ページ単位で訴求を変えると、改善点がはっきりします。

ポップアップアプリの選び方

「ページごとに表示」目的で選ぶなら、次の観点をチェックするのがコツです。

特定ページ（トップ/商品/コレクション/カート/ブログ/任意URL）で出し分けできるか
モバイル・デスクトップで表示内容を変えられるか
再表示タイミング（何日後、何回目訪問など）を調整できるか
スケジュール（開始/終了）やカウントダウンが使えるか
CSS で見た目を整えられるか（ブランドとズレないか）
無料プランの制限（表示回数・ポップアップ数・訪問者数）で詰まらないか
日本語対応（管理画面・サポート）が必要か

「まずは1つのポップアップを特定ページに出したい」のか、「複数キャンペーンをページ別に回したい」のかで、最適解が変わります。

コーディングで「ページごとポップアップ」を実装する方法（アプリ不要）

アプリを使うのが一番早いのは事実ですが、「まずは1つだけ」「完全に自由に出し分けしたい」場合は、テーマ側で軽いポップアップを作る方法もあります。ここでは、特定URLだけに表示し、一定期間は再表示しない簡易版を紹介します。

実装手順

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

{%- comment -%}
  ページごとポップアップ（簡易版）
  - 表示対象：URLに /products/ が含まれるページ（例：商品ページ）
  - 再表示：cookieで7日間抑制
{%- endcomment -%}

{%- assign show_popup = false -%}
{%- if request.path contains '/products/' -%}
  {%- assign show_popup = true -%}
{%- endif -%}

{%- if show_popup -%}
  <div id="pagePopupOverlay" class="pp-overlay" aria-hidden="true">
    <div class="pp-modal" role="dialog" aria-modal="true" aria-labelledby="ppTitle">
      <button type="button" class="pp-close" aria-label="閉じる" data-pp-close>×</button>

      <p id="ppTitle" class="pp-title">本日限定：10%OFF クーポン</p>
      <p class="pp-text">今見ている商品に使えます。カートで自動適用ではないので、コピーして使ってください。</p>

      <div class="pp-code">
        <span class="pp-code-label">クーポンコード</span>
        <button type="button" class="pp-code-btn" data-pp-copy="WELCOME10">WELCOME10</button>
      </div>

      <a class="pp-cta" href="/collections/all">人気商品を見る</a>
      <p class="pp-note">※ 7日間は再表示されません</p>
    </div>
  </div>

  <style>
    .pp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
    .pp-modal{width:min(520px,100%);background:#fff;padding:18px 18px 16px;border-radius:12px;position:relative}
    .pp-close{position:absolute;top:10px;right:12px;border:none;background:transparent;font-size:22px;cursor:pointer}
    .pp-title{font-size:18px;font-weight:700;margin:0 0 8px}
    .pp-text{margin:0 0 12px;line-height:1.7}
    .pp-code{display:flex;gap:10px;align-items:center;margin:0 0 12px}
    .pp-code-label{font-size:12px;opacity:.7}
    .pp-code-btn{border:1px dashed #333;background:#fafafa;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:700}
    .pp-cta{display:block;text-align:center;padding:10px 12px;border-radius:10px;background:#111;color:#fff;text-decoration:none}
    .pp-note{margin:10px 0 0;font-size:12px;opacity:.7}
  </style>

  <script>
    (function () {
      var overlay = document.getElementById('pagePopupOverlay');
      if (!overlay) return;

      var COOKIE_KEY = 'pp_hidden_until';
      var HIDE_DAYS = 7;

      function getCookie(name) {
        var m = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'));
        return m ? decodeURIComponent(m[1]) : null;
      }
      function setCookie(name, value, days) {
        var d = new Date();
        d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
        document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + d.toUTCString() + '; path=/; SameSite=Lax';
      }

      var hiddenUntil = getCookie(COOKIE_KEY);
      if (hiddenUntil && Date.now() < Number(hiddenUntil)) return;

      function openPopup() {
        overlay.style.display = 'flex';
        overlay.setAttribute('aria-hidden', 'false');
        document.documentElement.style.overflow = 'hidden';
      }
      function closePopup() {
        overlay.style.display = 'none';
        overlay.setAttribute('aria-hidden', 'true');
        document.documentElement.style.overflow = '';
        setCookie(COOKIE_KEY, String(Date.now() + HIDE_DAYS * 24 * 60 * 60 * 1000), HIDE_DAYS);
      }

      overlay.addEventListener('click', function (e) {
        if (e.target === overlay) closePopup();
      });
      overlay.querySelectorAll('[data-pp-close]').forEach(function (btn) {
        btn.addEventListener('click', closePopup);
      });

      overlay.querySelectorAll('[data-pp-copy]').forEach(function (btn) {
        btn.addEventListener('click', function () {
          var code = btn.getAttribute('data-pp-copy');
          navigator.clipboard?.writeText(code);
          btn.textContent = 'コピーしました';
          setTimeout(function(){ btn.textContent = code; }, 1200);
        });
      });

      // 例：3秒後に表示（必要なら調整）
      setTimeout(openPopup, 3000);
    })();
  </script>
{%- endif -%}

2) theme.liquid に読み込みを追加する

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

{% render 'page-popup' %}

3) 表示ページを増やす（条件分岐を追加）

「コレクションページだけ」「ブログ記事だけ」など増やしたい場合は、スニペット上部の条件を増やします。

{%- assign show_popup = false -%}

{%- if request.path == '/' -%}
  {%- assign show_popup = true -%} {# トップだけ #}
{%- endif -%}

{%- if request.path contains '/collections/' -%}
  {%- assign show_popup = true -%} {# コレクション #}
{%- endif -%}

{%- if request.path contains '/blogs/' -%}
  {%- assign show_popup = true -%} {# ブログ #}
{%- endif -%}

この「URLで出し分ける」考え方は、アプリでページターゲティングを設定するときも同じです。まずはトップ・商品・カートの3つに分けるだけでも、十分に効果検証が回ります。

価格比較（目安）

「ページごとに出し分け」目的での、ざっくり目安です。

とにかく最小コストで始めたい
Dakaas（無料）
ページ特化でシンプルに運用したい
シンプルページ毎のポップアップ：$6.99/月
多機能（バー・アップセル・収集）もまとめてやりたい
Attrac：無料〜
Pop Convert：無料〜
ポップアップを段階的に増やしたい
Popup Wizard：無料（1つ）→ $3.99/月（5つ）→ $9.90/月（無制限）

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

日本語サポートは、運用の詰まりを減らす意味でも重要です（特にポップアップは細かい調整が多いので）。

日本語対応あり
シンプルページ毎のポップアップ
Dakaas
日本語未対応（または英語中心）
Attrac
Pop Convert
Popup Wizard

使いやすさ

「ページごとのポップアップ」を最短で実現したいなら、私はまず シンプルページ毎のポップアップ｜特定画面内ポップアップ を推します。理由はシンプルで、目的に対して機能が絞られていて、迷いにくいからです。

一方で、無料で試しながら運用を作りたいなら Dakaas、メール/SMS収集まで一気にやるなら Pop Convert や Attrac、という選び方がしっくりきます。

終わりに

今回は、Shopify で「ポップアップをページごとに表示できるアプリ」を5つ紹介しました。

ポップアップ施策は、“誰に、どのページで、何を言うか”が勝負です。ページごとの出し分けを始めるだけで、同じオファーでも成果が変わります。

また、アプリを入れずにまず試したい場合は、この記事の「コーディング実装」も参考にしてみてください。

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

参考記事

@ 信条刃

Shopify

サイトTOP お問い合わせ

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

ポップアップとは

ポップアップを導入する利点

ポップアップアプリの選び方

おすすめのポップアップ Shopify アプリ（ページごとに出し分け可）

シンプルページ毎のポップアップ｜特定画面内ポップアップ

アプリの情報

特徴・機能

価格設定

Dakaas マルチ製品販売ポップ

アプリの情報

特徴・機能

価格設定

Attrac Popup, Announcement Bar

アプリの情報

特徴・機能

価格設定

Pop Convert ‑ Pop Ups, Banners

アプリの情報

特徴・機能

価格設定

Popup Wizard

アプリの情報

特徴・機能

価格設定

コーディングで「ページごとポップアップ」を実装する方法（アプリ不要）

実装手順

1) スニペットを作成する（snippets/page-popup.liquid）

2) theme.liquid に読み込みを追加する

3) 表示ページを増やす（条件分岐を追加）

価格比較（目安）

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

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

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

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

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

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

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

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