デザインと位置
セールポップアップのスタイルを設定し、デスクトップとモバイルでの表示位置を決めます。
Design タブでは、セールポップアップの見た目と表示位置を設定します。背景、位置、サイズ、フォントに分かれており、最後にカスタムCSSのボックスがあります。
Designタブ。横にポップアップのプレビューが表示されます。
Background style では、次の3種類の塗りつぶしを選べます。
| スタイル | 設定する項目 |
|---|---|
| Solid fill | Background color と Opacity |
| Gradient fill | Gradient color 1、Gradient color 2、Opacity |
| Image fill | アップロードした画像（PNG、JPEG、JPG、1 MB未満） |
あわせて、Border settings（Border style（Solid、Dashed、Dotted）、枠線のサイズ、角の丸み、色、Box shadow の切り替え）と、Padding、Margin も設定できます。
Position settings
Section titled “Position settings”ポップアップが浮かんで表示される位置です。デスクトップとモバイルは、それぞれのタブで別々に設定します。
デスクトップ
Section titled “デスクトップ”- Show on desktop：デスクトップでの表示をオンまたはオフにします
- Desktop position：Top left、Top middle、Top right、Bottom left、Bottom middle、Bottom right
- Animation type：Slide from top、Slide from bottom、Slide from left、Slide from right、Fade in-out
- Margin top/bottom (px) と Margin left/right (px)：画面の端から少し離します
同じ項目を設定します。Show on mobile、Mobile position、アニメーション、マージンです。
位置の選び方
Section titled “位置の選び方”初期値は Bottom left で、最も安全な位置です。ヘッダー、カート、多くのテーマがモバイルの商品ページ下部に表示する固定の「カートに追加」バーの邪魔になりません。
ほかの位置に決める前に、次の点を確認してください。
- Bottom right は、多くのストアでライブチャットのウィジェットと重なります。
- Top の位置は、お知らせバーや固定ヘッダーを隠してしまうことがあります。
- モバイルのマージンは、ポップアップを置ける余白がはるかに少ないため、デスクトップより重要です。
Size settings
Section titled “Size settings”| 設定 | オプション |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Mobile popup size と Mobile image size が使えるようになります |
Small より大きいサイズにする場合は、モバイル用のオプションをオンにしてください。スマートフォンでLargeのポップアップは画面の大半を覆うことがあり、読まれないまま閉じられる最大の原因になります。
Font family and font size
Section titled “Font family and font size”- Use custom font：フォントファミリーと太さを選ぶか、テーマのフォントを継承します
- Heading font size (px) と Content font size (px)
テーマのフォントに合わせると、ポップアップが後付けの要素ではなく、ストアの一部のように感じられます。
Custom CSS
Section titled “Custom CSS”タブの最後にある Custom CSS (Developer Zone) ボックスに、このポップアップに適用する通常のCSSを入力できます。ほかの場所と同じ注意事項が当てはまります。カスタムCSSをご覧ください。
ポップアップをページ内に配置する
Section titled “ポップアップをページ内に配置する”初期状態では、ポップアップはここで設定した位置でページの上に浮かんで表示されます。セクション内の固定位置など、ページ内に配置したい場合は、Display タブの Custom location to show popup にショートコードがあります。
<div class="samita-sales-popup" data-id="12345"></div>コピーして、テーマエディタの Samita Countdown アプリブロックに貼り付けます。手順はカウントダウンと同じです。ショートコードでカウントダウンを配置するをご覧ください。