Popup design
Style your popup's colors, background, fonts, and mobile sizes.
The Design tab of the Sales Popup Editor controls how the popup looks.
Device
Choose which devices the popup runs on:
| Option | Who sees it |
|---|---|
| Desktop & Mobile | Everyone |
| Desktop Only | Desktop and laptop visitors |
| Mobile Only | Phone and tablet visitors |
Background
Choose a Background Type: Solid Color, Gradient, or Image.
For solid, set the Background Color.
For gradient, set Gradient Color 1 and Gradient Color 2.
For image, paste a Background Image URL.
Adjust Background Opacity as a percentage.
Width and fonts
Set Popup Width in pixels.
Set the Font Family — for example Arial, sans-serif.
Use the same font stack as your theme so the popup doesn't look bolted on.
Custom CSS
Use the Custom CSS field for anything the built-in settings don't cover.
Custom CSS is applied as written. A malformed rule can break the popup's layout or hide it entirely. Test on your storefront right after saving, and keep a copy of the CSS that last worked.
Mobile sizes
Tick Enable Mobile Size Settings.
Set Mobile Image Size.
Set Mobile Popup Width.
Always set mobile sizes
A 400px-wide popup covers most of a phone screen. Without a mobile width, your popup will feel far more intrusive on mobile than it looks on your desktop preview.
Tip
Popups read best as quiet notifications, not as ads. A light background, your theme's font, and a small product image will out-convert a loud full-color overlay in most stores.