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

はじめに
記事の構成
Shopify でメルマガ登録フォームを表示できる？
Shopify のメルマガ登録フォームを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集 or アプリ利用の比較
おすすめアプリ「シンプルメルマガ登録フォーム｜メールマガジン購読設定」紹介
「シンプルメルマガ登録フォーム｜メールマガジン購読設定」のインストール手順
- インストール手順
アプリブロックをテーマに追加する方法
- 自動でテーマに追加する
- 手動でテーマに追加する
シンプルメルマガ登録フォームのカスタマイズ
Shopify メルマガ登録フォームを増やす運用のコツ
表示されないときのチェックポイント
テーマのコード編集で実装する場合のサンプルコード
- サンプルコード
- サンプルコードのポイント
コード編集で実装する際の注意点
よくある質問
まとめ
- 参考記事

はじめに

Shopify ストアを運営していると、広告や SNS だけに頼らない「継続的な集客導線」を作りたくなります。そのときに強力なのが、メルマガ（メールマガジン）登録フォーム です。

新作や再入荷の告知を、見込み客に直接届けられる
クーポン配布やキャンペーンで再訪を促せる
リピーター育成や LTV（顧客生涯価値）の底上げにつながる

一方で、いざ導入しようとすると「Shopify でメルマガ登録フォームって表示できるの？」「どこに置けばいい？」「コード編集が必要？」と悩む人も多いはずです。

そこで本記事では、Shopify メルマガ登録 をテーマに、登録フォームをストアに表示する方法を徹底解説します。

Shopify でメルマガ登録フォームを表示できるか
メルマガ登録フォームを設置するメリット・デメリット
テーマのコード編集で実装する方法と、アプリで実現する方法の違い
手軽に試せるおすすめアプリ「シンプルメルマガ登録フォーム｜メールマガジン購読設定」の紹介
公式ガイドを元にしたインストール手順と簡単な使い方
テーマのコード編集で実装する場合のサンプルコード

「まずは最短でメルマガ登録を増やしたい」「ノーコードで試して改善したい」という方は、特に後半のアプリ導入パートが参考になるはずです。

記事の構成

この記事は以下の流れで解説します。

Shopify でメルマガ登録フォームを表示できる？
Shopify のメルマガ登録フォームを表示するメリット・デメリット
テーマのコード編集とアプリ導入の違い（それぞれのメリット・デメリット）
手軽に試すならアプリがおすすめな理由
おすすめ Shopify アプリ「シンプルメルマガ登録フォーム｜メールマガジン購読設定」の紹介
アプリのインストール手順と簡単な使用方法（公式ガイド準拠）
テーマのコード編集で実装する場合のサンプルコード

読み終える頃には、あなたのストアに合った方法で Shopify メルマガ登録フォーム を設置し、運用しながら登録数を伸ばすための準備が整うことを目指します。

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

結論から言うと、Shopify でメルマガ登録フォームを表示することは可能です。実現方法は大きく次の 2 つに分かれます。

テーマのコードを編集して実装する方法
アプリを利用してノーコードで実装する方法

どちらでも実現できますが、

どのページに表示したいか（トップだけ、商品ページだけ、全ページなど）
どれくらいデザインをこだわりたいか
運用体制（社内にエンジニアがいるか、外注できるか）
検証スピード（すぐに AB テストしたいか）

によって最適解が変わります。

また、Shopify テーマによっては「ニュースレター（Newsletter）」セクションやフッターの購読フォームが最初から用意されていることもあります。ただし、テーマ標準のフォームは「置ける場所が限られる」「ページごとの出し分けが難しい」などの制約が出る場合もあります。

本記事では、そうした制約を越えて Shopify メルマガ登録フォーム を柔軟に設置する方法として、コード編集とアプリ導入の 2 つを中心に解説します。

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

「メルマガ登録フォームを置くべきか」を判断するには、メリットだけでなくデメリットも把握しておくことが重要です。ここでは Shopify ストア運用の観点で整理します。

メリット

見込み客との接点をストックできる

SNS や広告は、投稿が流れたり、広告停止で接点が切れたりします。一方、メールアドレスは ストア側が保有できる“資産” です。

新作発売
再入荷
期間限定セール
値上げ前の告知

など、タイミングの良い情報を繰り返し届けられるため、集客が安定しやすくなります。

購買に近いタイミングで登録を取りにいける

メルマガ登録の成功率は「どのページに置くか」で大きく変わります。

商品ページで「このブランド気になる」と思った瞬間
コレクションページで比較検討している瞬間
カートページで購入前に迷っている瞬間

この“関心が高いタイミング”でフォームを出せると、登録率が上がりやすいです。

つまり、Shopify メルマガ登録フォームを“ストアのあらゆるページ”に置けるかどうか は、登録数に直結します。

リピーター育成と LTV 向上につながる

メルマガは、単発購入で終わらせず「次の購入」へつなぐために有効です。

初回購入者に、次回使えるクーポンを配布
購入後の使い方・お手入れ方法を案内
関連商品の紹介（アップセル・クロスセル）

こうした施策は、広告費を追加でかけずに売上を積み上げやすいのが魅力です。

キャンペーン施策の“受け皿”になる

例えば SNS で「登録で 10%OFF クーポン配布」と告知しても、登録導線が弱いと機会損失になります。

トップページにしかフォームがない
フォームがフッターの最下部にある
スマホで見づらい

このような状態だと、せっかくの流入が登録につながりません。

Shopify メルマガ登録 を増やすなら、キャンペーンの受け皿としてフォーム設置を最適化する価値があります。

デメリット

表示が多すぎるとユーザー体験を損ねる

フォームの露出を増やすと登録数は増えやすい一方、やり方を間違えると「しつこい」「邪魔」と感じさせてしまいます。

ページ上部に大きなフォームを常時表示
スマホ画面を占有する
何度閉じても再表示される

こうした状態は、購入率を下げるリスクがあります。

対策としては、ページごとに表示場所やデザインを調整し、表示頻度の設計を入れること が重要です。

法規制・同意管理に配慮が必要

メールマーケティングでは、同意（オプトイン）を適切に取ることが求められます。地域や販売対象によっては、

同意チェックの表示
配信停止（オプトアウト）の導線
プライバシーポリシーへのリンク

などが必要になることがあります。

ここはストアの状況により変わるため、社内ルールや法務確認とセットで運用しましょう。

配信体制がないと「集めただけ」で終わる

フォーム設置はスタート地点です。登録後に何も送られなければ、効果は出ません。

登録直後のサンクスメール
定期的なニュースレター
セールや再入荷のタイミング配信

など、最低限の設計が必要です。

とはいえ、最初から完璧を目指す必要はありません。まずは「登録導線」を整え、少ない本数から運用して改善していくのが現実的です。

テーマのコード編集 or アプリ利用の比較

Shopify のメルマガ登録フォームは、テーマのコード編集でも、アプリでも実装できます。ただし「何が違うのか」が分からないまま進めると、途中で詰まりやすいです。

ここでは両者を整理します。

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

Liquid / HTML / CSS を編集し、任意の場所にメルマガ登録フォームを埋め込む方法です。

メリット

デザイン自由度が高い（ストアの UI に完全に合わせられる）
外部アプリに依存しない（アプリ停止や仕様変更の影響を受けにくい）
月額費用がかからない（開発コストは別）
表示条件を細かく制御できる（特定ページ、特定テンプレートなど）

デメリット

実装にスキルが必要（初心者には難易度が高め）
テーマ更新で差分が上書きされる可能性がある
不具合が起きたときに自己解決が必要
検証や AB テストのスピードが落ちやすい

「社内に実装できる人がいる」「デザインに徹底的にこだわりたい」というケースに向きます。

アプリを利用して実装する方法

Shopify アプリをインストールし、管理画面の設定だけでメルマガ登録フォームを表示する方法です。

メリット

ノーコードで導入できる
すぐに公開でき、検証が早い
UI でデザインや表示場所を調整しやすい
サポートがある場合、困ったときに相談できる

デメリット

月額費用がかかる
デザイン自由度はアプリ仕様に依存する
アプリ同士の競合（表示崩れ、速度低下）のリスクがゼロではない

「まずは手早く試したい」「コード編集のリスクを避けたい」というケースに向きます。

結論：手軽に試すならアプリがおすすめ

特に Shopify メルマガ登録 は「設置 → 計測 → 改善」のサイクルが成果を左右します。

フォームの位置を少し変える
文言やインセンティブを変える
表示ページを増減する

こうした改善をスピーディに回すなら、最初はアプリ導入が最短ルートになりやすいです。

もちろん、最終的にデザインや速度を極めたい場合はコード実装へ移行する、という段階的な進め方も現実的です。

「シンプルメルマガ登録フォーム｜メールマガジン購読設定」のインストール手順

ここからは、公式ガイドを元にインストール手順を紹介します。

ご利用ガイド:
https://unreact.jp/shopify-apps/sa-099-ur-mailsignup/guide

インストール手順

Shopify 管理画面左下の「設定」をクリック

Shopify 管理画面左下の「設定」をクリック

「アプリと販売チャネル」を選択し、「Shopify App Store」を開きます

「アプリと販売チャネル」から「Shopify App Store」を開く

検索窓に「シンプルメルマガ登録フォーム｜メールマガジン購読設定」と入力し、表示されたアプリをクリック

検索窓にアプリ名を入力し、表示されたアプリをクリック

「インストール」ボタンをクリックし、内容を確認してインストールを完了します

「インストール」ボタンをクリック

内容を確認してインストール

以上で、アプリのインストールは完了です。インストール日から 7 日間は無料体験として利用できます。

アプリブロックをテーマに追加する方法

インストール後は、テーマにフォームを表示する設定を行います。状況に応じて「自動追加」と「手動追加」の 2 通りがあります。

自動でテーマに追加する

アプリ管理画面を開きます

アプリ管理画面

フォームを追加したいテーマを選択します

フォームを追加したいテーマを選択

「テーマに追加」ボタンをクリックします

「テーマに追加」ボタンをクリック

テーマ編集画面が開いたら「保存する」をクリックしてください

テーマ編集画面で「保存する」をクリック

これで、メルマガ登録フォームがストアに表示されます。

手動でテーマに追加する

自動追加がうまくいかない場合や、「このページにだけ置きたい」というケースでは手動追加が便利です。

テーマエディタを開き、フォームを表示したいページに移動します

テーマエディタで表示したいページに移動

「セクションを追加」または「ブロックを追加」をクリック
「アプリ」から「メルマガ登録フォーム」を選択

「アプリ」から「メルマガ登録フォーム」を選択

設定完了後、「保存する」をクリック

設定完了後に「保存する」をクリック

手動追加を使うと、「商品ページだけ」「固定ページだけ」など、ページ単位でメルマガ登録フォームを設置しやすくなります。

シンプルメルマガ登録フォームのカスタマイズ

テーマにアプリブロックを追加したら、テーマエディタから各種設定を行えます。

カスタマイズ設定画面

設定項目の例

ここでは、運用上よく触るポイントをまとめます。

フォーム設定

フォームのタイトル・説明文の設定
ボタンテキストの変更
登録完了後のメッセージ設定

運用ポイント

説明文は「何が届くか」「頻度」を短く書くと安心感が出ます
ボタン文言は「登録する」より「クーポンを受け取る」などメリット訴求のほうが伸びることがあります

デザイン設定

フォントサイズや文字色の調整
ボタンカラー・背景色の変更
余白（上下・左右）の調整

運用ポイント

ストアの CTA ボタンと色を揃えると自然に馴染みます
余白を詰めすぎると窮屈に見えるため、スマホ表示のバランスを優先しましょう

表示設定

表示するページの指定
PC / スマホそれぞれの表示最適化

運用ポイント

最初は「商品ページ」か「トップページ」のどちらかに絞って検証すると改善点が明確になります
スマホでは文字量を減らし、入力欄とボタンのタップしやすさを優先すると登録率が上がりやすいです

Shopify メルマガ登録フォームを増やす運用のコツ

ここからは実装後の話です。フォームを置いただけでは登録数は伸びにくいので、運用で差が出るポイントをまとめます。

設置場所は「ページの役割」で決める

どこに置くか迷ったら、ページの役割から逆算します。

トップページ: ブランド全体の世界観、初回特典の訴求
商品ページ: 再入荷通知、レビュー・特典、関連情報の提供
コレクションページ: カテゴリの新作・ランキングの配信
カートページ: 購入直前の離脱防止（登録で特典、次回割引など）
固定ページ（FAQ、About）: 安心感が高いページなので登録を促しやすい

ポイントは、「そのページを見ている理由」と登録動機が一致していることです。

インセンティブは “出しすぎない” ほうが強いこともある

登録特典としてよくあるのがクーポンです。ただし、値引きが前面に出すぎるとブランド価値を毀損することもあります。

代替案としては、

再入荷を最速で通知
限定カラー・先行販売の案内
コーディネート提案や使い方の配信
会員限定コンテンツ

など、「情報価値」で登録を取りにいく設計も有効です。

ストアの商材や客層に合わせて最適な訴求を選びましょう。

文言テンプレートを用意して改善を回す

Shopify メルマガ登録 でよく効く文言は、ストアによって違います。ただし、改善の型は作れます。

たとえば以下のように、テンプレをいくつか用意して AB テストしてみてください。

「新作・再入荷情報をいち早くお届け」
「登録で初回 10%OFF クーポンを受け取る」
「週 1 回だけ、セール情報を配信します」
「会員限定の先行販売に参加する」

コツ

「何が届くか」を明確にする
「頻度」を明記して不安を減らす
ボタン文言は“行動”より“得られるもの”に寄せる

登録後の導線を必ず用意する

登録後に何も起きないと、登録の熱量が冷めます。

最低限、

登録完了メッセージ（ページ上）
登録完了メール（自動返信）

は用意しておくのがおすすめです。

さらに余裕があれば、

初回のウェルカムメール（ブランド紹介、人気商品、FAQ など）
数日後のフォローメール（使い方、レビュー、再入荷案内など）

のように、ステップ配信の形にすると成果が安定しやすくなります。

計測をセットにして改善する

フォーム施策は「なんとなく増えた・増えてない」になりがちです。最低限、次の数字を追うと改善が早くなります。

ページ別の登録数（どのページが強いか）
フォームの表示回数に対する登録率（登録率）
登録後の購入率（メール経由の売上）

アプリを使う場合も、できれば GA4 などの計測と合わせて「どのページの導線が効いたか」を見られると理想です。

表示されないときのチェックポイント

アプリを入れたのにフォームが表示されない、というときは次を順番に確認すると切り分けやすいです。

テーマエディタで保存を押したか
表示したいページに、アプリブロックを追加できているか
追加したページが「公開中のテーマ」か（プレビューのテーマだけに入っていないか）
スマホだけ表示しない場合、表示設定がデバイス別でオフになっていないか
ブラウザキャッシュの影響がないか（シークレットウィンドウで確認）

また、フォームが表示されても「デザインが崩れる」「余白が詰まりすぎる」などの違和感が出ることがあります。その場合は、フォントサイズや余白を少しずつ調整して、ストアの他の要素と馴染ませるのがコツです。

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

ここからは、アプリを使わずに Shopify メルマガ登録フォーム を実装する場合のサンプルです。

Shopify のニュースレター登録は、一般的に Liquid のフォームタグ を使って実装します。代表的には form 'customer' を用い、メールアドレスを受け取って「ニュースレター購読」用のタグを付けます。

以下は、特定ページにだけ表示できるように条件分岐も入れた “シンプルな例” です。

サンプルコード

{% comment %}
  シンプルなメルマガ登録フォーム例
  表示ページ: トップページ と 商品ページ
  置き場所: 任意のテンプレート / セクション / スニペット
{% endcomment %}

{% if request.page_type == 'index' or request.page_type == 'product' %}
  <div class="newsletter-box" role="region" aria-label="メールマガジン登録">
    <h3 class="newsletter-box__title">新作・再入荷情報をメールで受け取る</h3>
    <p class="newsletter-box__text">週 1 回程度、セールや再入荷のお知らせをお届けします。</p>

    {% form 'customer', id: 'NewsletterForm', class: 'newsletter-box__form' %}
      <input type="hidden" name="contact[tags]" value="newsletter">

      <label class="newsletter-box__label" for="NewsletterEmail">メールアドレス</label>
      <div class="newsletter-box__row">
        <input
          id="NewsletterEmail"
          type="email"
          name="contact[email]"
          value="{{ form.email }}"
          autocorrect="off"
          autocapitalize="off"
          autocomplete="email"
          required
          placeholder="example@email.com"
          class="newsletter-box__input"
        >
        <button type="submit" class="newsletter-box__button">登録する</button>
      </div>

      {% if form.posted_successfully? %}
        <p class="newsletter-box__success" aria-live="polite">ご登録ありがとうございます。確認メールをご確認ください。</p>
      {% endif %}

      {% if form.errors %}
        <p class="newsletter-box__error" aria-live="polite">入力内容をご確認ください。</p>
      {% endif %}

      <p class="newsletter-box__note">
        登録することで <a href="/policies/privacy-policy">プライバシーポリシー</a> に同意したものとみなします。
      </p>
    {% endform %}
  </div>
{% endif %}

<style>
  .newsletter-box {
    padding: 24px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    max-width: 720px;
    margin: 24px auto;
  }
  .newsletter-box__title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.4;
  }
  .newsletter-box__text {
    margin: 0 0 16px;
    opacity: .8;
  }
  .newsletter-box__label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
  }
  .newsletter-box__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .newsletter-box__input {
    flex: 1;
    min-width: 220px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;
  }
  .newsletter-box__button {
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  .newsletter-box__success {
    margin: 12px 0 0;
  }
  .newsletter-box__error {
    margin: 12px 0 0;
  }
  .newsletter-box__note {
    margin: 12px 0 0;
    font-size: 12px;
    opacity: .75;
  }
</style>