Flyout pop-up
The flyout is a small panel that slides in to share an offer or collect emails. It can show after a delay, after scrolling, or when a visitor is about to leave, and a side tab reopens it after it is closed.
How to set it up
Step 1: Decide when it shows
- Under Overlays, click Flyout. While it is selected, the preview shows it.
- Pick Show the flyout (1): after a delay, after scrolling, when leaving the page, or only from the side tab.
- Choose Show again after closing (2) and on which Pages it shows.
Step 2: Add the content
- Add blocks: heading and text, an Email signup, a Discount code customers can copy with one tap, or an app block.
- For a discount, create the code first in Shopify admin > Discounts.
Step 3: Style it
- Choose the Position, Size, an optional Image and the color scheme. Turn on the Side tab to let customers reopen it.
Settings reference
Flyout
| When to show | |
|---|---|
| Show the flyout | Leaving the page is detected on desktop. On mobile it falls back to scrolling. Options: After a delay, After scrolling, When leaving the page, Only from the side tab. |
| Delay | Slider. |
| Scrolled distance | Slider. |
| Show again after closing | Options: Next visit, 1 day, 1 week, 1 month. |
| Pages | Options: All pages, Home page only, Product pages only. |
| Hide for signed-in customers | Turns this on or off. |
| Side tab | |
| Show side tab | A small tab on the edge of the screen reopens the flyout after it's closed. |
| Tab label | |
| Tab style | Options: Edge tab, Floating card, Pill. |
| Show a close button on the tab | Hides the tab for the rest of the visit. |
| Layout | |
| Position | Options: Bottom left, Bottom right, Center of the screen. |
| Size | Options: Small, Medium, Large. |
| Image | An image from your files. |
| Image position | The image moves to the top on mobile. Options: Top, Side. |
| Content alignment | Options: Left, Center. |
Email signup
| Button label | |
|---|---|
| Thank you message | |
| Small print |
Discount code
| Code | |
|---|---|
| Label |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Leaving the page is detected on desktop; on mobile it falls back to scrolling.
- Subscribers are added to your customer list with the tag newsletter.
- Customers who close it won't see it again until the time you choose has passed.