Shopifyでページごとにポップアップを表示するアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプルページ毎のポップアップ｜特定画面内ポップアップ」のご利用ガイドです。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプルページ毎のポップアップ｜特定画面内ポップアップ」は、特定のページ（ホーム / 商品 / コレクション / カート / 固定ページなど）にだけポップアップバナーを表示できるアプリです。
ページの文脈に合わせたメッセージ（アナウンス、プロモーション、サインアップ特典など）を出し分けできるため、ストア訪問者のエンゲージメント向上に役立ちます。
さらに、PC とスマホで別々のバナー画像を設定できるので、デバイスごとの最適な見せ方をノーコードで実現できます。
ご興味のある方は、以下の URL からインストールしてみてください。
アプリ料金は **Basic Plan $6.99 / 月（1 週間の無料期間あり）**です。
「シンプルページ毎のポップアップ｜特定画面内ポップアップ」でできること
Shopify アプリである「シンプルページ毎のポップアップ｜特定画面内ポップアップ」は、狙ったページに、狙ったメッセージを届けるためのページ特化型ポップアップアプリです。
主な特徴は次のとおりです。
- 特定ページだけにポップアップを表示
ホーム、商品、コレクションなど、表示箇所を絞って案内できます。 - PC とスマホで画像を出し分け
端末に合わせたバナーで、見やすさとクリック率を両立できます。 - 表示頻度・表示タイミングを調整
「しつこいポップアップ」にならないよう、再表示間隔や遅延表示を柔軟に設定できます。 - 1 クリックでテーマに追加
コード不要で、導入から公開までスムーズです。
以下で、できることをもう少し具体的に紹介します。
特定のページにウェルカムポップアップバナーを表示できる！
「このページに来た人にだけ、これを伝えたい」を実現できます。
たとえば、次のような使い方が可能です。
- ホーム：新春セールや配送遅延などのアナウンス
- 商品ページ：サイズ交換案内、まとめ買い割引、関連商品の導線
- カート：送料無料までの条件、クーポン配布、あと一品の提案
PC とスマホで別々の画像を設定できる！
PC では横長・情報量多め、スマホでは縦長・大きい文字など、デバイスに合わせたバナーを用意できます。
同じ内容でも「読める」「押せる」デザインにすることで、体験がかなり変わります。
ポップアップを再表示するまでの時間を自由に設定できる！
表示頻度を調整できるので、過剰な表示を避けつつ、必要なタイミングで再提示できます。
「一度見た人にはしばらく出さない」など、ストレスを抑えた運用が可能です。
1 クリックでテーマに追加できる！
インストール後、テーマ側で有効化するだけで使えるため、コード編集不要で導入できます。
シンプルページ毎のポップアップアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は **Basic Plan $6.99 / 月（1 週間の無料期間あり）**です。
-
Shopify 管理画面左下の「設定」をクリックします。
-
「アプリ」をクリックし、「Shopify App Store」に移動します。
-
検索窓に「シンプルページ毎のポップアップ｜特定画面内ポップアップ」と入力し、表示されたアプリをクリックします。
-
アプリ詳細画面の「インストール」ボタンをクリックします。
-
権限の確認画面が出たら内容を確認して「インストール」を完了してください。
以上で、アプリのインストールは完了です。
シンプルページ毎のポップアップをテーマで有効化
このアプリは、テーマエディタ側で 「アプリ埋め込み（App embeds）」として有効化して使うのが基本です。
-
Shopify 管理画面から「オンラインストア」→「テーマ」を開きます。
-
対象テーマの「テーマを編集する」をクリックして、テーマエディタを開きます。
-
テーマエディタ内の「アプリ埋め込み（App embeds）」を開き、
「UR: Page-Specific Popup（シンプルページ毎のポップアップ）」を オン にします。
-
設定が完了したら、右上の「保存」をクリックします。
アプリ設定（カスタマイズ）
テーマエディタで「UR: Page-Specific Popup（シンプルページ毎のポップアップ）」を選択すると、下記のような設定項目が表示されます。
ここから、表示したい画像・ページ・タイミングを決めていきます。
バナー画像設定
ポップアップに表示するバナー画像を設定します。
-
PC 用バナー画像
- 「選択」から画像をアップロード / 既存画像を選択します。
-
スマホ用バナー画像（未設定時は PC 用を使用）
- スマホではレイアウトが変わるため、スマホ専用画像の設定がおすすめです。
- 未設定の場合は PC 用画像がそのまま使われます。
-
バナーリンク先 URL
- バナーをクリックした時の遷移先 URL を設定します。
- 商品ページ・コレクションページ・LP・外部ページなど自由に指定できます。
運用のコツ
- クーポン配布やキャンペーンのときは「リンク先 URL」を必ず設定し、クリック導線を作るのがおすすめです。
- スマホ用画像は「文字を大きく・情報を絞る」だけでも成果が出やすくなります。
表示ページ設定
どのページにポップアップを出すかを設定します。ページ単位でオン/オフできるのがこのアプリの強みです。
- ホームページで表示
- 商品ページで表示
- コレクションページで表示
- カートページで表示
- 固定ページで表示
さらに固定ページ向けに、より細かい指定ができます。
-
特定のページハンドル
- 例：
about-us,contact,faq - カンマ区切りでページハンドルを指定します。
- 空欄の場合はすべての固定ページで表示されます。
- 例：
ページハンドルの探し方（例）
- Shopify 管理画面 →「オンラインストア」→「ページ」→ 対象ページを開く
- URL 末尾（
/pages/xxxxのxxxx）がハンドルです
サイズ設定
ポップアップバナーの横幅（px）を設定します。
- バナー横幅（PC 用）
- バナー横幅（スマホ用）
運用のコツ
- 画像サイズに対して横幅が極端に小さい/大きいと、見え方が崩れたり画質が粗く見えることがあります。
まずはデフォルト付近で試し、プレビューで微調整するのがおすすめです。
表示タイミング設定
「いつ」「どれくらいの頻度」で表示するかを決めます。
-
次回表示までの期間
- 再表示までの間隔を設定します。
- 0 に設定すると毎回表示されます。
-
表示までの待機秒数
- ページ読み込み後、ポップアップを表示するまでの待機時間です。
おすすめ設定例
-
初回訪問者にだけ強めに訴求したい：
- 待機秒数：
2〜4秒 - 次回表示までの期間：
7（1 週間程度）
- 待機秒数：
-
カートでの取りこぼし防止（送料無料訴求など）：
- 待機秒数：
1〜2秒 - 次回表示までの期間：
1〜3
- 待機秒数：
クローズ設定
-
領域外クリックで閉じる
- オン：ポップアップの外側をクリックして閉じられます
- オフ：閉じるボタンでのみ閉じられます
運用のコツ
- 購買導線を邪魔しないために、基本は オン 推奨です（ストレス軽減につながります）。
カスタム CSS 設定
-
追加の CSS
- さらに見た目を調整したい場合、CSS を追加できます。
- 注意書きにもある通り、クラス名はブラウザの検証（開発者ツール）などで確認して調整します。
よくあるカスタマイズ例（方向性）
- 角丸を強める
- 影（シャドウ）を足す
- モバイル時の余白や最大幅を調整する
※ 実際のクラス名はテーマやアプリ側の出力により異なるため、まずは表示中の要素を検証してご確認ください。
動作確認のポイント
設定後は、次の流れでチェックするとスムーズです。
-
表示対象ページ（ホーム / 商品 / カートなど）で実際にポップアップが出るか確認
-
PC / スマホ表示の両方で画像が想定通りか確認
-
「次回表示までの期間」を設定している場合、同じブラウザだと再表示されないことがあります
- シークレットウィンドウで確認する
- または Cookie / ローカルストレージをクリアして確認する
と切り分けがしやすいです
おわりに
今回は「シンプルページ毎のポップアップ｜特定画面内ポップアップ」の使い方を解説しました。
- 特定ページだけにポップアップを表示でき、ページ文脈に合わせた訴求が可能
- PC / スマホで画像を出し分けでき、デバイスに最適化できる
- 表示頻度・待機秒数を調整でき、しつこくない運用がしやすい
- **月額 $6.99（1 週間無料） **で導入できる
「ホームだけ告知を出したい」「商品ページだけクーポンを見せたい」「カートで送料無料を案内したい」など、ピンポイントな施策にぜひお役立てください。
.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}
