Shopifyで固定メルマガ登録フォームを簡単に設置できるアプリについて徹底解説｜ご利用ガイド
はじめに
Shopify は、誰でも簡単にオンラインストアを開設・運営できる EC プラットフォームです。Shopify アプリを追加することで、ストアの機能を自由に拡張できます。
「UR: Sticky Newsletter Signup」 は、Shopify ストアのあらゆるページに固定表示のメールマガジン登録フォームを設置できるアプリです。画面の端に常に表示される固定ボタンをクリックすると、モーダル形式でメルマガ登録フォームが開きます。ノーコードでデザインをカスタマイズでき、1クリックでテーマに追加できるため、手軽にメルマガ購読者を増やすことができます。
料金
- $3.99/月 または $39.99/年（年払いで16%お得）
アプリストア
UR: Sticky Newsletter Signup - Shopify App Store
「UR: Sticky Newsletter Signup」でできること
「UR: Sticky Newsletter Signup」は、ストアの画面端に固定ボタンを表示し、ボタンをクリックするとメールマガジン登録フォームがモーダルで開く仕組みのアプリです。商品ページやコレクションページなど、どのページにいてもお客様がすぐにメルマガ登録できるため、購読者の獲得機会を逃しません。
主な特徴
- ストアのあらゆるページに固定表示のメルマガ登録フォームを設置できる
- ボタン画像・フォームの色・レイアウトなどをノーコードでカスタマイズできる
- 1クリックでテーマに追加でき、すぐに利用開始できる
- メルマガ登録済みのお客様には自動で非表示にできる
- PC・スマホそれぞれに最適な表示を個別に設定できる
ストアのあらゆるページにメルマガ登録フォームを表示できる！
商品ページ、コレクションページ、トップページなど、お客様がどのページを閲覧していても、画面の端に固定ボタンが常に表示されます。ボタンをクリックするだけでメルマガ登録フォームが開くため、お客様が「登録したい」と思った瞬間を逃しません。
見た目をノーコードでカスタマイズできる！
固定ボタンの画像やサイズ、フォームの背景色・文字色・ボタンの色・レイアウトなど、さまざまなデザイン設定をテーマエディタ上でノーコードで変更できます。ストアのブランドイメージに合わせた統一感のあるデザインに仕上げられます。
1クリックでテーマに追加できる！
アプリの管理画面からテーマを選択して「テーマに追加」をクリックするだけで、すぐにストアにメルマガ登録フォームを設置できます。テーマエディタを手動で操作する必要がなく、初めての方でも簡単にセットアップできます。
アプリのインストール
アプリストア
UR: Sticky Newsletter Signup - Shopify App Store
料金
- $3.99/月 または $39.99/年（年払いで16%お得）
インストール手順
1. Shopify 管理画面の左下にある「設定」をクリックします。
2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
3. 検索窓に「シンプル追従メルマガ登録フォーム」と入力し、表示されたアプリをクリックします。
4. アプリ詳細画面で「インストール」ボタンをクリックします。
5. 権限の確認画面が表示されるので、内容を確認し「インストール」をクリックしてインストールを完了します。
アプリブロックをテーマに追加
自動でテーマに追加（1クリック追加）
1. アプリの管理画面を開きます。
2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
手動でテーマに追加（任意ページに設置したい場合）
1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
2. テーマエディタ上部のプルダウンから、追加したいページに移動します。
3. 「セクションを追加」または「ブロックを追加」をクリックします。
4. 「アプリ」タブから「メールマガジン登録フォーム」ブロックを選んで追加します。
5. 表示を確認し、問題なければ「保存する」をクリックします。
メールマガジン登録フォームのカスタマイズ
テーマエディタで「メールマガジン登録フォーム」ブロックを選択すると、以下の設定項目をカスタマイズできます。
固定ボタンの設定
画面の端に常時表示される固定ボタンの見た目や位置を設定します。
| 設定項目 | 説明 |
|---|---|
| ボタン画像（PC） | PC用の固定ボタンに使用する画像を選択します。お好みのアイコンやバナー画像を設定すると、ストアのブランドに合ったボタンにできます。選択しない場合は、プレースホルダー画像が表示されます。 |
| ボタン画像の幅（PC） | PC表示時のボタン画像の幅をピクセル単位で設定します。（40〜400px、初期値: 80px） |
| ボタン画像（スマホ） | スマホ用の固定ボタンに使用する画像を選択します。スマホ画面に合った小さめの画像を設定するのがおすすめです。選択しない場合は、PC用の画像が使用されます。 |
| ボタン画像の幅（スマホ） | スマホ表示時のボタン画像の幅をピクセル単位で設定します。（40〜400px、初期値: 60px） |
| 端からの距離（PC） | PC表示時のボタンの左端または右端からの距離をピクセル単位で設定します。（0〜100px、初期値: 20px） |
| 端からの距離（スマホ） | スマホ表示時のボタンの左端または右端からの距離をピクセル単位で設定します。（0〜100px、初期値: 10px） |
| 下端からの距離（PC） | PC表示時のボタンの画面下端からの距離をピクセル単位で設定します。（0〜100px、初期値: 20px） |
| 下端からの距離（スマホ） | スマホ表示時のボタンの画面下端からの距離をピクセル単位で設定します。（0〜100px、初期値: 10px） |
| ボタンの位置 | 固定ボタンを画面の左端・右端のどちらに表示するか選択します。（選択肢: 左 / 右、初期値: 右） |
| ボタンの影 | ボタンに影（シャドウ）をつけるかどうか設定します。影をつけると、ボタンが浮き上がったように見え、目立ちやすくなります。（初期値: オフ） |
| ボタンのホバー時の挙動 | マウスカーソルをボタンに重ねたときのアニメーション効果を設定します。（選択肢: なし / 拡大 / 透明、初期値: 拡大） |
フォームの内容
モーダルで表示されるメルマガ登録フォームの内容やデザインを設定します。
| 設定項目 | 説明 |
|---|---|
| タイトル | フォームの上部に表示されるタイトルテキストです。メルマガ登録を促すメッセージを設定しましょう。（初期値: 「Join our email list」） |
| 説明文 | タイトルの下に表示される説明テキストです。登録するメリットや特典を記載すると、登録率の向上に効果的です。（初期値: 「Get exclusive deals and early access to new products.」） |
| 入力欄のプレースホルダー | メールアドレス入力欄に薄く表示されるヒントテキストです。（初期値: 「Email address」） |
| 入力欄の枠線の色 | メールアドレス入力欄の枠線の色を設定します。（初期値: #D1D5DB） |
| ボタンのラベル | 登録ボタンに表示されるテキストです。（初期値: 「Subscribe」） |
| ボタンの背景色 | 登録ボタンの背景色を設定します。ストアのアクセントカラーに合わせるのがおすすめです。（初期値: #242424） |
| ボタンの文字色 | 登録ボタンの文字色を設定します。背景色とのコントラストが十分取れる色にしましょう。（初期値: #FFFFFF） |
| 入力欄とボタンの配置 | メールアドレス入力欄と登録ボタンを縦に並べるか、横に並べるかを選択します。横並びにするとPC表示時にコンパクトな印象になります。（選択肢: 縦並び / 横並び、初期値: 縦並び） |
| 入力欄とボタンの角の丸み | 入力欄と登録ボタンの角の丸みをピクセル単位で設定します。数値を大きくするほど丸みが強くなります。（0〜50px、初期値: 6px） |
| フォームの最大幅 | フォーム全体の最大幅をピクセル単位で設定します。（360〜1980px、初期値: 600px） |
| フォームの角の丸み | フォーム全体（モーダルの背景部分）の角の丸みをピクセル単位で設定します。（0〜50px、初期値: 8px） |
| フォームの内側の余白（PC） | PC表示時のフォーム内側の余白をピクセル単位で設定します。（0〜100px、初期値: 24px） |
| フォームの内側の余白（スマホ） | スマホ表示時のフォーム内側の余白をピクセル単位で設定します。（0〜100px、初期値: 16px） |
| フォームの背景色 | フォーム全体の背景色を設定します。（初期値: #FAFAFA） |
表示設定
フォームの表示条件を設定します。
| 設定項目 | 説明 |
|---|---|
| メルマガ登録済みユーザーには非表示 | すでにメルマガに登録済みのお客様に対して、固定ボタンとフォームを非表示にします。登録済みのお客様に何度もフォームを表示しないようにすることで、ストアの閲覧体験を向上させます。（初期値: オン） |
その他の設定（カスタム CSS）
| 設定項目 | 説明 |
|---|---|
| 追加の CSS | より細かいデザイン調整をしたい場合に、カスタム CSS を記述できます。ブラウザの検証機能（DevTools）でカスタマイズしたい要素のクラス名を確認し、CSS を上書きすることで自由にスタイルを変更できます。CSS の知識がある方向けの設定です。 |
おわりに
「UR: Sticky Newsletter Signup」は、Shopify ストアに固定表示のメルマガ登録フォームを簡単に追加できるアプリです。
- ストアのあらゆるページに固定ボタンを表示し、メルマガ登録の機会を最大化
- ボタン画像・フォームデザインをノーコードで自由にカスタマイズ
- 登録済みユーザーへの自動非表示で、快適なストア体験を提供
料金
- $3.99/月 または $39.99/年（年払いで16%お得）
アプリストア
UR: Sticky Newsletter Signup - Shopify App Store
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
