Popup form settings

The following settings determine the appearance and behavior of your popup forms. You can configure these settings when you create a form, along with the settings that apply to both popup and inline forms.

Form display setting

The Form display setting determines how the form displays on your store.

Settings for the form display section for popup forms.
Setting	Description
Floating	Displays the teaser and the form as a floating section displayed on your storefront, and lets you choose the form's position on your store.
Overlay	Displays the form in the middle of the page, with an Overlay Color applied to the rest of the storefront.

Teaser settings

The Teaser settings determine when the teaser for your form is displayed. The teaser section is a small pop-up that displays on your store. If a customer clicks on the teaser, then the form is opened.

Settings for the teaser section for popup forms.
Setting	Description
Show	Determines when the teaser section is shown to customers. First (before the form): Displays the teaser section before the form. First (before the form) and if the customer closes the form: Displays the teaser section before the form, and displays the teaser if the customer closes the form. If the customer closes the form without subscribing: Displays the teaser section if the customer closes the form without completing it. Never: Hides the teaser section from all customers. If a customer closes the form without completing it, then they can't access it again.
Position on your store	Determines where on your store the teaser is displayed. The (rotated) display options display the teaser section on its side.
Title	The text that displays on the teaser section.

Styling settings

The Styling settings determine the appearance of your form. A warning displays if you select colors that don't work well together, don't have enough contrast, or might be difficult to read.

In the Brand colors section of the Forms editor, you can find and select colors that you've added as brand colors using the color picker.

Settings for the styling section for popup forms.
Setting	Description
Colors	Change the color of the form's background, text, active field, button label, and error messages to match your brand and theme.
Form fields	Select white or transparent.
Typography	Choose the font that you want to use for your title and body text.

Image settings

The Image settings determine whether an image is displayed in your form, and affects the image's placement and appearance.

Settings for the image section for popup forms.
Setting	Description
Image option	Where the image is displayed on your form.
Image	This field is displayed if you select Background image, Image left, or Image right. Click Add image to upload an image from your device.
Scale	This field is displayed if you add an image to your form. You can select how the image is displayed.
Image opacity	This field is displayed if you select Background image. You can select the opacity of the image by using the slider. At 100, only the image that you've uploaded is displayed. Reducing the opacity shades the image with the background color in the Colors section.

Behavior settings

The Behavior settings determine when and where your form is displayed.

Settings for the styling section for popup forms.
Setting	Description
Devices	Choose whether you want the form to display on all devices, only on desktop devices, or only on mobile devices.
Pages	Choose if you want the form to display on all pages, or only specific page types. For example, you could display a form on only Collection or Product pages.
Trigger	You can choose to have the form display on the first, second, or third page view either immediately or after a delay. In this section, you can also check Show form when visitors attempt to leave page (Desktop only). If this checkbox is selected, then the form displays if a visitor moves their cursor towards the address bar.