Popups and forms

Several systems can open a popup on this store. A popup manager in the theme decides which one shows, and it is the only code that tracks all of them.

How the manager decides

At most two popups show per page view. Only one is visible at a time.

The first popup is offered five seconds after the page loads. After that, a timer offers the next one every fifteen seconds, and the timer restarts whenever a popup closes so the gap is always a full interval.

Each popup carries a priority. A higher-priority popup can replace one that is already open. A lower-priority one waits.

A popup can be marked to force itself open, which skips the per-page limit. The Need Help popup uses this when a customer clicks its trigger.

Turn the manager on or off

1. In the theme editor, open Theme settings, then the Popup Manager group.
2. Toggle Enable popup manager.
3. Save.

Switching it off does not remove Klaviyo popups. It removes the coordination between them, so Klaviyo's own rules decide, and two popups can appear together.

Hide a popup that should never show

The blacklist hides known popups before the page renders, which stops a flash of an unwanted popup.

1. In the theme editor, open Theme settings, then Popup Manager.
2. Add one line per popup to Blacklist, in the form selector,type.

QTuEQs,klaviyo
#popup-selector,custom

For a Klaviyo popup the selector is the form ID. For anything else it is a CSS selector.

3. Save.

Edit the Need Help popup

This popup is built in the theme rather than in Klaviyo, so all of it is editable in theme settings.

1. In the theme editor, open Theme settings, then Need Help Finding Something Popup.

Each button has four fields. Call To Action is the label. Element ID is the id used to target the button, which analytics and other scripts rely on, so change it only if you know what reads it. Call To Action Link is the destination. Type selects the button behaviour.

2. Save.

The popup also has a Need Help Popup section that controls where it renders. Both have to be present for the popup to appear.

Edit the product page Offers popup

1. In the theme editor, open Theme settings, then the Klaviyo group.

The MediSpa group of the same settings repeats these fields for MediSpa pages generally, separate from MediSpa product pages.

2. Save.

Get the Klaviyo Popup ID from the form's URL in Klaviyo. It is the short code at the end, such as UBRZB9.

Change the sitewide signup popup

This one needs a developer. The Klaviyo form IDs for the sitewide signup are written into the theme's source rather than into theme settings, and they are mapped per market.

Ask a developer to edit src/components/popup-logic/definitions/sign-up-forms.ts for the main store and sign-up-forms-medispa.ts for MediSpa pages. Both need a rebuild and a deploy.

Business rules

The sitewide signup popup is suppressed on MediSpa pages, and the MediSpa signup popup is suppressed everywhere else. A page counts as MediSpa when its body carries the template-medispa-v2 or medispa-lp class, or when the product's vendor name contains medispa.

Form IDs are chosen per market, falling back to a default entry. A market with no mapping gets the default form rather than no popup.

Verify the change

1. Open the storefront in a private window, because popup frequency is tracked per browser.
2. Wait five seconds for the first popup.
3. Close it and wait fifteen seconds for the second.
4. Confirm no third popup appears.

To watch the manager's decisions, append ?ba_debug=popup-logic to the URL and open the browser console. The manager logs which popup it offered and why one was refused. Full detail is in Debug logging.

If a popup appears at the wrong moment, follow Popup shows at the wrong time.

Developer map