ポップアップの作成、保存と、3種類のコンテンツタイプについて説明します。
作成・編集画面の基本
画面左側で設定し、右側のプレビューで見た目を確認します。上部ではポップアップ名、公開状態、保存、ストアでのプレビューを操作できます。
「コンテンツタイプ」で、作成するポップアップの形式を選択します。
画像のみ
画像を1枚設定する、最も手軽なタイプです。
設定できる項目
- PC・共通画像
- モバイル専用画像
- 画像の表示横幅
- 画像の説明文
- クリック時のリンク先URL
- 新しいタブで開く
- クリック時にポップアップを閉じる
「画像の表示横幅」は画像タイプのポップアップ本体の横幅として使用されます。画像の縦横比は自動的に維持されます。
PC・共通画像を設定する
PC・共通画像を選択し、必要に応じて表示横幅、画像の説明文、リンク先を設定します。リンクを設定する場合は、新しいタブで開くか、クリック時にポップアップを閉じるかも選択できます。
右側のプレビューでは、画像の表示サイズ、内側の余白、角丸、閉じるボタンとの位置関係を確認できます。
モバイル専用画像
「モバイルで別の画像を使う」を有効にすると、画面幅767px以下ではモバイル用画像が表示されます。モバイル用画像が未設定の場合は、PC・共通画像が表示されます。
編集画面の「モバイル」を押すと、スマートフォン相当の幅へ切り替えて確認できます。
画像の説明文とは
画面読み上げ機能を利用している方へ画像の内容を伝えたり、画像を読み込めない場合に代わりに表示したりする文章です。画像内に重要な文字や情報がある場合は入力してください。装飾だけの画像であれば空欄でも構いません。
ブロック
見出し、テキスト、画像、ボタンなどを上から順番に組み合わせるタイプです。ブロックは追加、削除、並べ替えができます。
ポップアップ全体の背景画像も設定できます。文字が読みにくくならないよう、画像の明るさや文字色を調整してください。
詳しくは「ブロックとボタン押下後の表示」をご覧ください。
HTML
入力したHTMLをポップアップ内へ表示する上級者向けのタイプです。
- HTMLの内容や表示崩れは、利用しているテーマを含めてご自身で確認してください。
- HTML内のリンクまたはボタンのクリックは、クリック数として計測されます。
- 外部サイトからコピーしたHTMLを貼り付ける場合は、提供元と安全性を確認してください。
危険なスクリプト、イベント属性、埋め込み要素は保存時に除去されます。保存後のプレビューで、必要な内容が残っていることを確認してください。
画像の保存先
アップロードした画像は、ストアの「コンテンツ → ファイル」に保存され、Shopify CDNから配信されます。PopUpGoから画像設定を削除しても、Shopifyのファイル自体は自動削除されません。
保存と公開の違い
- 保存する：現在の設定を保存します。
- 公開するがオフ：下書きとして保存され、通常のストアには表示されません。
- 公開するがオン：保存後、アプリ埋め込みと表示条件を満たすストア画面に表示されます。