A popup for a size guide, offer terms, a video, a product or anything else. It opens from any link that points to it, or on its own after a delay, on exit or after scrolling.
In the editor
Popup
Where it goes
The Popups group (top or bottom of the section list)
In the presets
Not on any page by default – add it where you need it
Popups live in the Popups group – at the top or bottom of the section list in the editor. They start hidden: show the section (the eye icon) to turn it on.
Open it from a link
Give the popup an ID – letters, numbers and dashes, for example size-guide.
Link any button, menu item or text to #popup-size-guide.
That's it: the link opens the popup on the same page. A link to another page with the hash, such as /products/linen-shirt#popup-size-guide, opens that page with the popup open.
In a menu (Online Store › Navigation), add a link and type #popup-size-guide as its address. Each popup needs its own ID.
Build the content
Add blocks in any order:
Heading and Text.
Image, in its original shape or cropped.
Page content: the text of a page from Online Store > Pages – a size chart you maintain in one place.
Product: a product with its photo, price and an add button.
Video: an uploaded video, or a YouTube or Vimeo link.
Button: a link, or Close the popup.
Custom Liquid: your own code, for a form from a service, for example.
Layout
Opens as a Window in the middle, a Panel from the side or a Sheet from the bottom, in three widths, with left or centered text. A panel from the side is lovely for size guides; a sheet from the bottom feels natural on phones.
Open it on its own
Open automatically:After a delay (Open after seconds), When the pointer leaves the page (desktop), or After scrolling (Page scrolled percentage).
Show on: all pages, the home page, product pages, collection pages or the cart page.
Show again: on every page, once per visit, or after some days (Show again after).
Don't open on its own on mobile / desktop: links still open it.
Shoppers close the popup with the close button, Esc or a click outside. Focus stays inside while it is open and returns to the link afterwards.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Popup13 settings
Setting
Options
Default
Link a button, menu item or text to #popup-ID to open this popup, for example #popup-size-guide. Each popup needs its own ID.
IDLetters, numbers and dashes. The link is #popup- followed by this ID.
Text
Sample text
Layout
Opens as
Window in the middle · Panel from the side · Sheet from the bottom
Window in the middle
Width
Small · Medium · Large
Medium
Text alignment
Left · Center
Left
Color scheme
Color scheme
Scheme 1
Opens on its own
Open automatically
Never, only from links · After a delay · When the pointer leaves the page · After scrolling
Never, only from links
Open after
0–60s
8s
Page scrolled
10–90%
50%
Show on
All pages · Home page only · Product pages · Collection pages · Cart page
All pages
Show again
On every page · Once per visit · After some days
After some days
Show again after
1–60d
7d
Don't open on its own on mobile
Checkbox
Off
Don't open on its own on desktop
Checkbox
Off
Block settings
Block: Heading2 settings
Setting
Options
Default
Heading
Rich text (one line)
Sample text
Heading size
Large · Medium · Small
Medium
Block: Text1 setting
Setting
Options
Default
Text
Rich text
Sample text
Block: Image2 settings
Setting
Options
Default
Image
Image
–
Image ratio
Original · Landscape · Square · Portrait
Landscape
Block: Page content1 setting
Setting
Options
Default
PageShows the text from Online Store > Pages, for example a size chart.