Design and motion
Everything about how the popup looks is under the Design tab.
Use my store's colours and fonts
One click at the top of the Design tab gives the popup your live theme's look: its background, text, button and border colours, its fonts and its corners. Colours and fonts set on single blocks are cleared so the whole popup matches. Undo brings back the previous look.
Type and size
Show the popup in the middle of the page (a sheet on phones), as a slide-in panel from the side, or as a bar along the bottom. Set its width, padding and corner rounding.
Colours and fonts
Set the background, text, buttons, button text, secondary text, close button, field background and border, and an optional outline. Choose one font for text and one for headings from 18 typefaces, including a handwritten one.
Image
| Placement | Looks like |
|---|---|
| Left or Right | A photo beside the content. Set its width from 25 to 70% of the popup. |
| Top | A photo above the content. Set its height. |
| Background | The photo fills the popup. Put the text on the photo, on a frosted card or on a solid card, at the top, middle or bottom, and darken the photo if needed. |
| Round, over the top edge | A round photo that breaks out of the top of the card. With Fit set to Whole image and a transparent picture, a product cut-out rises out of the card instead. |
- Focus point: click the photo to choose the part that must stay in view when it is cropped.
- Inset adds a margin and rounded corners around a photo.
Shapes
- Buttons: square, rounded or pills.
- Fields: boxes, underlines, pills, or joined with their button in one outline.
- Popup: a card, a coupon ticket (notched sides and a perforated line), an arched photo or a dome. Add a thin inset frame line for a printed-card look.
- Bars: the content can sit centred, left, spread out, or run past as a scrolling ticker that pauses on hover.
Finish
Choose an icon, a word or no close button, and a soft, strong or no shadow. Shoppers can always close a popup with Escape or by clicking outside it, except an age check.
Motion
Choose how the popup opens (rise, fade, zoom or none) and how lively it is once open:
- Lively: the content arrives line by line, photos drift gently, buttons lift and shine, a valid email gets a tick, a mistake gently shakes the field, the code reveals itself, a sign-up ends with confetti and countdowns tick.
- Subtle: keeps the gentle parts: the line-by-line reveal, button and field feedback and the copy confirmation.
- Off: no motion at all.
Shoppers who ask their device for less motion never see it, whatever you choose.