Popups
Overlay
Add Flyout popups for promotions and campaigns. The Signup flyout includes an email signup form for customers.
Add popup
In the editor side panel, click the arrow next to Popups and click (+) Add block. Select Flyout or Signup flyout.
Click the new block to start customizing your popup.
Choose color scheme
Click the Popup block to find the color settings. Select a Color scheme to apply to the popup.
Click Edit to change the colors of the selected color scheme. Editing a color scheme will change all sections that use this color scheme.
To add a new color scheme, go to Theme settings > Colors and click Add color scheme.
Change popup behavior
The Behavior options control when, where, and how often your popup appears. Choose to display the popup
immediately,
after a certain amount of time,
when visitors scroll down the page
You can also specify which pages to show the popup.
Click Signup Flyout block to find settings
Delay appearance
Choose when the popup should appear
Show immediately After 3 seconds After 10 seconds After 30 seconds Default After 1 minute After 2 minutes After scrolling 25% of the page After scrolling 50% of the page After scrolling 75% of the page After scrolling 100% of the page
Frequency
Choose how often the popup should appear
Once Default Every hour Every 6 hours Every 12 hours Every day Every 3 days Every week Every 2 weeks No limit
Show on exit-intent
Display the popup when the user is about to leave the page
Disable for account holders
Hide the popup for logged-in customers
Show on specific page
Display the popup only on a specific page
Target page
Enter the URL of the page where the popup should appear
Set up content
Add and customize the headings, text, and buttons in the popup.
Click Flyout block to find settings
Overline
Add small text above the heading
Heading
Enter the main title for the popup
Default: Join us
Heading size
Adjust the size of the heading
1-8 Default: 3
Text
Add descriptive text for the popup
Default: Signup and get 10% off your first purchase
Text size
Adjust the size of the text
1-8 Default: 3
Button link
Enter the URL for the button
Button label
Enter the text for the button
Default: Subscribe
Dismiss text
Enter the text to close the popup
Default: No thanks
Footer text
Add additional text at the bottom of the popup
Default: By completing this form you are signing up to receive our emails and can unsubscribe at any time
Choose layout
Choose where the popup appears on the page (for desktop) and set the alignment of the content within the popup.
Click Flyout block to find settings
Flyout position
Choose where the popup appears on the screen
Left side center Left side bottom Right side center Default Right side bottom Bottom Bottom left Bottom right Bottom center
Content alignment
Align the content within the popup
Left Center Right
Add image
Display an image at the top of the popup. We recommend an image in square or landscape orientation.
Click Flyout block to find settings
Enable image
Show an image in the popup
Image
Select or upload an image
Image size
Choose the size of the image
Small Medium Large
Add signup tag
When customers sign up, add a tag to the customer in your newsletter list. To support multiple tags, use a comma-separated list (eg. "newsletter, promotion").
You may want to use signup tags to track which promotion or campaign your customers have signed up for.
Click Signup Flyout block to find settings
Tags
Enter tags to apply to customers in your newsletter list
Set up signup sticky tab
For the Signup Flyout, the Sticky tab displays a small floating banner with text that re-opens the popup when clicked.
The popup does not automatically give 10% off. This default text is only a placeholder for your own text.
See Shopify's discounts guide ↗ to learn how to set up discounts and offer discount codes.
Click Signup Flyout block to find settings
Enable tab
Show a sticky tab to open the popup
Text
Enter text for the sticky tab
Default: Get 10% Off
Text size
Adjust the size of the tab text
1-8 Default: 4
Tab position
Choose where the tab appears on the screen
Left side center Left side bottom Right side center Default Right side bottom Bottom Bottom left Bottom left (floating) Bottom center Bottom right Bottom right (floating)
Color scheme
Select a set of colors to apply to the tab
Last updated