Popup
Popup: a window, corner card, bar, side drawer or full screen with any content (newsletter signup, discount code, heading, text, buttons, a countdown to a real date). It opens after a delay, after scrolling, when the visitor is about to leave, or only from a link to #handle; once per visit, per session or per number of days. After closing, an optional tab brings it back. Add several, each on the pages it belongs to. It never opens by itself in the theme editor: select the section to see it.
This section also has the base settings every section shares: color scheme, layout, running head, page number, padding, divider and reveal on scroll.
Settings
Look
| Setting | What it does |
|---|---|
| Layout | Options: Window, Corner card, Bar at the bottom, Side drawer, Full screen. Default: modal. |
| On phones | Options: Same as desktop, Sheet from the bottom. Default: sheet. |
| Side | For the corner card, the drawer and the tab. Follows the reading direction. Options: Start, End. Default: end. |
| Image | |
| Image position | Options: Start, End, Top, Background. Default: start. |
| Show "No thanks" | Default: on. |
When and where
| Setting | What it does |
|---|---|
| Opens | Leaving the page is detected on computers; on phones the popup waits for half the page instead. Options: After a delay, After scrolling, When leaving the page, Only from a link. Default: delay. |
| Delay | From 0 to 60 s. Default: 8. |
| Part of the page scrolled | From 10 to 90 %. Default: 40. |
| Link name | Any link to #name opens the popup, for example a menu item or button linked to #welcome. |
| Show again | Options: On every page, Once per visit, After a number of days. Default: days. |
| Days | From 1 to 90 d. Default: 14. |
| Pages | When the popup is in the footer it appears across the store; choose where. Options: All pages, Home page only, Product pages only, Collection pages only. Default: all. |
| Show to | Options: Everyone, Visitors not signed in. Default: guests. |
| Show a tab after closing | A small button in the corner that opens the popup again. Default: off. |
| Tab text | Default: Get 10% off. |
Blocks
Heading
A heading. The level sets the HTML tag for the page outline; the size sets the look.
| Setting | What it does |
|---|---|
| Heading | Default: Heading. |
| Size | Options: Extra large, Large, Medium, Small, Label. Default: h2. |
| Heading level | Use H1 once per page, for the main title. Options: H1, H2, H3, Not a heading. Default: h2. |
Text
A block of rich text.
| Setting | What it does |
|---|---|
| Text | |
| Style | Options: Body, Large, Small. Default: body. |
Button
A link styled as a button or a text link. Without a link it renders as a disabled button so the layout stays visible in the editor.
| Setting | What it does |
|---|---|
| Label | Default: Shop now. |
| Link | |
| Open in a new tab | Default: off. |
| Style | Options: Primary, Secondary, Text link. Default: primary. |
| Size | Options: Small, Medium, Large. Default: medium. |
| Full width | Default: off. |
Countdown
Countdown to a real end date (no fake urgency): the merchant enters a date and time in the store's time zone, or connects a date metafield. Counts down in absolute time, so it is right in every visitor's time zone. Without a valid date it renders nothing. When the time is up it hides itself or shows a message.
| Setting | What it does |
|---|---|
| End date and time | Format: YYYY-MM-DD HH:MM, in your store time zone. You can connect a date metafield instead. Without a valid date the countdown is hidden. |
| Label | Default: Offer ends in. |
| When time is up | Options: Hide the countdown, Show a message. Default: hide. |
| Message | Default: This offer has ended.. |
Newsletter signup
Newsletter signup inside a popup. The address joins the store's customer list with the newsletter tag; after signing up the popup opens again with a thank you and stays away.
| Setting | What it does |
|---|---|
| Label | Default: Subscribe. |
| Small print | Default: Unsubscribe at any time.. |
| Thank you message | Shown after signing up. For a welcome code, add a Discount code block too. |
Discount code
A discount code with a copy button, and an optional link that applies it to the cart at once (Shopify's /discount/CODE link). Create the code in Discounts first; the block shows it as is.
| Setting | What it does |
|---|---|
| Label | Default: Your code. |
| Discount code | Create the code in Discounts first; this block only shows it. |
| Show a link that applies the code | Default: on. |