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

はじめに
この記事の構成
Shopify でメルマガ登録ポップアップを表示できる？
メルマガ登録ポップアップを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルメルマガ登録ポップアップ」
- アプリの基本情報
- このアプリでできること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加する
- 手動でテーマに追加する
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

「ストアに訪問してくれたお客様と、その後もつながりたい」。EC を運営していれば、誰もが一度は考えることではないでしょうか。

広告費をかけてお客様を集客しても、何も買わずに離脱されてしまえばそこで関係は途切れてしまいます。しかし、メルマガ登録を促すポップアップがあれば、購入に至らなかったお客様ともメールを通じてつながり続けることができます。

メルマガ登録ポップアップは、EC サイトにおけるリピーター獲得の第一歩として非常に有効な施策です。この記事では、Shopify ストアにメルマガ登録ポップアップを設置する方法を、アプリを使った簡単な方法からコード実装まで詳しく解説します。

関連記事も合わせてご覧ください。

この記事の構成

この記事は以下の流れで構成しています。

基礎知識: Shopify でメルマガ登録ポップアップは実現可能か、メリット・デメリット
アプリ vs コード: テーマ編集とアプリ導入、どちらが適しているか比較
おすすめアプリの紹介: 「シンプルメルマガ登録ポップアップ」でできること
導入手順: インストールからテーマへの追加まで画像付きで解説
設定ガイド: 全設定項目の詳細と、すぐ使えるおすすめ設定例
関連施策: メルマガ配信ツールや SNS との組み合わせ
コード実装: テーマの Liquid を直接編集する方法（HTML/CSS/JavaScript）
運用のコツ・FAQ: 効果を最大化するための実践的なアドバイス

初めてメルマガポップアップを導入する方でも、この記事だけで設定から運用まで理解できる内容になっています。

Shopify でメルマガ登録ポップアップを表示できる？

結論から言うと、Shopify でメルマガ登録ポップアップを表示することは可能です。

Shopify の標準機能だけではポップアップを直接表示する仕組みは用意されていません。フッターなどにメルマガ登録フォームが設置されているテーマは多いですが、ポップアップとして表示する機能は標準では含まれていないのが一般的です。

メルマガ登録ポップアップを実現するには、主に 2 つの方法があります。

Shopify アプリを導入する: コーディング不要で、設定画面からポップアップを簡単にカスタマイズできる
テーマの Liquid コードを直接編集する: HTML/CSS/JavaScript を記述して、自分で一からポップアップを実装する

どちらの方法にもメリット・デメリットがありますが、多くの場合はアプリを利用するのが手軽でおすすめです。コード編集は自由度が高い反面、メンテナンスの手間やバグのリスクが伴います。

メルマガ登録ポップアップを表示するメリット・デメリット

メルマガ登録ポップアップの導入を検討する前に、メリットとデメリットを正しく理解しておきましょう。

メリット

メルマガ登録率が大幅に向上する

ポップアップはページのコンテンツの上に表示されるため、フッターに置いた登録フォームよりも圧倒的に目に入ります。お客様が自発的にスクロールしなくても登録フォームが視界に入るため、登録率は大きく向上します。

購入に至らなかったお客様と関係を維持できる

EC サイトの訪問者のうち、実際に購入するのはごく一部です。ポップアップでメルマガ登録を促しておけば、購入しなかったお客様にも後からメールでアプローチできます。新商品のお知らせやセール情報を送ることで、再訪問・購入につなげるチャンスが生まれます。

セグメント配信の母数を増やせる

メルマガの登録者数が増えれば、お客様の興味関心に合わせたセグメント配信がしやすくなります。メルマガの効果を最大化するうえで、まずは登録者数を増やすことが重要です。

デメリット

表示タイミングを誤るとユーザー体験を損なう

ページを開いた瞬間にポップアップが表示されると、お客様は「まだ何も見ていないのに邪魔された」と感じます。表示タイミングや再表示の間隔を適切に設定しないと、離脱率を上げてしまうリスクがあります。

しつこい表示はブランドイメージに悪影響を与える

閉じたのにすぐ同じポップアップが出てくると、お客様はストレスを感じます。一度閉じたら一定期間は表示しない、すでに登録済みのお客様には表示しないといった配慮が必要です。

モバイル環境での表示に注意が必要

スマートフォンでは画面サイズが限られるため、ポップアップの表示がコンテンツを完全に覆い隠してしまうことがあります。Google もモバイルでの煩わしいインタースティシャルに対してペナルティを科す場合があるため、モバイルフレンドリーな設計が大切です。

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

メルマガ登録ポップアップを実装する 2 つの方法を比較してみましょう。

比較項目	テーマのコード編集	アプリ導入
導入の手軽さ	HTML/CSS/JavaScript の知識が必要	インストールしてテーマに追加するだけ
カスタマイズ性	無制限（コードを書ける範囲で何でも可能）	アプリの設定項目の範囲内
メンテナンス	テーマ更新時に上書きされるリスクあり	アプリが自動で管理
再表示制御	localStorage 等で自前実装が必要	管理画面から日数を設定するだけ
登録済み顧客の判定	Liquid と JavaScript で自前実装	アプリが自動で判定（表示しない）
コスト	無料（開発工数は発生）	月額料金が発生

結論として、コーディングに自信がない方やメンテナンスの手間を省きたい方にはアプリ導入がおすすめです。コード編集は柔軟性が高い反面、テーマのアップデート時にコードが消えてしまうリスクや、ブラウザごとの動作検証が必要になるなど、継続的な運用コストがかかります。

一方、コードの完全なコントロールが必要な場合や、独自の高度な要件がある場合はテーマ編集が適しています。この記事の後半で実際のサンプルコードも紹介しますので、自分に合った方法を選んでください。

項目	内容
アプリ名	シンプルメルマガ登録ポップアップ
料金プラン	Basic Plan: 月額 $5.99
無料体験	7 日間
対応言語	日本語、英語ほか多言語対応

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

それでは、実際にアプリをインストールしていきましょう。

シンプルメルマガ登録ポップアップ

アプリの料金は、Basic Plan 月額 $5.99 で、1 週間の無料期間があります。

ストア管理画面左下の「設定」をクリックします。

設定をクリック

「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。

アプリと販売チャネルからApp Storeへ移動

検索窓に「シンプルメルマガ登録ポップアップ」と入力し、表示されたアプリをクリックします。

アプリを検索する

アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。

アプリをインストールする

権限の確認画面が表示されたら、内容を確認してインストールを完了してください。

インストール権限を確認する

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

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

アプリをインストールしたら、次はテーマに追加してストア上で使える状態にしていきましょう。

自動でテーマに追加する

アプリの管理画面を開き、「テーマに追加」ボタンをクリックします。

テーマに追加をクリックする

テーマエディタが開いたら、「シンプルメルマガ登録ポップアップ」を有効にしてください。

テーマエディタでアプリを有効にする

最後に「保存する」をクリックすれば、有効化は完了です。

保存するをクリックする

これで、ストアにメルマガ登録ポップアップが表示されるようになります。

手動でテーマに追加する

自動追加がうまくいかない場合は、テーマエディタから手動で有効化することもできます。

Shopify 管理画面から「オンラインストア」→「テーマ」へ進み、利用中テーマの「カスタマイズ」をクリックします。

テーマをカスタマイズする

テーマエディタで「アプリ埋め込み」を開き、「シンプルメルマガ登録ポップアップ」を探してトグルをオンにします。

アプリ埋め込みを有効にする

「保存する」をクリックすると、設定がテーマに反映されます。

テーマ設定を保存する

以上で、テーマへの追加は完了です。

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

「シンプルメルマガ登録ポップアップ」には、豊富なカスタマイズ項目が用意されています。各設定項目を詳しく見ていきましょう。

表示設定

ポップアップの表示タイミングに関する設定です。

設定項目	説明	設定範囲	デフォルト値
表示までの遅延（秒）	ページ読み込みから何秒後にポップアップを表示するか	0〜60 秒	5 秒
再表示までの日数	一度閉じた後、何日後に再表示するか（0 で毎回表示）	0〜30 日	7 日

ポイント: 表示タイミングは 3〜5 秒がおすすめです。0 秒にするとページを開いた瞬間に表示されてしまうため、お客様が驚いてしまいます。逆に長すぎると、お客様がすでにページを離れてしまっている可能性があります。

再表示間隔は 7〜14 日が一般的です。0 日にすると訪問のたびに表示されるため、しつこい印象を与える可能性があります。

コンテンツ設定

ポップアップに表示する文言を自由に設定できます。

設定項目	説明	デフォルト値
タイトル	ポップアップの見出し	Join Our Newsletter
説明文	タイトルの下に表示する補足テキスト	Subscribe to get special offers...
プレースホルダー	メールアドレス入力欄のヒントテキスト	Enter your email
ボタンの文字	登録ボタンに表示するテキスト	Subscribe
成功メッセージ	登録完了後に表示するメッセージ	Thank you for subscribing!
プライバシーテキスト	フォーム下部に表示するプライバシーに関する文言	By subscribing, you agree to our Privacy Policy.
画像を表示	ポップアップに画像を追加するかどうか	オフ
ポップアップ画像	表示する画像の選択	なし

ポイント: テキストはすべて日本語に変更するのがおすすめです。後述の「おすすめ設定例」で、そのまま使える日本語テンプレートを紹介しています。

レイアウト設定

ポップアップの見た目に関する設定です。

設定項目	説明	設定範囲	デフォルト値
ポップアップの幅	ポップアップの横幅	300〜600 px	480 px
内側の余白	ポップアップ内のパディング	16〜48 px	32 px
テキスト配置	テキストの揃え方（左揃え/中央揃え/右揃え）	選択式	中央揃え

色設定

ポップアップの各パーツの色を細かく設定できます。

設定項目	説明	デフォルト値
背景色	ポップアップの背景色	#ffffff（白）
オーバーレイの色	背景のオーバーレイの色	#000000（黒）
タイトルの色	タイトル文字の色	#333333
文字の色	説明文やプライバシーテキストの色	#666666
ボタンの背景色	登録ボタンの背景色	#000000（黒）
ボタンの文字色	登録ボタンの文字色	#ffffff（白）
入力欄の枠線の色	メールアドレス入力欄の枠線の色	#dddddd

ポイント: ストアのブランドカラーに合わせて設定しましょう。ボタンの色はクリックしたくなるようなアクセントカラーにすると効果的です。

その他の設定

設定項目	説明	デフォルト値
領域外クリックで閉じる	ポップアップの外側をクリックしたときに閉じるかどうか	オフ
追加の CSS	独自の CSS を追加してスタイルを上書きする	なし

ポイント: 「領域外クリックで閉じる」をオンにすると、お客様がオーバーレイ部分をクリックしたときにポップアップが閉じます。閉じるボタンが小さくて気づきにくい場合に有効です。

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

ここでは、すぐにそのまま使えるおすすめの設定パターンを紹介します。目的に応じて選んでください。

パターン 1: シンプルなメルマガ登録

もっとも基本的な設定パターンです。シンプルで押しつけがましくないデザインです。

設定項目	値
表示までの遅延	5 秒
再表示までの日数	7 日
タイトル	メルマガ登録
説明文	新商品やセールの情報をいち早くお届けします。
プレースホルダー	メールアドレスを入力
ボタンの文字	登録する
成功メッセージ	登録ありがとうございます！
プライバシーテキスト	ご登録いただいた情報は、プライバシーポリシーに基づき管理いたします。
テキスト配置	中央揃え

パターン 2: 初回限定クーポンの訴求

クーポンをフックにして登録率を高めるパターンです。

設定項目	値
表示までの遅延	3 秒
再表示までの日数	14 日
タイトル	初回限定 10%OFF クーポン
説明文	メルマガにご登録いただくと、初回のお買い物で使える 10%OFF クーポンをプレゼント！
プレースホルダー	メールアドレスを入力
ボタンの文字	クーポンを受け取る
成功メッセージ	ご登録ありがとうございます！クーポンコードをメールでお送りしました。
プライバシーテキスト	ご登録いただいた情報は、プライバシーポリシーに基づき管理いたします。
テキスト配置	中央揃え

運用のヒント: クーポンコードは Shopify の「ディスカウント」機能で事前に作成しておき、メルマガの自動返信メールに記載する運用が一般的です。

パターン 3: 季節イベント訴求

年末セールやバレンタインなど、季節イベントに合わせたポップアップです。

設定項目	値
表示までの遅延	5 秒
再表示までの日数	3 日
タイトル	夏のセール情報をお届け！
説明文	メルマガ登録で、最大 50%OFF のサマーセール情報を先行配信！
プレースホルダー	メールアドレスを入力
ボタンの文字	登録して先行情報を受け取る
成功メッセージ	ご登録ありがとうございます！セール開始時にメールでお知らせします。
プライバシーテキスト	ご登録いただいた情報は、プライバシーポリシーに基づき管理いたします。
テキスト配置	中央揃え
画像を表示	オン（季節感のある画像を設定）

文言テンプレート集

状況に応じて使える文言テンプレートを用意しました。タイトルと説明文の組み合わせでそのまま使えます。

新商品お知らせ型

タイトル: 新着情報をお届け
説明文: 新商品の入荷情報やスタッフおすすめのアイテムをいち早くメールでご案内します。

会員限定型

タイトル: メンバー限定の特典をご用意
説明文: メルマガ会員だけの特別セールや先行販売情報をお届けします。

ストーリー共有型

タイトル: ブランドの裏側をお届け
説明文: 商品のこだわりや制作秘話など、ここでしか読めないストーリーをメールでお届けします。

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

アプリを使わずにテーマの Liquid コードを編集して実装したい方向けに、サンプルコードを紹介します。

以下のコードを Shopify テーマの theme.liquid の </body> タグの直前に追加するか、スニペットとして作成してください。

HTML（Liquid テンプレート）

<!-- メルマガ登録ポップアップ -->
<div id="newsletter-popup" class="newsletter-popup" style="display: none;">
  <div class="newsletter-popup__overlay"></div>
  <div class="newsletter-popup__container">
    <button type="button" class="newsletter-popup__close" aria-label="閉じる">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
    <div class="newsletter-popup__content">
      <h2 class="newsletter-popup__title">メルマガ登録</h2>
      <p class="newsletter-popup__description">新商品やセールの情報をいち早くお届けします。</p>
      {% form 'customer', id: 'newsletter-popup-form' %}
        <input type="hidden" name="contact[tags]" value="newsletter,popup">
        <div class="newsletter-popup__form-group">
          <input
            type="email"
            name="contact[email]"
            class="newsletter-popup__input"
            placeholder="メールアドレスを入力"
            required
            autocomplete="email"
          >
          <button type="submit" class="newsletter-popup__button">登録する</button>
        </div>
        {% if form.posted_successfully? %}
          <p class="newsletter-popup__message newsletter-popup__message--success">
            登録ありがとうございます！
          </p>
        {% endif %}
        {% if form.errors %}
          <p class="newsletter-popup__message newsletter-popup__message--error">
            {{ form.errors | default_errors }}
          </p>
        {% endif %}
      {% endform %}
      <p class="newsletter-popup__privacy">ご登録いただいた情報はプライバシーポリシーに基づき管理いたします。</p>
    </div>
  </div>
</div>

CSS

<style>
  .newsletter-popup,
  .newsletter-popup * { box-sizing: border-box; margin: 0; padding: 0; }

  .newsletter-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .newsletter-popup__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); cursor: pointer;
  }

  .newsletter-popup__container {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 480px; width: calc(100% - 32px);
    max-height: calc(100vh - 32px); overflow-y: auto;
    animation: popupFadeIn 0.3s ease-out;
  }

  @keyframes popupFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  .newsletter-popup__close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border: none;
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #333; opacity: 0.6; transition: opacity 0.2s;
  }
  .newsletter-popup__close:hover { opacity: 1; }

  .newsletter-popup__content { padding: 32px; text-align: center; }

  .newsletter-popup__title {
    font-size: 24px; font-weight: 700; color: #333; margin-bottom: 12px;
  }

  .newsletter-popup__description {
    font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.6;
  }

  .newsletter-popup__form-group {
    display: flex; flex-direction: column; gap: 8px;
  }

  .newsletter-popup__input {
    padding: 12px 16px; font-size: 14px;
    border: 1px solid #ddd; border-radius: 6px;
    outline: none; transition: border-color 0.2s;
  }
  .newsletter-popup__input:focus { border-color: #000; }

  .newsletter-popup__button {
    padding: 12px 24px; font-size: 14px; font-weight: 600;
    background-color: #000; color: #fff;
    border: none; border-radius: 6px;
    cursor: pointer; transition: opacity 0.2s;
  }
  .newsletter-popup__button:hover { opacity: 0.9; }

  .newsletter-popup__message {
    margin-top: 12px; padding: 12px; border-radius: 6px; font-size: 14px;
  }
  .newsletter-popup__message--success { background-color: #d4edda; color: #155724; }
  .newsletter-popup__message--error   { background-color: #f8d7da; color: #721c24; }

  .newsletter-popup__privacy {
    margin-top: 12px; font-size: 12px; color: #666; opacity: 0.7;
  }

  @media screen and (max-width: 600px) {
    .newsletter-popup__container { max-width: calc(100% - 24px); }
    .newsletter-popup__content { padding: 24px; }
    .newsletter-popup__title { font-size: 20px; }
  }
</style>

JavaScript

<script>
(function() {
  'use strict';

  var STORAGE_KEY = 'newsletter_popup_state';
  var DELAY_SECONDS = 5; // 表示までの遅延（秒）
  var INTERVAL_DAYS = 7; // 再表示までの日数

  var popup = document.getElementById('newsletter-popup');
  if (!popup) return;

  var overlay = popup.querySelector('.newsletter-popup__overlay');
  var closeBtn = popup.querySelector('.newsletter-popup__close');
  var form = popup.querySelector('form');
  var emailInput = popup.querySelector('input[type="email"]');

  // 登録済み判定
  {% if customer and customer.accepts_marketing %}
    return; // 既に購読済みの顧客には表示しない
  {% endif %}

  // 成功メッセージがある場合（フォーム送信後のリロード）
  var successMsg = popup.querySelector('.newsletter-popup__message--success');
  if (successMsg) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({ subscribed: true }));
    } catch (e) {}
    popup.style.display = 'block';
    setTimeout(function() { popup.style.display = 'none'; }, 3000);
    return;
  }

  // ポップアップを表示すべきか判定
  function shouldShow() {
    try {
      var stored = localStorage.getItem(STORAGE_KEY);
      if (!stored) return true;

      var data = JSON.parse(stored);
      if (data.subscribed) return false;

      if (INTERVAL_DAYS === 0) return true;

      if (data.lastClosed) {
        var daysDiff = Math.floor((new Date() - new Date(data.lastClosed)) / 86400000);
        if (daysDiff < INTERVAL_DAYS) return false;
      }
      return true;
    } catch (e) {
      return true;
    }
  }

  // ポップアップを閉じる
  function closePopup() {
    popup.style.display = 'none';
    document.body.style.overflow = '';
    try {
      var stored = localStorage.getItem(STORAGE_KEY);
      var data = stored ? JSON.parse(stored) : {};
      data.lastClosed = new Date().toISOString();
      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
    } catch (e) {}
  }

  // ポップアップを表示
  function showPopup() {
    if (!shouldShow()) return;
    popup.style.display = 'block';
    document.body.style.overflow = 'hidden';
    if (emailInput) emailInput.focus();
  }

  // イベントリスナー
  closeBtn.addEventListener('click', closePopup);
  overlay.addEventListener('click', closePopup);

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && popup.style.display === 'block') {
      closePopup();
    }
  });

  // 指定秒数後に表示
  setTimeout(showPopup, DELAY_SECONDS * 1000);
})();
</script>

コード実装の注意点

テーマ更新時の上書きリスク: テーマをアップデートするとカスタマイズしたコードが消える場合があります。コードのバックアップを必ず取っておきましょう。
Shopify の Customer フォームを使用: 上記のコードでは Shopify 標準の {% form 'customer' %} を使用しているため、登録された顧客は自動的に Shopify の顧客リストに追加されます。
localStorage の制限: プライベートブラウジングモードでは localStorage が使えない場合があります。try-catch でエラーを吸収しています。
他のアプリとの競合: 他のポップアップアプリやスクリプトが同時に動作すると、z-index の競合が起きる場合があります。
Shopify のフォーム送信: Customer フォームの送信はページリロードを伴います。Ajax で送信したい場合は Shopify の Customer API を利用する必要がありますが、実装の複雑さが大幅に増します。

上記のような注意点を踏まえると、コード編集に不慣れな方やメンテナンスの手間を減らしたい方は、やはりアプリの利用がおすすめです。