Popups

A popup opens a form over the page: a newsletter signup after a few seconds, a feedback form when someone is about to leave, or a slide-in in the corner.

Set up a popup

1. In the form editor, set Show on your store as to Popup.
2. On the Display tab, configure the popup (all settings below).
3. Save the form to activate it.
4. Switch on the Popup forms app embed in your theme: select Open app embeds in the Display tab, turn Popup forms on and save the theme. You do this once for all popup forms.

The app embed shows the forms whose popup is switched on in Workflow Forms, with the trigger, pages and frequency set there. One popup shows per page view.

Look

Setting	Options
Style	Centered window, Slide-in, bottom left, or Slide-in, bottom right
Dim the page behind the popup	On or off, with Dimming from 0 to 90 %
Image URL (optional)	An https link, for example from Content > Files
Image position	No image, Left, Right or Background
Image description (for screen readers)	Alternative text for the image

When it opens

Open	Setting
After a delay	Seconds (0 to 600, 5 by default)
After a number of page views	Page views (2 by default)
After scrolling	Scrolled (percent of the page, 50 by default)
When leaving the page (desktop)	Opens when the mouse leaves the window. On phones the popup does not open with this setting

Where

• Pages - All pages, Only these pages, or All pages except these.
• Page paths - one per line, for example /products/* or /pages/contact. * matches anything. Language prefixes like /de are ignored, so one path covers every language. Up to 20 paths.
• Devices - All devices, Desktop only or Phones only.

How often

• After closing, show again after (days) - 7 by default. 0 shows it again on the next page view.
• Never show again after the visitor sent the form - on by default.

Whether a visitor closed or sent a popup is remembered in that visitor's browser. A visitor who clears their browser data or uses another device can see the popup again.

Teaser button

A teaser is a small button in a corner of the page that opens the popup when clicked.

• Teaser - No teaser; Always, also before the popup opens; or Only after the popup was closed.
• Teaser position - Bottom left or Bottom right.
• Teaser text - empty uses the form title. It can be translated per language.

Colors and branding

A popup uses the form's branding and your shop branding, including Popup background and Popup overlay. See Branding.

The Popup forms app embed has a few settings of its own in the theme editor, which win when filled in: Popup background, Popup text, Corner radius, Button style and the two button colors.

Good to know

• The popup can be closed with its close button, with the Escape key or by clicking the dimmed page.
• The editor's preview shows the popup when the Popup pill is selected. Use Test like a visitor to try the form itself.
• A popup form is shown in the visitor's storefront language like any other form. See Languages.

Not opening?

• The Popup forms app embed must be on in the theme that is live.
• The form must be saved with Popup selected, and Form is live must be on.
• Check Pages, Devices and the frequency settings: if you closed the popup yourself, it rests for the days you set. Try a private browser window.
• Only one popup shows per page view; another popup form may have opened first.

Next steps

• Add a form to your theme - show the form inline instead.
• Branding - popup colors.
• After sending: message, discount code and redirect - show a discount code after a signup.