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.
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.
Setting | Description |
---|---|
Show | Determines when the teaser section is shown to customers.
|
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.
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.
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.
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. |