1. ホーム
  2. 私たちについて
  3. Shopify app
  4. Shopifyブログ
  5. サービス
  6. お問い合わせ
About
Blog
Services
Contact
サムネイル

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

目次

はじめに

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

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

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

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

この記事の構成

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

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

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

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

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

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

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

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

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

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

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

メリット

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

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

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

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

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

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

デメリット

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

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

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

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

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

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

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

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

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

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

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

おすすめ Shopify アプリ「シンプルメルマガ登録ポップアップ」

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

ここからは、Shopify アプリ「シンプルメルマガ登録ポップアップ」を紹介します。

アプリストアページはこちら

アプリの基本情報

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

このアプリでできること

シンプルメルマガ登録ポップアップは、その名の通りメルマガ登録用のポップアップをストアに簡単に設置できるアプリです。コーディングは一切不要で、テーマエディタから直感的にカスタマイズできます。

主な特徴は以下の通りです。

1. メルマガ登録ポップアップをワンクリックで設置

アプリをインストールしてテーマに追加するだけで、ストアにメルマガ登録ポップアップが表示されます。難しい設定は一切ありません。

2. 表示タイミングと再表示間隔を細かく制御

「ページを開いてから何秒後に表示するか」「一度閉じた後、何日後に再表示するか」をスライダーで自由に設定できます。お客様の体験を損なわない、適切なタイミングでの表示を実現します。

表示タイミング設定

3. テキスト・色・画像を自由にカスタマイズ

タイトル、説明文、ボタンの文字、成功メッセージ、プライバシーテキストなど、表示されるすべてのテキストを自由に変更可能です。背景色、ボタンの色、文字の色も細かく設定でき、ストアのブランドに合わせたデザインを実現できます。また、画像を追加して視覚的に訴求力のあるポップアップを作ることもできます。

カスタマイズ画面

4. レスポンシブ対応

PC でもスマートフォンでも、画面サイズに応じて最適な表示になります。モバイルでも操作しやすいデザインです。

ポップアップ表示イメージ

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

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

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

アプリの料金は、Basic Plan 月額 $3.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 px480 px
内側の余白ポップアップ内のパディング16〜48 px32 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 のサマーセール情報を先行配信！
プレースホルダーメールアドレスを入力
ボタンの文字登録して先行情報を受け取る
成功メッセージご登録ありがとうございます！セール開始時にメールでお知らせします。
プライバシーテキストご登録いただいた情報は、プライバシーポリシーに基づき管理いたします。
テキスト配置中央揃え
画像を表示オン（季節感のある画像を設定）

文言テンプレート集

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

新商品お知らせ型

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

会員限定型

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

ストーリー共有型

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

関連施策との組み合わせ

メルマガ登録ポップアップは、単体で使うだけでなく、他の施策と組み合わせることで効果が大きく向上します。

メルマガ配信ツールとの連携

ポップアップで集めたメールアドレスを活用するには、メルマガ配信ツールとの連携が欠かせません。

Shopify メール（Shopify Email）

Shopify に標準搭載されているメール配信機能です。毎月 10,000 通まで無料で送信でき、顧客セグメントとの連携も簡単です。ポップアップで登録された顧客は Shopify の顧客リストに自動で追加されるため、追加の設定なしですぐにメルマガ配信を始められます。

Klaviyo

より高度なメールマーケティングを行いたい場合は Klaviyo がおすすめです。登録直後の自動ウェルカムメール、カゴ落ちメール、購入後のフォローアップメールなど、細かな自動化フローを構築できます。

Omnisend

メールだけでなく SMS 配信もカバーするオールインワンツールです。メルマガ登録をきっかけに、メールと SMS を組み合わせたマルチチャネルのアプローチが可能です。

SNS 連携

メルマガ登録を SNS からも促進しましょう。

  • Instagram のプロフィールリンク: ストアの URL をリンクに設定し、ポップアップ経由でメルマガ登録に導線をつなげる
  • LINE 公式アカウント: 日本のユーザーには LINE もメール同様に有効なチャネル。メルマガとLINEの両方で登録を促すとリーチが広がる
  • X（旧 Twitter）: フォロワーに向けて「メルマガ限定情報」を案内し、ストアへの流入 → ポップアップ → 登録の流れを作る

クーポン施策との組み合わせ

メルマガ登録ポップアップとクーポンの組み合わせは、EC における定番施策です。

実装の流れ

  1. Shopify 管理画面の「ディスカウント」でクーポンコードを作成（例: WELCOME10）
  2. ポップアップの説明文に「登録で 10%OFF クーポンプレゼント」と記載
  3. メルマガ配信ツール（Shopify Email や Klaviyo）のウェルカムメールにクーポンコードを記載して自動送信

この流れなら、メルマガ登録のインセンティブが明確になり、登録率の向上が期待できます。

リターゲティング広告との連動

メルマガ登録者のリストは、Facebook 広告や Google 広告のカスタムオーディエンスとしても活用できます。メルマガ読者に近い属性のユーザーに類似オーディエンス配信をすれば、見込み度の高い新規顧客にリーチできます。

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

アプリを使わずにテーマの 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 を利用する必要がありますが、実装の複雑さが大幅に増します。

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

運用のコツ

メルマガ登録ポップアップの効果を最大化するための運用のコツを紹介します。

表示タイミングを A/B テストする

表示までの遅延秒数を変えて、どのタイミングがもっとも登録率が高いかテストしましょう。一般的には 3〜5 秒が効果的ですが、ストアの特性によって最適値は異なります。

文言を定期的に見直す

同じ文言を長期間使い続けると、リピーターのお客様にとっては見慣れたものになります。季節やキャンペーンに合わせて定期的に文言を更新しましょう。

登録率を計測する

Shopify の顧客管理画面で「newsletter」「popup」タグが付いた顧客数を確認すれば、ポップアップ経由での登録数を把握できます。週次や月次で推移を追い、施策の効果を検証しましょう。

モバイルでの表示を確認する

PC で設定した後、必ずスマートフォンでも表示を確認してください。文字が小さすぎたり、入力欄が操作しにくくなっていないかチェックしましょう。

プライバシーポリシーを明記する

GDPR や個人情報保護法の観点から、メールアドレスの収集にはプライバシーポリシーへの同意が求められるケースが増えています。ポップアップ内にプライバシーテキストを必ず記載しましょう。

よくある質問

Q. ポップアップが表示されません

A. 以下の点を確認してください。

  • テーマエディタでアプリブロックが有効化（トグルがオン）されているか
  • ログイン中のアカウントがすでにメルマガ登録済みの顧客になっていないか（登録済み顧客にはポップアップが表示されません）
  • ブラウザの localStorage に前回の閉じた情報が残っていないか（シークレットモードで確認）
  • 表示までの遅延秒数が長すぎないか

Q. 登録されたメールアドレスはどこに保存されますか？

A. Shopify の顧客リストに保存されます。アプリでは Shopify 標準の Customer フォームを使用しているため、登録された顧客は Shopify 管理画面の「顧客管理」に自動的に追加されます。「newsletter」「popup」タグが付与されるため、フィルタリングも簡単です。

Q. 特定のページだけにポップアップを表示できますか？

A. アプリブロックはすべてのページに表示される仕組みです。特定のページのみに限定したい場合は、テーマエディタのページごとの設定や、コード編集での条件分岐が必要になります。

Q. 無料体験期間中にキャンセルした場合、料金は発生しますか？

A. 7 日間の無料体験期間中にアンインストールすれば、料金は一切発生しません。まずは気軽にお試しください。

Q. 他のポップアップアプリと併用できますか？

A. 技術的には併用可能ですが、複数のポップアップが同時に表示されるとお客様の体験を損なう可能性があります。メルマガ登録ポップアップを使用する場合は、他のポップアップアプリとの表示タイミングを調整することをおすすめします。

Q. ポップアップのデザインをもっと自由にカスタマイズしたい場合は？

A. 「追加の CSS」設定を使えば、独自の CSS を追記してスタイルを上書きできます。ブラウザの開発者ツール（検証機能）でカスタマイズしたい要素のクラス名を確認し、CSS を記述してください。

まとめ

この記事では、Shopify ストアにメルマガ登録ポップアップを設置する方法を解説しました。

メルマガ登録ポップアップは、購入に至らなかったお客様とのつながりを維持し、リピーター獲得につなげるための有効な施策です。ただし、表示タイミングや頻度を誤るとかえって逆効果になるため、適切な設定が重要です。

「シンプルメルマガ登録ポップアップ」を使えば、コーディング不要で表示タイミング・再表示間隔・デザインを自由にカスタマイズでき、登録済み顧客の自動判定も標準装備されています。

シンプルメルマガ登録ポップアップをインストールする

7 日間の無料体験があるので、まずは気軽にお試しください。

参考記事

ブログTOPお問い合わせ

おすすめ Shopify アプリ

シンプル追従営業日カレンダー｜お手軽追従休業日設定のアイコン

シンプル追従営業日カレンダー｜お手軽追従休業日設定

詳しい使い方インストール

営業日カレンダーをストアに常に追従表示。定休日や臨時休業がお客様にひと目で伝わり、安心してお買い物いただけます。

シンプル店舗受け取り｜お手軽ローカルピックアップのアイコン

シンプル店舗受け取り｜お手軽ローカルピックアップ

詳しい使い方インストール

お客様がカートページで受け取り店舗・日時を指定できます。テイクアウトや店舗受け取りにおすすめです。

シンプル注文履歴おすすめ商品｜お手軽マイページアップセルのアイコン

シンプル注文履歴おすすめ商品｜お手軽マイページアップセル

詳しい使い方インストール

マイページの注文ページに、商品ごとに設定したおすすめ商品を表示。再購入を後押しします。

シンプル顧客メタフィールドCSVインポート・エクスポートのアイコン

シンプル顧客メタフィールドCSVインポート・エクスポート

詳しい使い方インストール

顧客メタフィールドをCSVで一括管理。エクスポート・編集・インポートがかんたんに。

シンプルフォーム一体型LP｜お手軽チャットボット購入のアイコン

シンプルフォーム一体型LP｜お手軽チャットボット購入

詳しい使い方インストール

チャットボット形式でお客様が迷わず注文できるLPを設置できます。コーディング不要で、テーマエディタから簡単に設定できます。

シンプル商品メタフィールドCSVインポート・エクスポートのアイコン

シンプル商品メタフィールドCSVインポート・エクスポート

詳しい使い方インストール

商品やバリエーションのメタフィールドをCSVで一括管理。インポートもエクスポートもこのアプリひとつで完了。

シンプル新しいお客様アカウント拡張｜生年月日・追加フォームのアイコン

シンプル新しいお客様アカウント拡張｜生年月日・追加フォーム

詳しい使い方インストール

誕生日や性別などの項目を、お客様アカウントのプロフィールページに追加できます。コーディング不要です。

シンプル2点目購入割引｜2点目以降自動セール設定のアイコン

シンプル2点目購入割引｜2点目以降自動セール設定

詳しい使い方インストール

2点目以降の購入で自動割引。割引バッジと対象商品の表示で、まとめ買いを後押しします。

全153個の日本製 Shopify アプリを見る

関連記事

画像

【2026年】Shopify でメール登録率を高めるおすすめメルマガポップアップアプリ 21 選を紹介！

Shopifyストアのメルマガ登録率を高めるポップアップアプリ21個を徹底比較。導入メリット・選び方・料金プランまで詳しく解説します。

画像

【2026年】Shopifyの離脱防止カウントダウンポップを表示できるアプリ13選を紹介！

Shopifyの離脱防止カウントダウンポップアップでカゴ落ちを減らす方法を解説。メリット・デメリット、導入手順、アプリの選び方に加え、厳選13アプリを比較して最適な1本を見つけられます。

画像

Shopify でメルマガ登録フォームを表示する方法は？おすすめのアプリも紹介！

Shopify メルマガ登録フォームの表示方法を初心者向けに解説。メリット・デメリット、コード編集とアプリ導入の違い、おすすめアプリの導入手順・使い方、設置場所のコツ、サンプルコードまで紹介。

画像

【2026】Shopifyのウェルカムポップアップクーポンアプリ12選を徹底解説！

Shopifyのウェルカムポップアップクーポンとは何か、導入メリット・デメリット、設定方法、アプリの選び方を解説。おすすめ12アプリを比較し、最初に入れるべき1本も紹介します。

画像

【2026年】Shopifyにウェルカムポップアップクーポン表示する方法は？おすすめアプリも紹介！

Shopifyでウェルカムポップアップクーポンを表示する方法を解説。メリット・デメリット、コード編集とアプリ導入の選び方、おすすめアプリの使い方、サンプルコードまで初回購入率アップ目線でまとめます。

画像

Shopify のポップアップを特定画面に表示できるアプリ20選を紹介！

Shopifyでポップアップをページごと・特定画面に出し分ける方法とアプリ20選を解説。メリット/デメリットや選び方、料金比較まで網羅し、最適な一つを選べます。

Menu
Social