Add a popup

A popup opens over the page with a newsletter signup or an offer. Checkmate already has one: the Popup section in the Overlays group of the editor sidebar, the group that holds the parts of your store that open over the page. You choose when it opens on its own, which visitors and pages it opens for, and what it shows.

In the Checkmate style, the popup is set to Manual only, so it never opens on its own until you change Display timing. In the Lair and Fang styles, it opens after 20 seconds, once per visit.

Choose when it opens

Display timing

When the popup opens

Manual only

Never on its own. It opens only from a link, as Open a popup from a button or link explains.

Time on page

After the visitor has been on a page for the number of seconds in Seconds on page, from 0 to 60, 30 by default. The count starts again on each page.

Exit intent

When the visitor moves the pointer out of the top of the browser window, as if to leave. It works only on screens 768 px wide or wider with a mouse or trackpad, so it does not open on touch screens.

Scroll depth

When the visitor has scrolled down the page by the distance in Scroll depth, from 0 to 5,000 px, 600 px by default.

Once a visitor closes the popup, it never opens on its own again in that browser. A visitor who signs up through its form does not see it open on its own again either. A link still opens it.

Turn on the popup

  1. In your Shopify admin, go to Online Store.

  2. Next to Checkmate, click Edit theme.

  3. In the editor sidebar, under Overlays, click Popup. The popup opens over the page in the preview.

  4. Under Display timing, select when it opens.

    Popup section settings with Display timing set to Time on page, Seconds on page at 20 and the Visibility group under them
  5. Optional. Under Visibility, choose who sees it, as the next table describes.

  6. Click Save.

After you close the popup once, it stops opening on its own in your browser too. To test it again, open your store in a private browser window.

The popup never opens on its own in the theme editor, on the password page or at checkout, or while the cart drawer is open.

Choose who sees it

The Visibility settings show when Display timing is not Manual only. The popup opens on its own only when the visit matches all of them.

Setting

What it does

Repeat behavior

On each matching page opens the popup on every page the visitor opens, until they close it. The default. Once per browser visit opens it at most once until the visitor closes the browser tab.

Visitor type

All visitors is the default. New visitors only opens it only on the first page a visitor views in that browser. Returning visitors only opens it from the second page they view on, including later visits.

URL targeting

All URLs is the default. URL contains opens it only when the page address contains the text in URL contains, such as /collections/. Query parameter equals opens it only when the address has the parameter in Parameter name with the value in Parameter value, such as utm_source and newsletter for visitors who arrive from a link with ?utm_source=newsletter. The value must match exactly, including capital letters.

Page type

All pages is the default and leaves out the cart page. The other choices limit the popup to one kind of page: Home page, Product pages, Collection pages, Cart page, Search page, Blog / article pages or Static pages. Collection pages includes the list of all collections. Static pages are the pages you create under Online Store > Pages.

Change what it shows

The popup comes with a heading, a Newsletter form block, a line of text and Social links. In the Checkmate and Fang styles, the heading offers 10% off a first order, so change it if you do not offer a discount. The theme does not send discount codes to subscribers. To give one, create the code under Discounts in your Shopify admin, then write it in a Text block in the popup.

To add more, click Add block in the Popup section. It takes Text, Button, Newsletter form, Social links and Custom liquid blocks, and app blocks. Collect email signups explains where newsletter subscribers go.

To show a photo, select the Image block in the Popup section and choose an image. Without one, the popup is as narrow as its text.

Setting

What it does

Popup position

Center is the default. Right center puts it against the right edge, halfway down the screen. Bottom right puts it in the bottom right corner. On screens narrower than 1000 px, the popup rises from the bottom of the screen at full width, whatever the position.

Popup size

The popup's width with a photo: 500 px for Extra small, 648 px for Medium, 792 px for Large, the default, and 940 px for Extra large.

Image position

Left puts the photo to the left of the text and is the default. Right puts it to the right, and Top above the text. With Extra small, the photo is always on top.

The Popup section describes every setting. If the popup does not open, see My popup doesn't appear.

Was this article helpful?