ポップアップ本体、閉じるボタン、背景のオーバーレイ、ティーザーの設定を説明します。
サイズと位置
表示位置
画面内の9か所から選択できます。
- 左上・上中央・右上
- 左中央・中央・右中央
- 左下・下中央・右下
横幅
- 画像のみ：「画像の表示横幅」がポップアップ本体の横幅になります。
- ブロック・HTML：「ポップアップの最大横幅」がポップアップ本体の上限になります。
スマートフォンなど画面が狭い場合は、画面内に収まるよう自動的に縮小されます。
角丸と内側の余白
画像のみタイプでは、画像の周囲へ不要な空白を作らないため、角丸と内側の余白は0からの調整をおすすめします。
ブロック・HTMLタイプでは、文字やボタンが端に近づきすぎないよう内側の余白を設定してください。
アニメーション
次の表示方法から選択できます。
- フェードイン
- 下からスライド
- 上からスライド
- 右からスライド
- 左からスライド
- 拡大
- なし
閉じるボタン
閉じるボタンは、表示・非表示、大きさ、ポップアップの内側・外側、左右の配置、背景色、アイコン色、枠線色を設定できます。
閉じるボタンを非表示にする場合は、「ポップアップを閉じる」を設定したボタンや、クリックで閉じるオーバーレイなど、お客様が閉じられる方法を用意してください。
オーバーレイ
ポップアップの後ろに重ねる背景です。色と不透明度を設定できます。
「クリックでポップアップを閉じる」を有効にすると、ポップアップの外側を押して閉じられます。
ティーザーとは
ティーザーは、ポップアップを閉じた後や再表示までの待機中に、画面の左下または右下へ表示できる小さなボタンです。押すとポップアップ本体を再表示できます。
設定できる項目は次のとおりです。
- 文言
- 左下・右下
- 背景色
- 文字色
- 角丸
- 枠線の色・太さ
ティーザーにも閉じるボタンを表示できます。ポップアップ本体の閉じるボタンと同様に、表示・非表示、大きさ、内側・外側、左右配置、背景色、アイコン色、枠線色を設定します。
編集画面の「ティーザー」を押すと、本体を閉じた後の見た目を確認できます。
再表示条件との関係
再表示まで一定時間待つ設定や、現在の訪問中は一度だけにする設定でも、ティーザーが有効なら待機中はティーザーだけを表示します。
表示回数への加算
- ティーザーが表示されただけでは、表示回数に加算されません。
- ティーザーを押してポップアップ本体が開くと、表示回数に加算されます。
- ティーザーを押したこと自体はクリック数に加算されません。
PCとモバイルの違いを確認する
編集画面の「PC」「モバイル」を切り替え、最大横幅や内側の余白、文字の折り返しを確認します。画面幅が狭い場合はポップアップが画面内に収まるよう調整されますが、実際の余白は、最大横幅、内側の余白、コンテンツ、端末の画面幅によって異なります。
保存後は「ストアでプレビュー」を使い、実際のテーマ上でも確認してください。内容が長い場合は、ポップアップ内をスクロールして、ボタンや閉じるボタンまで操作できることも確認します。
閉じた後は、設定した位置にティーザーが表示されます。実際のストアではテーマの固定バーなどと重ならないことも確認してください。