Docs / Recipes

Recipe: an exit-intent offer

When a shopper goes to leave your store, an exit-intent offer gives you one last chance to keep them. In this recipe you will build a popup that stays hidden until a visitor moves to close the tab (or, on a phone, scrolls back up fast), then shows a discount code and a button to keep shopping. The finished result is a single offer screen that appears at the moment of leaving, not before.

This recipe assembles the popup by hand. There is no ready-made “exit-intent” template, so you start from a blank popup and turn on the exit-intent rule yourself.

Before you start

Two things matter most.

First, the coupon you show is display only. SupaPop shows the exact code you type, but it does not create a working discount at checkout. You must create a matching discount code in Shopify first (in your Shopify admin, under Discounts), using the same code you plan to display. If the codes do not match, the shopper copies a code that does nothing.

Second, for an overlay popup to appear on your storefront, the SupaPop app embed must be enabled in your theme editor under App embeds. If it is off, your popup can be live in the app but still invisible to shoppers.

Steps

  1. Create the discount in Shopify. In your Shopify admin, create a discount code (for example, SAVE10). Note the exact spelling. You will type this same code into SupaPop.

  2. Create the popup. On the Popups page, click Create popup. In the “Create a new popup” window, click Start from scratch (described as a blank 3-step popup). SupaPop then asks where the popup will appear; choose the standard storefront popup option. This gives you a new draft popup with a capture step, a survey step, and a thank-you step. For a pure offer screen, you will trim this down.

  3. Open the editor. On the popup detail page, click Edit design to open the section editor. Inside, remove the sections and steps you do not want. For a simple offer, keep one step. If you want to collect an email in exchange for the code, leave the form section on the capture step (the form section can only live on a capture step). If you just want to show a code and let shoppers keep browsing, you can remove the form.

  4. Add the coupon. On your offer step, click + Add section and choose Coupon Code. In the panel, type your code into the Coupon code field, using the exact code you created in Shopify. Pick a Style (Outlined, a dashed border, or Filled, a solid background), set your colors, and leave Show copy button on so shoppers can copy the code in one click.

  5. Add the button. Click + Add section again and choose Button. Type the button Text (for example, “Shop the sale”). For Button action, choose Open URL and paste a collection or product link into Link URL so the button sends shoppers somewhere useful. If you would rather it just dismiss the offer, choose Close popup instead.

  6. Publish your design. Click Publish changes. Editor edits are saved as a draft until you publish, so this step is what makes your new layout the live version.

  7. Turn on exit intent. Go back to the popup detail page and click Configure targeting rules. Under “When to show”, check Show on exit intent. On desktop this fires when the cursor moves toward the close or back button. On mobile it fires when a visitor scrolls back up quickly after reaching at least halfway down the page. Click Save targeting rules. Targeting is saved separately from your design, so do not skip this save.

  8. Go live. Return to the popup detail page and click Go live. If your theme app embed is off, you will see a banner prompting you to enable it. Follow that link, switch on the embed, and your offer is ready.

Make it yours

Limit where it shows. On the targeting page, use the Page rules field to control which pages the offer can appear on. Use /products/* for product pages only, /collections/* for collections, or * for everywhere. Separate patterns with commas.

Target first-timers. Set Visitor type to “New visitors only” so returning shoppers are not nagged with a welcome discount they have already seen. SupaPop tracks new versus returning per browser, so someone who clears their browser data or switches devices may be treated as new again.

Stack a backup trigger. You can leave Show on exit intent on and also pick a time delay or a scroll depth. Whichever happens first shows the popup. With exit intent on, leaving the delay on “Immediately” is fine: the popup still waits for the leaving motion instead of popping right away.

Control how often it returns. In the editor’s container settings, the Days before re-showing to subscribers field sets how long to wait before showing the offer again to someone who already submitted. For a popup, the default is 30 days. Try 7 for a short campaign.

Troubleshooting

The code does not work at checkout. The coupon section only displays text. Create a matching discount in Shopify with the same code, exactly.

Nothing pops on desktop while testing. Exit intent waits for the leaving motion. Move your cursor up and out of the top of the window to trigger it.

It is live but shoppers do not see it. Two separate things must both be done: click Publish changes in the editor, and click Go live on the detail page. Then confirm the SupaPop app embed is enabled in your theme. For more on rules, see the targeting guide.