# Popup

> 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.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/popup/

## At a glance

- **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
- **Settings:** 13
- **Blocks:** Heading, Text, Image, Page content, Product, Video, Button, Custom Liquid
- **App blocks:** No

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

1. Give the popup an **ID** – letters, numbers and dashes, for example `size-guide`.
2. Link any button, menu item or text to `#popup-size-guide`.
3. 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.

> **Tip**
>
> One automatic popup per visit is plenty. On phones, popups that cover the page right away can also hurt how search engines rank the page.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Popup** (13 settings, in editor order)

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.

| Setting | Options | Default |
| --- | --- | --- |
| **ID** – Letters, numbers and dashes. The link is #popup- followed by this ID. | Text | Sample text |

*Layout*

| Setting | Options | Default |
| --- | --- | --- |
| **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*

| Setting | Options | Default |
| --- | --- | --- |
| **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 (step 1) | 8s |
| **Page scrolled** | 10–90% (step 5) | 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 (step 1) | 7d |
| **Don't open on its own on mobile** | Checkbox | Off |
| **Don't open on its own on desktop** | Checkbox | Off |

## Block settings

**Block: Heading** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Large · Medium · Small | Medium |

**Block: Text** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Rich text | Sample text |

**Block: Image** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Image ratio** | Original · Landscape · Square · Portrait | Landscape |

**Block: Page content** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Page** – Shows the text from Online Store > Pages, for example a size chart. | Page | – |

**Block: Product** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Product** | Product | – |

**Block: Video** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Video** | Video file | – |
| **Or a YouTube or Vimeo link** | YouTube or Vimeo link | – |

**Block: Button** (4 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Button label** | Text | Sample text |
| **Action** | Open a link · Close the popup | Open a link |
| **Link** | Link | – |
| **Style** | Primary · Secondary | Primary |

**Block: Custom Liquid** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Custom Liquid** | Liquid code | – |

## Related

- [Newsletter popup](https://themelab.page/tally/docs/sections/newsletter-popup.md): A signup invitation that opens after a delay or on exit, and never returns to those who subscribed.
- [Age verification](https://themelab.page/tally/docs/sections/age-verification.md): A screen that covers the store until visitors confirm their age, and remembers the answer for up to 90 days.
- [Product page](https://themelab.page/tally/docs/product-page.md): The gallery, variant picker, buy buttons, pre-orders, delivery estimate, side panels and every other block of the Product information section.