How to set up the teaser button

The teaser is a small floating button that appears in the corner of your storefront. It gives visitors a way to open your popup on demand – either before the popup has appeared or after they've closed it.

Where to find it

1. Go to the Campaigns page and click Edit design on your campaign
2. Go to the Content tab and scroll down to the Teaser section

When the teaser shows

Choose when the teaser button appears on your store:

• Show before displaying campaign – shows the teaser before the popup has triggered. Visitors can click it to open the popup early.
• Show after campaign is closed – shows the teaser after the visitor has dismissed the popup. Gives them a way to get back to the offer.
• Show before and after campaign is closed – shows the teaser at all times (most common choice).
• Don't show teaser – hides the teaser entirely. Only the popup itself will appear based on your display rules.

What you can configure

Icon – choose an icon for the teaser button: None, Gift, Discount, Sale, Envelope, or Spin wheel. Only available for the Flying button style, not Tab.

Text (optional) – add text next to the icon (e.g., "Get 10% off"). Rich text editor. When Icon is set to None, this becomes a required Text field.

Style – the visual style of the teaser: Flying button or Tab.

Position – where the teaser appears on the page. Flying button has None, Bottom left, Bottom right, Top left and Top right. Tab has None, Left and Right. None hides the teaser on that device – useful with the mobile setting below to show the teaser on desktop only, or on mobile only.

Offset – fine-tune the teaser's position with top/bottom and left/right pixel offsets.

Set different position and offset for mobile – check this box to set a separate position and offset for mobile devices. Useful when the teaser overlaps with other elements on smaller screens.

Z-index – controls the stacking order of the teaser relative to other page elements. Default is 100000. Only change this if the teaser is hidden behind other elements on your storefront.

Show close button – check this box to let visitors dismiss the teaser.

Things to know

The teaser is styled separately. Teaser colors (background, text, close button) are configured in the Styles tab, in the Teaser section of the Colors card.

Test on mobile. The teaser can overlap with other floating elements (like chat widgets or Shopify's cookie banner) on mobile. Use the Set different position and offset for mobile checkbox to adjust placement for smaller screens.

If you're not showing the teaser, visitors can only reach the popup through your display rules. Make sure your triggers (time delay, scroll depth, exit intent) are set up so visitors don't miss the popup entirely.

Embedded campaigns don't have a teaser. The teaser isn't available for Opt-in embedded or Gamified embedded campaigns.