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

ポップアップの作成、保存と、4種類のコンテンツタイプについて説明します。メールアドレスフォームはプロプラン限定です。

作成・編集画面の基本

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

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

画像のみ

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

設定できる項目

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

「画像の表示横幅」は画像タイプのポップアップ本体の横幅として使用されます。画像の縦横比は自動的に維持されます。

PC・共通画像を設定する

PC・共通画像を選択し、必要に応じて表示横幅、画像の説明文、リンク先を設定します。リンクを設定する場合は、新しいタブで開くか、クリック時にポップアップを閉じるかも選択できます。

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

モバイル専用画像

「モバイルで別の画像を使う」を有効にすると、画面幅767px以下ではモバイル用画像が表示されます。モバイル用画像が未設定の場合は、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 CDNから配信されます。PopUpGoから画像設定を削除しても、Shopifyのファイル自体は自動削除されません。

保存と公開の違い

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

関連記事

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