ポップアップの作成

ポップアップの作成とコンテンツタイプ

最終更新：2026年11月6日

ポップアップの作成、保存と、6種類のコンテンツタイプについて説明します。動画・カウントダウン・メールアドレスフォームはスタンダード以上のプランで利用できます。

作成・編集画面の基本

画面左側で設定し、右側のプレビューで見た目を確認します。上部ではポップアップ名、公開状態、保存、ストアでのプレビューを操作できます。

「コンテンツタイプ」で、作成するポップアップの形式を選択します。

画像のみ

画像を1枚設定する、最も手軽なタイプです。

設定できる項目

• PC・共通画像
• モバイル専用画像
• 画像の表示幅（PC／スマートフォン）
• 画像の説明文
• クリック時のリンク先URL
• 新しいタブで開く
• クリック時にポップアップを閉じる

「画像の表示幅」は画像タイプのポップアップ本体の横幅として使用されます。PCとスマートフォンそれぞれ100〜1200pxで設定でき、同じ画像でも端末ごとに幅を変更できます。「モバイルで別の画像を使う」を有効にする必要はありません。スマートフォンの設定が空欄の場合は、PCと同じ幅で表示されます。

画像の縦幅は、横幅に合わせて自動調整されます。実際の表示幅は画面の左右20pxずつの余白を除いた幅が上限で、内側の余白を設定している場合は画像自体がさらに小さくなります。

PC・共通画像を設定する

「画像を選択」からShopify標準のファイル選択画面を開き、画像を選択します。選択画面では新しい画像もアップロードできます。必要に応じて表示幅、画像の説明文、リンク先を設定します。リンクを設定する場合は、新しいタブで開くか、クリック時にポップアップを閉じるかも選択できます。

右側のプレビューでは、画像の表示サイズ、内側の余白、角丸、閉じるボタンとの位置関係を確認できます。

モバイル専用画像

「モバイルで別の画像を使う」を有効にすると、画面幅767px以下ではモバイル用画像が表示されます。モバイル用画像が未設定の場合は、PC・共通画像が表示されます。

編集画面の「モバイル」を押すと、スマートフォン相当の幅へ切り替えて確認できます。

画像の説明文とは

画面読み上げ機能を利用している方へ画像の内容を伝えたり、画像を読み込めない場合に代わりに表示したりする文章です。画像内に重要な文字や情報がある場合は入力してください。装飾だけの画像であれば空欄でも構いません。

動画のみ（スタンダード以上）

動画を1本だけ表示するタイプです。動画ブロックを追加する操作は不要です。ポップアップの横幅・高さは動画の比率と画面の大きさに合わせて自動調整され、「動画の最大幅」が上限になります。内側の余白の初期値は0です。余白が必要な場合は「サイズと位置」で追加できます。

動画の設定

次の設定は「動画のみ」と動画ブロックで共通です。動画ブロックは「ブロック」「メールアドレスフォーム」のメイン画面とボタン押下後の表示へ追加できます。

• 動画URL：YouTubeの通常のURL・ShortsのURL、またはHTTPSの動画ファイルのURL（MP4 / WebM / OGV / M4V）を入力します。種類は自動で判定します。動画の掲載ページのURLやHLSのURLは使用できません。
• 動画を選択：Shopify標準のファイル選択画面から動画を選びます。選択画面から新しい動画もアップロードできます。Shopifyでの動画処理が完了してから選択してください。
• 縦横比：「自動（おすすめ）」「横長（16:9）」「縦長（9:16）」「正方形（1:1）」から選びます。自動では、動画ファイルは元の比率、ShortsのURLは縦長、通常のYouTubeのURLは横長になります。合わない場合は変更してください。映像は切り抜かず全体を表示します。
• 動画の最大幅（px）：200〜1200pxで指定します。ポップアップの内側と画面の高さに収まるように縮小します。
• 動画の角丸（px）：0〜60pxで、ポップアップの角丸とは別に設定できます。余白が0の場合は、ポップアップの角丸でも外周が切り取られます。
• 再生設定：「自動再生」「音声あり」「繰り返し再生」を個別に選びます。初期値はすべてオフです。音声ありの自動再生がブラウザーに許可されない場合は、音声なしで再生します。音声なしでも自動再生できない場合は、再生ボタンから開始できます。

YouTubeは公式の埋め込みプレーヤーで表示します。表示枠は幅・高さ200px以上を推奨します。編集画面のプレビューではYouTubeは再生されず、動画ファイルは自動再生しません。再生は「ストアでプレビュー」で確認してください。

ポップアップを閉じる、またはボタン押下後の表示へ切り替えると、表示していた動画の再生は停止します。動画の再生操作は、クリック数には含まれません。

ブロック

見出し、テキスト、画像、ボタンなどを上から順番に組み合わせるタイプです。ブロックは追加、削除、並べ替えができます。

ポップアップ全体の背景画像も設定できます。文字が読みにくくならないよう、画像の明るさや文字色を調整してください。

詳しくは「ブロックとボタン押下後の表示」をご覧ください。

カウントダウン（スタンダード以上）

案内文付きのバーを作る方法と、ほかのコンテンツにブロックとして追加する方法があります。

開始・終了日時

終了日時は必須です。日時は日本時間で指定し、訪問者全員が共通の終了日時までカウントします。訪問ごとにタイマーを開始する方式ではありません。

開始日時はタイル型・バーでは任意、ゲージ型では必須です。指定する場合は終了日時より前にしてください。

通常のストアでは、表示ルールの条件を満たすことが前提です。そのうえで開始日時を設定すると、開始前はカウントダウンブロックだけを非表示にし、ほかのブロックは表示します。バーではバー全体を非表示にします。

終了後は残り時間が0で停止します。バーだけは「終了後にバーを非表示にする」を選べます。タイル型・ゲージ型に終了後の非表示の設定はありません。ポップアップ全体の表示期間を制限したい場合は、「表示ルール」の「表示の開始・終了」も設定してください。

バー（コンテンツタイプ「カウントダウン」）

案内文と残り時間を、画面いっぱいの横幅のバーで表示します。PCでは横並び、画面幅600px以下では案内文とタイマーの2段になります。高さは内容に合わせて自動調整します。

案内文、単位の表記（日本語・英語）、タイルの背景色、数字の色、案内文・単位の色、タイルの角丸を設定できます。バー全体の背景色と表示位置は「サイズと位置」で変更します。このタイプを選ぶと、表示位置は上、オーバーレイはなしに設定されます。

タイル型のブロック

日・時間・分・秒をタイルで表示します。「ブロック」または「メールアドレスフォーム」で「＋ カウントダウン（スタンダード以上）」を押し、「表示スタイル」で「タイル型」を選びます。単位の表記（日本語・英語）、単位の位置（数字の下・数字の右）、タイルの背景色、数字の色、単位の色、タイルの角丸を設定できます。

ゲージ型のブロック

見出し、残り時間、進捗のゲージ、左右の日時を表示します。「表示スタイル」で「ゲージ型」を選びます。残り日数が0のときは日数を省略します。日時は日本時間で表示します。

「ゲージの動き」は2種類から選べます。初期値は「減る（右から左へ）」です。残り時間の数字はどちらでも減ります。

「残り時間」の見出しは変更できます。ゲージの色、ゲージの背景色、残り時間の数字色、見出し・日時の文字色も設定できます。

サイズと間隔

「サイズと間隔」を開き、「サイズの調整」で「サイズを指定」を選ぶと、次の寸法をpxで指定できます。

ゲージの高さ・角丸と、バーの案内文の文字サイズは、「自動」のままでも調整できます。

「スマホで別のサイズを使う」を有効にすると、画面幅600px以下のサイズを別に指定できます。無効な場合はPC・共通の値を使います。

保存とプレビュー

保存エラーが出た場合は、終了日時、ゲージ型の開始日時、開始と終了の前後関係を確認してください。

編集画面では開始前も見た目を確認できます。「ストアでプレビュー」は公開状態や表示ルールを無視しますが、カウントダウンの開始前の非表示と、バーの終了後の非表示は適用します。「終了後にバーを非表示にする」が有効な終了済みのバーは、編集画面でも表示されません。見た目を確認するときは、その設定を一時的にオフにしてください。

メールアドレスフォーム（スタンダード以上）

ポップアップからメールアドレスを受け付け、Shopifyの顧客管理へ登録するタイプです。見出し・テキスト・画像などを、入力欄や送信ボタンと組み合わせて配置できます。

フォームを作成する

1. 「プラン・お支払い」でスタンダード以上のプランを利用中であることを確認します。
2. ポップアップを作成し、「コンテンツタイプ」で「メールアドレスフォーム」を選びます。
3. 自動で追加される入力欄・同意欄・送信ボタンの文言を設定します。
4. 見出しや説明、画像などを追加し、上下移動ボタンで並べ替えます。
5. 送信ボタンの「送信成功後の動作」を設定します。
6. デザインと表示ルールを設定し、保存してプレビューします。
7. 「公開する」をオンにして保存します。

入力欄と送信ボタンは1つずつ必須で、削除できません。「メール配信の同意」は初期配置されますが、削除・再追加できます。各部品の設定は「ブロックとボタン押下後の表示」をご覧ください。

メール配信への同意

「チェック欄の初期状態」でオン（チェックあり）・オフ（チェックなし）を選べます。新しく追加する同意欄はオンが初期値です。この設定の追加前に保存したフォームは、変更するまでオフのままです。配信する内容に合わせて、同意文を編集してください。送信時のお客様のチェック状態に応じて、次のように処理します。

• チェックあり：顧客登録とあわせて、Shopifyのメール購読状態を購読中にします。すでに購読中の場合は既存の同意情報を保持します。
• チェックなし・同意欄なし：顧客登録のみを行い、既存のメール購読状態は変更しません。すでに購読中のお客様の購読を解除する動作にはなりません。

PopUpGo自体にはメール配信機能はありません。メールを配信する場合は、Shopify側の購読状態を確認し、利用中のメール配信サービスから配信してください。

送信後の表示・動作

送信ボタンの「送信成功後の動作」で、次のいずれかを選びます。動作は登録処理が成功した後に実行されます。

メールアドレスフォームを選ぶと、完了メッセージが初期設定されます。内容は自由に編集できます。送信に失敗した場合は入力内容が残り、もう一度送信できます。

プレビューと実際の登録を確認する

編集画面のプレビュー、テーマエディタ、「ストアでプレビュー」からは顧客登録されません。送信後の見た目を確認するために使用してください。「リンク先へ移動」を選んだ場合も、プレビューではページ移動しません。

実際の登録を確認する場合は、公開後に通常のストアURLを開き、自分で確認できるメールアドレスを使って送信します。Shopifyの顧客管理でメールアドレスと購読状態を確認してください。

登録された顧客を確認する

1. Shopify管理画面の「顧客管理」を開きます。
2. 顧客タグが PopUpGo のお客様を絞り込みます。
3. 対象のお客様を開き、メールアドレスとメール購読状態を確認します。

顧客セグメントで絞り込む場合の条件は次のとおりです。Shopifyの顧客タグによる絞り込みも参照してください。

customer_tags CONTAINS 'PopUpGo'

同じメールアドレスの顧客が存在する場合は、新しい顧客を重複作成せず、既存顧客にタグを追加します。氏名・住所・既存タグは保持されます。メール購読状態は、上記の同意チェックに応じて扱います。

CSVでダウンロードする

1. Shopifyの顧客管理で、PopUpGo タグの顧客を絞り込みます。
2. 「エクスポート」を押します。
3. 絞り込んだ顧客を出力する場合は「フィルターに一致するお客様」を選びます。
4. ファイル形式を選び、エクスポートします。

件数によって、CSVはブラウザからダウンロードされるか、メールで届きます。詳細はShopifyの顧客CSVエクスポート手順をご覧ください。

顧客の一覧確認とCSV出力はShopifyの顧客管理で行います。PopUpGo内にメールアドレス一覧やCSV出力画面はありません。

HTML

入力したHTMLをポップアップ内へ表示する上級者向けのタイプです。

• HTMLの内容や表示崩れは、利用しているテーマを含めてご自身で確認してください。
• HTML内のリンクまたはボタンのクリックは、クリック数として計測されます。
• 外部サイトからコピーしたHTMLを貼り付ける場合は、提供元と安全性を確認してください。

危険なスクリプト、イベント属性、埋め込み要素は保存時に除去されます。保存後のプレビューで、必要な内容が残っていることを確認してください。

画像・動画の保存先

Shopify標準のファイル選択画面からアップロードした画像・動画は、ストアの「コンテンツ → ファイル」に保存され、Shopify CDNから配信されます。PopUpGoから画像・動画の設定やブロックを削除しても、Shopifyのファイル自体は自動削除されません。

保存と公開の違い

• 保存する：現在の設定を保存します。
• 公開するがオフ：下書きとして保存され、通常のストアには表示されません。
• 公開するがオン：保存後、アプリ埋め込みと表示条件を満たすストア画面に表示されます。

関連ページ

• ブロックとボタン押下後の表示
• デザインとティーザー
• 表示ルールの設定