Shopify でメルマガ登録フォームを追加する方法｜追従メルマガ登録フォームで購読者を効率的に獲得

はじめに
記事の構成
Shopify でメルマガ登録フォームを表示できる？
メルマガ登録フォームを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル追従メルマガ登録フォーム」紹介
すぐ使えるおすすめ設定例
- 文言のテンプレ例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify ストアを運営していると、「メルマガ登録フォームをもっと目立つ場所に設置したい」「どのページを見ていても登録できるようにしたい」と感じることはありませんか？

メルマガ（メールマガジン）は、リピーターの獲得やセール情報の告知、新商品の紹介など、EC 運営において非常に重要なマーケティングチャネルです。しかし、フッターにだけメルマガ登録フォームを配置していても、なかなか購読者が増えないのが現実です。

この記事では、Shopify でメルマガ登録フォームを追加する方法を詳しく解説します。特に、ページをスクロールしても常に画面に表示される追従メルマガ登録フォームに注目し、購読者を効率的に獲得するための具体的な設定方法やコード実装まで紹介します。

以下の参考記事もあわせてご覧ください。

記事の構成

この記事では、以下の流れで Shopify のメルマガ登録フォーム設置について解説していきます。

Shopify でメルマガ登録フォームを表示する方法の概要
メルマガ登録フォームを設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル追従メルマガ登録フォーム」の紹介と導入手順
アプリの詳細な設定方法と活用テクニック
関連施策との組み合わせ方
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

初心者の方でもステップバイステップで進められる構成になっていますので、ぜひ最後までご覧ください。

Shopify でメルマガ登録フォームを表示できる？

結論から言うと、Shopify でメルマガ登録フォームを表示することは可能です。

Shopify にはもともとメルマガ購読（ニュースレター）の仕組みが備わっており、お客様がメールアドレスを登録すると、Shopify 管理画面の「顧客管理」にメルマガ購読者として記録されます。

メルマガ登録フォームを表示する方法は、大きく分けて 2 つあります。

1. テーマのコード編集で実装する方法

Shopify テーマの Liquid ファイルを直接編集して、メルマガ登録フォームを追加します。HTML、CSS、JavaScript の知識が必要ですが、完全にカスタマイズされたフォームを作成できます。

2. アプリを導入する方法

Shopify アプリストアから専用のアプリをインストールして、ノーコードでメルマガ登録フォームを設置します。コードの知識が不要で、直感的な操作でフォームを追加・カスタマイズできます。

どちらの方法にもメリット・デメリットがありますので、次のセクションから詳しく比較していきます。

メルマガ登録フォームを表示するメリット・デメリット

Shopify ストアにメルマガ登録フォームを設置する前に、メリットとデメリットを把握しておきましょう。

メリット

リピーター獲得の強力な手段になる

メルマガは、一度ストアを訪れたお客様と継続的に接点を持てるマーケティングチャネルです。新商品の案内やセール情報をメールで届けることで、再訪問・再購入を促進できます。SNS のアルゴリズムに左右されず、確実にお客様にリーチできる点が大きな強みです。

追従メルマガ登録フォームで購読者の獲得率が向上する

ページの下部やフッターに設置するだけでは、多くの訪問者がメルマガ登録フォームの存在に気づかないまま離脱してしまいます。追従メルマガ登録フォームを導入すれば、どのページを閲覧中でも常にフォームが目に入るため、登録のハードルが下がり購読者数の向上が期待できます。

広告費を抑えた集客ができる

メルマガは、一度購読者リストを構築すればほぼ無料で情報を届けられます。リスティング広告や SNS 広告のように配信のたびにコストがかかることがないため、長期的に見て非常にコストパフォーマンスの高いマーケティング手法です。

セグメント配信でパーソナライズが可能

Shopify のメルマガ購読者データは、Shopify Email や外部のメール配信サービス（Klaviyo など）と連携できます。購入履歴や行動データをもとにセグメントを分け、お客様ごとに最適化されたメールを配信することで、開封率やクリック率の向上につながります。

ストアのブランド力強化につながる

定期的にメルマガを配信することで、お客様にブランドの世界観やストーリーを伝え続けることができます。商品紹介だけでなく、ブランドの想いやスタッフの声を届けることで、ファンの育成やブランドロイヤルティの向上に貢献します。

デメリット

設置方法によっては表示が崩れるリスクがある

テーマのコード編集で実装する場合、テーマのアップデートや他のアプリとの競合により、表示が崩れてしまうことがあります。特に追従型のフォームは CSS の position: fixed を使うため、他の追従要素（チャットウィジェットなど）と重なる可能性があります。

過度な表示はユーザー体験を損なう

メルマガ登録フォームが画面上で目立ちすぎたり、閉じても繰り返し表示されたりすると、訪問者にストレスを与えてしまいます。特にスマートフォンでは画面が小さいため、フォームが商品閲覧の邪魔にならないよう注意が必要です。

運用の継続が必要

メルマガ登録フォームを設置しても、肝心のメルマガを定期的に配信しなければ意味がありません。コンテンツの企画・作成・配信を継続するための運用体制を整えておく必要があります。

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

Shopify でメルマガ登録フォームを設置する 2 つの方法について、それぞれのメリット・デメリットを比較します。

テーマのコード編集で実装する方法

テーマの Liquid ファイルに直接コードを書いてメルマガ登録フォームを実装する方法です。

メリット

完全に自由なデザイン・レイアウトを実現できる
月額費用がかからない
外部アプリへの依存がない
パフォーマンスへの影響を最小限に抑えられる

デメリット

HTML、CSS、JavaScript、Liquid の知識が必要
テーマアップデート時にコードが上書きされるリスクがある
不具合が発生した場合、自分で対処する必要がある
実装・テストに時間がかかる

アプリを導入する方法

Shopify アプリストアからメルマガ登録フォーム用のアプリをインストールする方法です。

メリット

ノーコードで設置・カスタマイズができる
インストールからすぐに利用開始できる
アプリ開発者によるサポートを受けられる
テーマアップデートの影響を受けにくい

デメリット

月額費用が発生する
アプリによってはカスタマイズの自由度に限りがある
アプリが提供終了になるリスクがある

結論：最初はアプリで小さく試すのがおすすめ

メルマガ登録フォームの設置を初めて行う場合は、まずアプリを導入して小さく始めることをおすすめします。

アプリならノーコードですぐに設置でき、メルマガ登録フォームの効果を素早く検証できます。追従メルマガ登録フォームの導入によってどの程度購読者が増えるか、実際のデータをもとに判断してから、必要に応じてコード編集による独自実装に切り替えるのが効率的です。

次のセクションでは、Shopify メルマガ登録フォームの設置におすすめのアプリを紹介します。

項目	内容
アプリ名	シンプル追従メルマガ登録フォーム｜追従メールマガジン購読設定
英語名	UR: Sticky Newsletter Signup
月額料金	$3.99/月
年額料金	$39.99/年（年払いで 16%お得）
日本語対応	対応済み
ご利用ガイド	こちら

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

アプリをインストールしたら、まずは以下のおすすめ設定で始めてみましょう。

基本設定のポイント

ボタンの配置は右下がおすすめです。右下は訪問者の視線が自然と向かいやすく、他の UI 要素と干渉しにくい位置です
スマートフォンでは画面サイズが小さいため、ボタンサイズを小さめに設定するとユーザー体験を損ないません
登録済みユーザーへの非表示は有効にしておきましょう。不要な表示を防ぐことで、ストア全体の印象が向上します

カラー設定のポイント

ボタンの背景色はストアのアクセントカラーを使用すると統一感が出ます
フォームの背景色は白または薄いグレーにすると、どんなテーマにもなじみやすくなります
テキストカラーは背景色に対してコントラスト比を十分に確保し、読みやすさを重視しましょう

文言のテンプレ例

追従メルマガ登録フォームに設定する文言は、訪問者のメルマガ登録意欲を左右する重要な要素です。以下にすぐ使えるテンプレ例を紹介します。

テンプレ 1：シンプルで汎用的なパターン

ボタンテキスト：「メルマガ登録」
フォームタイトル：「ニュースレターを購読する」
説明文：「最新の商品情報やお得なセール情報をお届けします。」
送信ボタン：「登録する」
完了メッセージ：「ご登録ありがとうございます！」

テンプレ 2：特典を強調するパターン

ボタンテキスト：「お得な情報を受け取る」
フォームタイトル：「会員限定の特典をお届け」
説明文：「メルマガ登録で限定クーポンや先行セール情報をいち早くお届けします。」
送信ボタン：「無料で登録する」
完了メッセージ：「登録完了！特典情報をお楽しみに。」

テンプレ 3：ブランドストーリーを意識したパターン

ボタンテキスト：「ストーリーを受け取る」
フォームタイトル：「ブランドの最新情報をお届け」
説明文：「新作アイテムの裏話やスタッフのおすすめなど、ここだけの情報を配信中。」
送信ボタン：「購読する」
完了メッセージ：「ようこそ！次回の配信をお楽しみに。」

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

アプリを使わずにテーマのコード編集で追従メルマガ登録フォームを実装したい方向けに、サンプルコードを紹介します。

実装の流れ

テーマの Liquid ファイルに HTML を追加
CSS でスタイルと追従表示を設定
JavaScript でフォームの開閉とメルマガ登録処理を実装

以下のコードは Shopify の Dawn テーマをベースにしたサンプルです。テーマによっては調整が必要になる場合があります。

HTML を追加

Shopify 管理画面の「オンラインストア」>「テーマ」>「コードを編集」から、layout/theme.liquid ファイルを開き、</body> タグの直前に以下のコードを追加します。

<!-- 追従メルマガ登録フォーム -->
<div id="sticky-newsletter" class="sticky-newsletter">
  <!-- 追従ボタン -->
  <button
    id="sticky-newsletter-btn"
    class="sticky-newsletter__btn"
    aria-label="メルマガ登録フォームを開く"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="2" y="4" width="20" height="16" rx="2" />
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
    <span>メルマガ登録</span>
  </button>

  <!-- フォームパネル -->
  <div id="sticky-newsletter-panel" class="sticky-newsletter__panel" hidden>
    <div class="sticky-newsletter__header">
      <h3 class="sticky-newsletter__title">ニュースレターを購読する</h3>
      <button id="sticky-newsletter-close" class="sticky-newsletter__close" aria-label="閉じる">
        &times;
      </button>
    </div>
    <p class="sticky-newsletter__desc">最新の商品情報やお得なセール情報をお届けします。</p>
    <form id="sticky-newsletter-form" action="/contact" method="post">
      <input type="hidden" name="form_type" value="customer" />
      <input type="hidden" name="contact[tags]" value="newsletter" />
      <input
        type="email"
        name="contact[email]"
        class="sticky-newsletter__input"
        placeholder="メールアドレスを入力"
        required
      />
      <button type="submit" class="sticky-newsletter__submit">登録する</button>
    </form>
    <p id="sticky-newsletter-success" class="sticky-newsletter__success" hidden>
      ご登録ありがとうございます！
    </p>
  </div>
</div>

CSS を追加

同じく layout/theme.liquid の </head> タグの直前、または assets フォルダ内の CSS ファイルに以下のスタイルを追加します。

.sticky-newsletter {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: inherit;
}

.sticky-newsletter__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}

.sticky-newsletter__btn:hover {
  background-color: #333;
}

.sticky-newsletter__panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sticky-newsletter__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sticky-newsletter__title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.sticky-newsletter__close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.sticky-newsletter__desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
}

.sticky-newsletter__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.sticky-newsletter__submit {
  width: 100%;
  padding: 10px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sticky-newsletter__submit:hover {
  background-color: #333;
}

.sticky-newsletter__success {
  font-size: 14px;
  color: #2ecc71;
  text-align: center;
  margin-top: 12px;
}

@media (max-width: 480px) {
  .sticky-newsletter {
    bottom: 10px;
    right: 10px;
  }

  .sticky-newsletter__panel {
    width: 280px;
    right: -10px;
  }

  .sticky-newsletter__btn span {
    display: none;
  }
}

JavaScript を追加

</body> タグの直前に以下の JavaScript を追加します。

<script>
  (function () {
    const btn = document.getElementById('sticky-newsletter-btn');
    const panel = document.getElementById('sticky-newsletter-panel');
    const closeBtn = document.getElementById('sticky-newsletter-close');
    const form = document.getElementById('sticky-newsletter-form');
    const success = document.getElementById('sticky-newsletter-success');

    btn.addEventListener('click', function () {
      const isHidden = panel.hidden;
      panel.hidden = !isHidden;
      btn.setAttribute('aria-expanded', isHidden);
    });

    closeBtn.addEventListener('click', function () {
      panel.hidden = true;
      btn.setAttribute('aria-expanded', 'false');
    });

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData(form);

      fetch('/contact', {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        },
      })
        .then(function () {
          form.style.display = 'none';
          success.hidden = false;
          localStorage.setItem('newsletter_subscribed', 'true');
        })
        .catch(function () {
          alert('登録に失敗しました。もう一度お試しください。');
        });
    });

    // 登録済みの場合は非表示
    if (localStorage.getItem('newsletter_subscribed') === 'true') {
      document.getElementById('sticky-newsletter').style.display = 'none';
    }
  })();
</script>

コード実装の注意点

テーマのコード編集で追従メルマガ登録フォームを実装する際には、以下の点に注意してください。

テーマアップデート時のバックアップ: テーマを更新すると、追加したコードが上書きされる可能性があります。編集前に必ずテーマのバックアップを取得し、カスタマイズ内容をテキストファイルなどに控えておきましょう
他の追従要素との競合: チャットウィジェットや「ページトップに戻る」ボタンなど、他の追従要素と表示位置が重なる場合があります。CSS の bottom や right の値を調整して、重ならないように配置してください
フォーム送信先の確認: サンプルコードでは /contact エンドポイントを使用していますが、テーマの設定やフォームの構成によっては動作が異なる場合があります。実装後は必ずテスト環境で動作確認を行ってください
アクセシビリティの配慮: aria-label や aria-expanded 属性を適切に設定し、スクリーンリーダーを使用するユーザーにも配慮したフォームを実装しましょう
CSRF トークンの取得: Shopify のフォーム送信には CSRF トークンが必要な場合があります。テーマの Liquid テンプレートで {% form 'customer' %} タグを使用すると、必要なトークンが自動的に生成されます

コード実装が難しいと感じた場合は、前述の「シンプル追従メルマガ登録フォーム」アプリを利用すれば、ノーコードで同等の機能を実現できます。

運用のコツ

追従メルマガ登録フォームを設置した後、購読者を効率的に獲得し続けるための運用のコツを紹介します。

定期的にメルマガを配信する

メルマガ登録フォームを設置しただけでは、購読者は増えていきますが売上にはつながりません。最低でも月 2〜4 回はメルマガを配信し、新商品の紹介やセール情報、お役立ちコンテンツなどを届けましょう。配信頻度が高すぎると解除率が上がるため、週 1 回程度が理想的です。

フォームの文言を定期的に見直す

同じ文言をずっと使い続けると、リピーター訪問者には見慣れてしまい効果が薄れます。季節やキャンペーンに合わせてフォームの説明文やボタンテキストを更新し、新鮮さを保ちましょう。

登録率をデータで把握する

Shopify の顧客管理画面で、メルマガ購読者数の推移を定期的に確認しましょう。追従メルマガ登録フォームの設置前後でどの程度変化があったかを数値で把握することで、改善の方向性が見えてきます。

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

EC サイトの訪問者の多くはスマートフォンからアクセスします。追従メルマガ登録フォームがスマートフォンで正しく表示されるか、商品閲覧の邪魔になっていないかを実機で確認してください。

A/B テストで最適化する

余裕があれば、フォームの文言やデザイン、表示位置などを変えて A/B テストを実施しましょう。「登録する」と「無料で購読する」のどちらが登録率が高いかなど、データに基づいた改善を重ねることで、長期的に大きな差が生まれます。

ウェルカムメールを設定する

メルマガ登録直後に自動でウェルカムメールを送信する設定をしておきましょう。登録のお礼とともに、ストアの魅力やおすすめ商品を紹介することで、すぐに購入につなげるチャンスが生まれます。Shopify Email や Klaviyo などの自動配信機能を活用してください。

よくある質問

Q. 追従メルマガ登録フォームは無料で設置できますか？

A. テーマのコード編集で実装する場合は無料で設置できます。ただし、HTML・CSS・JavaScript の知識が必要です。アプリを利用する場合は月額 $3.99（年払いなら $39.99/年で 16% お得）の費用がかかりますが、ノーコードで簡単に設置・カスタマイズが可能です。

Q. メルマガ登録フォームを特定のページだけに表示できますか？

A. 「シンプル追従メルマガ登録フォーム」アプリでは、テーマエディタからページごとにセクションの追加・削除ができるため、特定のページだけに表示することが可能です。コード実装の場合は、Liquid の条件分岐を使って表示ページを制御できます。

Q. メルマガ登録したお客様のデータはどこで確認できますか？

A. Shopify 管理画面の「顧客管理」からメルマガ購読者を確認できます。「メールサブスクリプション」のステータスが「登録済み」のお客様がメルマガ購読者です。顧客リストをフィルタリングして一覧表示したり、CSV でエクスポートすることも可能です。

Q. 他のメール配信サービスと連携できますか？

A. はい、できます。Shopify のメルマガ購読者データは、Klaviyo、Mailchimp、Omnisend などの外部メール配信サービスと連携可能です。これらのサービスを使うことで、より高度なセグメント配信や自動化フローを構築できます。

Q. フォームのデザインをストアのブランドに合わせてカスタマイズしたいのですが？

A. 「シンプル追従メルマガ登録フォーム」アプリでは、ボタン画像、背景色、テキストカラー、レイアウトなどをノーコードでカスタマイズできます。さらに細かい調整が必要な場合は、カスタム CSS 機能を使って自由にスタイルを変更できます。

Q. メルマガ登録フォームを設置すると、ストアの表示速度に影響しますか？

A. 「シンプル追従メルマガ登録フォーム」アプリは軽量に設計されており、ストアの表示速度への影響は最小限です。ただし、多数のアプリを同時に使用している場合は、全体的なパフォーマンスに影響が出る可能性があります。不要なアプリの整理も合わせて検討してください。

まとめ

この記事では、Shopify でメルマガ登録フォームを追加する方法について詳しく解説しました。

メルマガ登録フォームは、EC ストアにおいてリピーター獲得やブランド育成に欠かせないマーケティングツールです。特に追従メルマガ登録フォームを設置することで、訪問者がどのページを閲覧していても常にメルマガ登録の機会を提供でき、購読者の獲得効率を大幅に向上させられます。

Shopify メルマガ登録フォームの設置方法は、アプリ導入とコード編集の 2 つがあります。初めてメルマガ登録フォームを設置する方には、ノーコードで簡単に始められるアプリの導入がおすすめです。

**「シンプル追従メルマガ登録フォーム｜追従メールマガジン購読設定」**なら、1 クリックでテーマに追加でき、ボタンのデザインやフォームの文言、表示条件まで自由にカスタマイズ可能です。月額 $3.99 から利用でき、年払いなら $39.99/年（16% お得）とコストパフォーマンスにも優れています。

メルマガ登録フォームを設置したら、定期的な配信と運用改善を続けることで、購読者リストの価値を最大化しましょう。

ぜひこの記事を参考に、あなたの Shopify ストアにも追従メルマガ登録フォームを導入してみてください。

参考記事

ブログTOP お問い合わせ

Shopify でメルマガ登録フォームを追加する方法｜追従メルマガ登録フォームで購読者を効率的に獲得

目次

はじめに

記事の構成

Shopify でメルマガ登録フォームを表示できる？

メルマガ登録フォームを表示するメリット・デメリット

メリット

デメリット

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

テーマのコード編集で実装する方法

アプリを導入する方法

結論：最初はアプリで小さく試すのがおすすめ

おすすめ Shopify アプリ「シンプル追従メルマガ登録フォーム」紹介

アプリの基本情報

できること（機能の詳細説明）

基本設定

表示設定

カスタム CSS

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

文言のテンプレ例

関連施策との組み合わせ

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

実装の流れ

HTML を追加

CSS を追加

JavaScript を追加

コード実装の注意点

運用のコツ

よくある質問

まとめ

参考記事

おすすめ Shopify アプリ

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

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

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

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

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

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

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

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

関連記事

Shopify メルマガ登録アプリ11選｜追従メルマガ登録フォームで購読者を獲得する方法

Shopifyコレクション一覧アプリ17選｜業種別の選び方と商品カテゴリー表示カルーセル・並べ替えの最適解

【2026年】Shopifyのクローズドサイト構築アプリ9選を紹介！

Shopify 円形メニュー（ハイライト・サークルメニュー）アプリ10選をQ&A形式で解説

【2026年】Shopifyブログのタグ表示・付け方を徹底解説｜失敗しないアプリの選び方とおすすめ10選

【2026年】Shopify の LINE ギフトアプリ10選を紹介！

Menu

Social