Popup forms

A popup form is displayed as content that floats or appears as an overlay above your store's content.

After you create a popup form, you can change your form settings. These settings determine how and when your form is displayed.

The Form display setting determines how the form is displayed 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. Select the section's location on your storefront from the Position on your store menu.
OverlayDisplays the form in the middle of the page, with an overlay applied to the rest of the storefront. To select the color and opacity of the overlay, click Overlay Color.

The Discount setting determines whether a discount code is provided to your customer when they complete your form and reach the success step. To add a discount code, click Select discount, and then select an existing discount code or create a new discount code.

The Teaser settings determine when the teaser for your form is displayed. The teaser section is a small pop-up that diplays 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 in your storeDetermines where on your store the teaser is displayed. The (rotated) display options display the teaser section on its side.
TitleThe text that appears on the teaser section.

The Form settings determine the content of your form.

Settings for the form section for popup forms.
SettingDescription
TitleThe title of the form, where you can provide an incentive or a call to action to join your newsletter. Maximum of 50 characters.
ContentThe text displayed below the title. In this field, consider offering an incentive for signing up, as well as keeping it simple. Maximum of 100 characters.
Form InputsThe information to be captured by the form. By default, the form captures the customer's first name and email address. To collect additional information, click Add new field. You can add or remove any of the following additional fields: First name, Last name, Birthday, Phone, or Email. To change the details of an input, such as whether the field is required to complete the form, click the field's name. To remove a field, click the removal icon (⊖) next to the field's name.

Your form must include either Email or Phone as a required field.

To create custom input fields for your form, click Add new field.
Button labelThe text displayed on the submit button. The button should have a clear call to action, such as Sign Up, Subscribe, Submit, or Get my discount. Maximum of 25 characters.
Content disclaimer (optional)Your disclaimer can include information such as telling your customers that by submitting their email address, they agree to receive marketing emails. Consider adding links to your store's terms and conditions or privacy policy. Maximum of 100 characters.

Custom input fields

Custom input fields are stored as a metafield. When you add a custom field to your form, you need to give the corresponding metafield a name. After a metafield is saved, you can find it in your customer data metafields or company data metafields in your Shopify admin at Settings > Custom data > Customers. You can use this data to assess B2B company requests or to create customer segments.

The custom field can be any of the following data types:

  • Single-line text: A short text field appropriate for a single sentence.
  • Dropdown list: A list of options presented as a dropdown menu that the user can select one option from.
  • Radio buttons: A list of options presented as a series of buttons that the user can select one option from.
  • Multi-line text: A longer text field appropriate for a paragraph.
  • Multiple choice: A list of options presented as a series of checkboxes. Unlike the Dropdown list and Radio buttons, users can select more than one response.
  • Date: A specific date.
  • Number: A single number.

Optionally, each type of field can have specific requirements set for it.

For example, if you want to create a field to capture the shoe size of your customers, then you can select the Number field and name the metafield Shoe Size. You can then set the field to accept values from 1-16.

The Success settings determine the content that's displayed for your customer after they successfully complete a form.

Settings for the success section for popup forms.
SettingDescription
TitleThe title of the success section for the form, where you can provide confirmation that a customer has successfully signed up to your email list. For example, Here's your discount, VIP access starts now, or Thanks for signing up!. Maximum of 50 characters.
ContentThe body of the success section for the form, where you can provide more details or highlight the benefits of joining your email list. For example, You're now the first to know about the latest drops and special offers.

The Styling settings determine the appearance of your form. A warning is displayed 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.

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.

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 appear on all devices, only on desktop devices, or only on mobile devices.
PagesChoose if you want the form to appear 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 is displayed if a visitor moves their cursor towards the address bar.

The Tags setting determines whether tags are added to customers that successfully complete the form. To add a tag, enter it in the Find or create tags field.

The Automation setting lets you integrate your form with an existing marketing automation in Shopify Flow. You can connect to an existing automation, or create a new one.

Learn more about creating marketing automations in Shopify.

Ready to start selling with Shopify?Try it free