Docs / Recipes

Recipe: a welcome discount popup

A welcome discount popup greets new shoppers, asks for an email, then reveals a first-order discount code. The result: a two-step popup where step one captures the email and step two shows the code with a “Copy” button.

This recipe uses the built-in Coupon Capture Popup template so you have a working popup in a few minutes, then shows you how to make it yours.

Before you start

Two things have to be in place for the discount to actually work:

  • Create the discount in Shopify first. SupaPop does not create or check the code. The popup only displays the text you type. Go to your Shopify admin and create a discount code (for example WELCOME15), then use that exact code in the popup. If the text does not match a real Shopify discount, shoppers get an invalid code at checkout.
  • Connect Klaviyo if you want captured emails pushed to Klaviyo. You will need your Klaviyo private API key (it starts with pk_).

Steps

1. Create the popup from the template

On the Popups page, click Create popup. In the “Create a new popup” window, open the Email & SMS tab and choose the Coupon Capture Popup card (tagged Ready-made). It is described as “Simple email capture with 15% off coupon reveal, countdown timer, and shop button.”

Next you will see the “Where will visitors see this?” window with three cards. Pick the first card, Popup overlay on your storefront. This is the one that makes the popup appear over your store. (The second card, “Standalone page (own URL)”, builds a separate page instead and will not overlay your store, so avoid it for a welcome popup.)

Your new popup is created as a draft. It already defaults to showing after 3 seconds on all pages, so the basic timing is set for you.

2. Set your discount code

On the popup detail page, click Edit design at the top. The template has two steps, shown as tabs labeled Email Capture and Thank You.

Open the Thank You step and select the Coupon Code section. In the right panel, replace the Coupon code field (it ships with WELCOME15) with the exact code you created in Shopify. Leave Show copy button on so shoppers can copy the code in one click. You can also switch the Style between outlined and filled and adjust colors to match your brand.

3. Adjust the copy (optional)

The capture step shows “Get 15% Off” and a short line of supporting text, with a Get My Code button on the email form. The Thank You step shows “Here’s your code!” and a Shop Now button. Edit any of this text so it matches your offer and voice.

A note on the Shop Now button: it simply closes the popup. It does not add the discount to the cart. The shopper enters the code at checkout themselves.

4. Publish your changes

Editor edits are saved as a draft. When the popup looks right, click Publish changes. You will see a “Published to storefront” message. Until you publish, a live popup keeps showing the older content.

5. Set up targeting

Back on the popup detail page, find the “Targeting” section and click Configure targeting rules.

  • Show popup after: the template already uses 3 seconds. You can choose another fixed value (Immediately, 3, 5, 10, 15, 30, or 60 seconds).
  • Visitor type: leave it on “All visitors” or choose “New visitors only” if the offer is for first-time shoppers.
  • Page rules: leave it as * to show on every page, or narrow it (for example /products/* for product pages only).

Click Save targeting rules.

6. Connect Klaviyo (optional)

If you want captured emails synced to Klaviyo, go to the Settings page. In the “Klaviyo Connection” section, paste your private API key (starting with pk_) and click Connect Klaviyo. A “Connected” badge appears once it saves. (If you have connected before, the button reads Update API Key instead.)

Once Klaviyo is connected, an email captured by the popup is pushed to Klaviyo as a profile and is also saved in your SupaPop records.

The Settings page also has a Default Klaviyo List ID field in the “Defaults” section. Automatic subscription of subscribers to a specific Klaviyo list is driven by per-answer routing rules set on quiz or survey answers, so a plain email-only popup does not route to a list on its own. If you need every subscriber added to a particular Klaviyo list automatically, contact support to confirm the current list-routing behavior before relying on it.

7. Go live

On the popup detail page, click Go live (top right).

One more thing has to be true for shoppers to see it: the SupaPop app embed must be enabled in your theme. If it is off, you will get a warning that the popup is live but won’t display, with an “Enable in Theme Editor” link. Click it, turn on SupaPop under “App embeds” in your theme editor, and you are done.

Make it yours

  • Different discount amount. Change the discount in Shopify, then update the text on the capture step and the code in the Coupon Code section to match.
  • Capture a name too. In the Form section you can add a text field and map it to a Klaviyo profile attribute like First Name using the per-field Klaviyo property picker (available on text fields). You cannot remove the last contact field (email or phone), since the popup needs a way to identify the subscriber.
  • Trigger on exit. Turn on Show on exit intent in targeting so the popup also appears when a shopper looks ready to leave. Whichever trigger fires first wins.
  • A real time limit. The countdown timer on the Thank You step is for show only. It does not expire the discount. If you want a true deadline, set an end date on the discount in Shopify.

A few things to know

  • Captured emails go to your SupaPop records and, when Klaviyo is connected, to Klaviyo as a profile. They do not go to your Shopify customer list, and the email does not set Shopify marketing consent.
  • A popup shows on your store only when all three are true: it is live, your latest edits are published, and the SupaPop app embed is on.
  • For more on triggers and page rules, see the targeting guide.