Modal vs Popup vs Overlay: What's the Difference?
What separates a modal, a popup and an overlay, how to make a modal accessible, and which one an online store should use when.
In this article
In short
A Shopify discount popup shows a code or offer, like 10% off the first order, while a shopper browses your store. It turns hesitant first-time visitors into buyers. Describe the popup to the OptiMonk agent, set the code and the audience, review both versions, then switch it on.
A discount code only works if the shopper sees it, keeps it and still has it at checkout. Most codes get lost somewhere on that road.
The shopper closes the tab before the code shows up. They copy it, browse for ten minutes and forget it. Or the one code you gave everyone ends up on a coupon site, and strangers use it on full-price orders.
A well-set popup closes all three gaps: it shows the code at the right moment, gives each shopper their own, and puts it on the order for them.
What is a Shopify discount popup?
A Shopify discount popup is a popup on your store that hands the shopper a discount code, often in exchange for an email address. The best setups create the code in Shopify, give every visitor a unique one and apply it at checkout, so nobody has to copy or type anything.
There are two kinds. One asks for an email first and reveals the code after sign-up; the other shows the offer straight away. The trigger decides when it appears: a few seconds after landing, after some scrolling, or when the visitor is about to leave.
A discount is worth showing to a first-time visitor, a shopper about to abandon a cart or a returning customer you want back. It also costs you margin, so show it to the right people only; our discount strategy guide covers how to decide.
Before you start: create the code in Shopify (or let the popup do it)
If every shopper gets the same code, that code has to exist in your Shopify store before the popup can hand it out. Need the code first? See how to create Shopify discount codes and share them as links.
If you want a unique code per visitor, you can skip that part: OptiMonk creates the codes in your connected Shopify store when the popup shows. The same goes for a fixed code you haven't made yet, as you'll see in step 4.
How to create a discount popup on Shopify
Six steps take you from an empty store to a tested Shopify discount popup. Steps 2 to 5 follow the names you'll see in the app: Design, Targeting, Coupon, Review and Build it.
Step 1: Install OptiMonk from the Shopify App Store
Add OptiMonk from the Shopify App Store, where it has 4.8 stars from 450+ reviews. Installing the app connects your store, and the Shopify code features need that connection:
- Discount codes shows a code in the popup and checks it against your store.
- Unique codes gives every visitor a code of their own.
- Auto-apply codes puts the code on the order at checkout, so there's nothing to paste.
Step 2: Describe the discount popup in one sentence (Design)
OptiMonk is an agentic popup builder, so you don't start from a blank canvas. You write one sentence, for example: "A welcome popup with 10% off the first order for new visitors, in exchange for an email."
The AI agent asks a few questions about your store, the offer and the moment. It reads your brand colors and fonts from your site, and in about a minute it draws four concepts. Pick one, or pick two and OptiMonk runs them as an A/B test.
Each popup gets its own mobile version, built for a phone screen. Want a change? Ask the agent in plain words: "Make the button orange" or "Shorten the headline."
One copy rule matters more than the rest: the button should say what the visitor gets, like "Get my 15% off", not "Submit". More in these CTA button examples.
Step 3: Set the targeting (when, who, how often)
The agent proposes a targeting plan with the design; in the Targeting step you check and adjust it. Three choices shape a discount popup:
- When: a time delay, scroll depth or exit intent, on desktop and through mobile triggers on phones.
- Who: new visitors, people who aren't on your list yet (subscriber recognition), or shoppers by cart value.
- How often: for example "Max 1 time per visitor" and "Stop showing after visitor converts", so a shopper who already has the code doesn't see it again.
Not sure about the moment? Our guide to popup timing shows when to show it for each type of visitor.
Step 4: Choose how the code works (Coupon)
The Coupon step decides what code the shopper gets and whether anyone else can use it. There are three options:
| Option | What the shopper gets | Use it for |
|---|---|---|
| Fixed code | The same code everyone else sees | Newsletter or sitewide offers |
| Unique codes | Their own code from a pool you upload (.txt or .csv) | First-order offers that shouldn't leak |
| Shopify coupon (connected Shopify store) | A single-use code created in Shopify when the popup shows, with your prefix and an expiry that starts when they see it | Exit-intent and time-limited offers |
With a fixed code that doesn't exist in Shopify yet, click Create it in Shopify and OptiMonk makes it for you.
Then turn on Auto-apply codes. On a connected Shopify store, the code goes onto the order by itself at checkout. For a fixed code, that needs the code to exist in Shopify, and it isn't available for scratch cards.
Step 5: Review it, then build and switch it on (Review → Build it)
In the Review step you see the whole popup with its final code, on desktop and on mobile. Check the offer, the code and who will see it.
Click Build it. Then you switch the popup on yourself, and it starts showing on your store.
Step 6: A/B test the offer
Your first offer is a guess. Test it against a different one: 10% off against a fixed amount off, a discount against free shipping, or the popup against a Control (no popup) group that sees nothing.
A variant A/B test shows which offer brings more sign-ups and revenue. A holdout test shows whether the popup adds orders at all, or just gives money off to people who would have bought anyway.
OptiMonk declares a winner by default at a 95% chance to win, after at least 200 conversions and 3 days, then stops the other variants. You can also ask the agent for test ideas.
Which discount popup should you show, and when?
Match the offer to the moment. A first-time visitor, a shopper leaving a cart and someone on a product page each need a different trigger and a different code.
| Moment | Trigger and who | Code | Setting |
|---|---|---|---|
| First visit | A few seconds after landing; new visitors who aren't subscribers | Unique code, one per customer | Unique codes + Auto-apply codes |
| About to leave | Exit intent on desktop, mobile exit signals | Unique code with a short expiry | Shopify coupon with an expiry |
| Game moment | Lucky wheel or scratch card | One code per prize | Discount codes per prize (scratch card: no auto-apply) |
| Free shipping | First order, or a cart below your threshold | Free shipping code | Cart value targeting |
| Product page | Visitors viewing a product or collection | Amount off that product | A code that applies only to that product in Shopify |
For the first visit, see our welcome popups; for the last chance, how to build an exit-intent popup; for games, these lucky wheel and scratch card popups. Still deciding on the offer? Read which code to offer at the cart, browse these coupon examples or start with the common discount codes.
Shopify discount popup examples from the OptiMonk Popup Library
Each of these popups was designed by the OptiMonk agent for a real brand, one for every moment in the table. More are in the welcome discount collection of the Popup Library.
Dreamscape Editorial (designed for Casper)
A first-visit offer: sleep tips and 15% off the first purchase for an email. Give it a unique code limited to one per customer, and auto-apply it, so the shopper never has to find it again.
The Full-Bleed Vibe (designed for Tangle Teezer)
"Wait, your hair called." is written for exit intent, and the fullscreen layout makes the last offer hard to miss. A Shopify coupon with a short expiry fits: the code is single-use and the clock starts when the shopper sees it.
Flavorful Burst (designed for SodaStream)
A lucky wheel with seven prizes, from 5% off to free syrup. Every slice needs its own code in Shopify; the free shipping slice, for example, is a free shipping code. The decline link, "I don't want a discount today.", keeps the exit polite.
The Science of Shine (designed for Olaplex)
No percentage at all: the offer is free shipping on the first order. In Shopify, that's a free shipping code limited to one per customer, so it stays a first-order perk.
Elevated Allyn (designed for Dagne Dover)
This one sells a single product: 15% off the Allyn Tote. Show it only to visitors on that product page (page targeting), and set the code in Shopify to apply only to that product.
Shopify discount popup FAQ
Do discount popups annoy customers?
Not when they're targeted. Show the popup once per visitor, hide it from people who already subscribed, and make it easy to close. Set frequency limits, and turn on the User Experience Protector so a visitor doesn't get several campaigns in a row.
How do I measure a discount popup?
The campaign dashboard shows submits, submit rate, impressions and revenue influenced. Reports break the results down by traffic source, device, and new versus returning visitors. To see the real extra revenue, run a holdout test against visitors who saw no popup.
Can a Shopify popup create the discount code for me?
Yes, on a connected Shopify store. For a fixed code, click Create it in Shopify in the Coupon step. For a code per visitor, choose Shopify coupon, and a single-use code is created in your store each time the popup shows.
Does the discount apply automatically at checkout?
It can. With Auto-apply codes on, the code goes onto the order at checkout without the shopper typing it. It works with fixed codes that exist in Shopify and with Shopify-generated codes, but not with scratch cards.
Does Shopify have a built-in discount popup?
Not in the theme itself. Shopify makes a separate app, Shopify Forms, that builds popup or inline sign-up forms, and its App Store listing says you can offer a discount with them.
Your first discount popup is one sentence away
Write one sentence for the agent: who should see the code, when, and what they get. Then review the popup and switch it on.
Free to start. No credit card.
