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.
SettingDescription
FloatingDisplays the teaser and the form as a floating section displayed on your storefront, and lets you choose the form's position on your store.
OverlayDisplays 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.
SettingDescription
ShowDetermines 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 storeDetermines where on your store the teaser is displayed. The (rotated) display options display the teaser section on its side.
TitleThe 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 app, you can find and select colors that you've added as brand colors.

Settings for the styling section for popup forms.
SettingDescription
ColorsChange the color of the form's background, active field, button label, and error messages to match your brand and theme.
Form fieldsSelect white or transparent.
TypographyChoose 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.
SettingDescription
Image optionWhere the image is displayed on your form.
ImageThis field is displayed if you select Background image, Image left, or Image right. Click Add image to upload an image from your device.
Image opacityThis 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.
SettingDescription
DevicesChoose whether you want the form to display on all devices, only on desktop devices, or only on mobile devices.
PagesChoose if you want the form to display on all pages, or only specific pages.
TriggerYou can choose to have the form display on the first, second, or third page view either immediately or after a 10 or 30 second delay.

In this section, you can also choose to select the Show form when visitors attempt to leave page (Desktop only) checkbox. If this checkbox is selected, then the form displays if a visitor moves their cursor towards the address bar.

Ready to start selling with Shopify?Try it free