Popups

The popup manager decides which popup a shopper sees and how many. It coordinates Klaviyo forms with the theme's own popups so that only one is open at a time.

Every setting on this page is in Online Store > Themes > Customize, under the gear icon.

Turn the popup manager on or off

Popup Manager > Enable popup manager is the master switch, and it is on by default. Turning it off deletes no popups. The theme stops coordinating them, so Klaviyo forms go back to the timing set in Klaviyo, and several theme popups stop appearing.

Hide a popup

Popup Manager > Blacklist takes one entry per line. Each entry is a selector and a type, separated by a comma.

YbQ8kH,klaviyo
.global-popup,custom

For a Klaviyo form, the selector is the Klaviyo form ID and the type is klaviyo. For a popup the theme renders itself, the selector is a CSS selector and the type is custom.

The theme hides each blacklisted popup with CSS when the page is rendered, before any JavaScript runs, so it does not flash on screen.

The blacklist only hides the popup. It does not remove the popup from the popup manager. If Klaviyo still loads a blacklisted form, the popup manager can open it later, and opening it removes the hiding CSS. To make sure a Klaviyo form never appears, also turn the form off or change its targeting in Klaviyo.

When popups open

The manager tries the first popup 5 seconds after the page loads. After that it checks every 15 seconds. A popup opens only when no other popup is open and fewer than two popups have opened on this page view.

Closing a popup restarts the 15-second countdown, so the next popup never opens straight away.

The code sets the limit of two per page view. A custom.max_allowed_popups product metafield exists, but the popup manager does not read it, so setting it changes nothing.

When several popups are waiting, the one with the highest priority opens first. The next one can open 15 seconds after the first closes, if the limit allows. Developers set priorities in code. The theme's own popups all share one priority and open in the order the theme registers them. Klaviyo forms that the manager detects on the page rank below them.

Change the offers popup on product and Medispa pages

The Klaviyo group holds these settings.

Set both the desktop and the mobile form ID. The offers link does nothing if either one is empty. It also does nothing while another popup is open, so test it with no other popup on screen.

To use different forms for one product, set the custom.klaviyo_form_id_desktop and custom.klaviyo_form_id_mobile metafields on the product.

Change the collection page popup

On collection pages, the theme opens a Klaviyo form directly, outside the popup manager's timing and limit. It takes the form IDs from the collection's custom.klaviyo_form_id_desktop and custom.klaviyo_form_id_mobile metafields, under Products > Collections > [collection] > Metafields. When the storefront URL has a language or market prefix, the theme adds it to the metafield name. For example, pages under /zh-TW read custom.klaviyo_form_id_desktop_zh_TW. Leave the metafields empty to stop this popup on that collection.

The script sets a cookie so mobile shoppers see the form at most once every 5 days. On desktop it checks a different cookie from the one it sets, so a desktop shopper can see the form on every collection page they load. Fixing that needs a developer.

This popup only runs while Enable popup manager is on.

Change the Need help finding something popup

Need Help Finding Something Popup holds a desktop image, a mobile image, a title, and three call-to-action slots. Each slot has a label, an element ID, a link and a type. Leave a slot's label empty to hide that call to action.

Business rules

Some popups check for a Klaviyo profile cookie and do not open for shoppers who have already signed up. Test them in a private window, or clear your cookies first.

Medispa pages and the rest of the store use separate sign-up popups. Changing one does not affect the other.

The popup called global-popup is switched off in code. Its section and settings still appear in the theme editor, but editing them changes nothing on the storefront. See Legacy and unused code.

Verify the change

1. Open a private window and load the page where you expect the popup.
2. Wait at least 5 seconds with the tab in front. The 15-second countdown pauses while the tab is in the background.
3. Confirm the right popup opens, and that only one is open.
4. Close it, wait another 15 seconds, and confirm the next popup behaves as you expect.
5. If you changed the blacklist, wait through at least two 15-second checks and confirm the hidden popup does not appear.
6. Repeat on mobile, because desktop and mobile use different Klaviyo form IDs.

If nothing appears, or a hidden popup still shows, see Popups not appearing.

Developer map