How do I make a popup for my Shopify store?
It opens as a working popup in its own design, running the real storefront code. Your brand colour and your own words are edits to it from there.
It has no idea who to show itself to.
What you have is a picture of a popup: a template, a brand colour and three lines of copy, running the real storefront code against nobody — it does not know who to show itself to, when to fire, how often, or where an email address should land, and it is not on your store until it is installed and targeted.
How it's calculated
A popup maker is a tool that assembles a storefront popup from parts you pick rather than from code: a ready-made template, one brand colour, your own headline and your own button label, rendered as a popup you can watch working.
Contrast floors: WCAG 2.1 success criteria 1.4.3 (normal text, 4.5 to 1) and 1.4.11 (non-text contrast, 3 to 1). The templates are the ones in the Nudgesmart library, rendered by the same storefront code a merchant ships; nothing on this page is a measurement of any store.
Four choices go in. Two contrast ratios come out, and only one of them can actually fail.
- Template
- The starting layout and mechanic. The ten offered here are one of each the library carries — a video popup, a multi-step flow, a fullscreen announcement, a countdown, a spin wheel, a pick-a-present, a minimalist opt-in, a survey, a scratch card and a notification bar — named exactly as the template gallery names them. It is not a skin: the mechanic decides what the shopper can actually do, and no amount of recolouring turns one into another.
- Brand colour
- One hex value. It is not pasted over every colour in the design — the template keeps its paper, its ink and its photography, and only the accent family moves, each member keeping its offset in hue, saturation and lightness so a button, its hover shade and its border stay three different colours.
- Headline and button label
- The two lines a shopper actually reads. They are plain text here: any styled fragment the template shipped with is replaced wholesale, because a surviving half-styled span would be a colour you never chose and could not remove.
- Label contrast
- The ratio between the button label and the fill behind it. White or near-black is picked automatically, whichever reads better, and 4.5 to 1 is the WCAG 1.4.3 floor for normal text. Worth knowing what this check cannot say: the better of white and black always clears about 4.58 to 1 on any colour that exists, so this reading is informative rather than a gate.
- Fill contrast
- The ratio between the brand fill and the white paper it sits on. WCAG 1.4.11 asks for 3 to 1 for a control, and this is the check that actually fails: a pale sand or a soft pastel lands near 1.2 to 1, at which point the button has no edge and reads as a block of text.
- The suggested fill
- When the fill fails, it is darkened or lightened along its own hue until it clears — the move a designer makes by hand. The hue and the saturation relationship survive, so it still reads as the same brand colour rather than a colour nobody picked.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Worked examples
Illustrative brand colours on real templates, not customer data. Every reading below is produced by the same function the maker above runs, so the two cannot disagree.
| Scenario | Template | Brand fill | Label | Fill on paper | Verdict |
|---|---|---|---|---|---|
| Multi-step welcome offer, deep green brand | Maison — Gold | #2F6F4E | 6.0:1white | 6.0:1 | Legible as it stands |
| Spin wheel on a seasonal sale | With Love — Rose | #B03A2E | 6.0:1white | 6.0:1 | Legible as it stands |
| Countdown on a 48 hour promotion | The Drop — Noir | #1F4F8F | 8.2:1white | 8.2:1 | Legible as it stands |
| Video popup, black and white brand | Fashion — Cinema Black | #111111 | 18.9:1white | 18.9:1 | Legible as it stands |
| Fullscreen announcement, pale sand brand | Fashion — Fullscreen Black | #F4E7C3 | 15.3:1near-black | 1.2:1 | The fill needs a nudgetry #9C947D |
| Exit survey, muted violet brand | Exit Intent Survey | #5B4B8A | 7.5:1white | 7.5:1 | Legible as it stands |
The pale sand row is the refusal. Its button label reads at a comfortable ratio, because near-black on a pale fill always does — and the fill itself separates from white paper at 1.2 to 1, so the button has no edge at all. That is the failure a brand hex produces most often, and it is the one a label-only check never sees.
What this number doesn't tell you
This is a picture of a popup, not a popup on your store
Nothing here is installed, targeted or connected. The frame runs the real storefront code, which is why it behaves like the real thing, but it is running on this page against no shopper, no cart and no email list. Getting it onto a store is a separate job with separate decisions.
Contrast is legibility, and legibility is not design
Both checks here are arithmetic on two colours. They have no opinion on whether the headline is any good, whether the offer is worth interrupting someone for, or whether the template suits what you sell. A popup can clear every ratio on this page and still be the wrong popup.
The colour move is relative, so some templates move more than others
Only the accent family travels with your brand colour. A template built around one strong accent changes a lot; a photographic template with a small button changes very little. Measured across the ten offered here, one hex moves between 5 and 100 colour values depending on the template and the variant. That is deliberate, and it means the same hex produces a genuinely different amount of change across the picker. Templates where it would have moved nothing at all are not offered.
It says nothing about when the popup should fire
Who sees it, after how long, on which page, how often, and what happens on the second visit are the decisions that separate a popup people tolerate from one they do not. None of them is a design choice and none of them appears anywhere on this page.
The preview is one viewport
A phone at 390 by 844. Desktop is a different layout with different line breaks, and a headline that fits here can wrap badly there. Treat the frame as a check on the mobile popup, which is the common case, not as proof the desktop one is fine.
Questions
How do I make a popup for my Shopify store?
Pick a ready-made template, set your brand colour, and rewrite the headline, the sub-headline and the button label. That is four choices and it produces a real popup running the real storefront code, which is what you see in the frame above. Making it appear on your store is a separate step: it has to be installed, targeted and pointed at somewhere for the email address to land.
Is this popup maker free, and does it need an account?
It is free and it needs nothing. No account, no install, no store connection, no email address. The page runs the arithmetic in your browser and renders the popup from a local copy of the template library.
Why does the preview say my brand colour needs a nudge?
Two different checks run on the colour you type. The first asks whether white or near-black text clears 4.5 to 1 on the fill, which is WCAG 1.4.3 for normal text. The second asks whether the fill itself separates from white paper by at least 3 to 1, which is WCAG 1.4.11 for a control. A pale brand colour passes the first easily and fails the second, and the result is a button with no visible edge.
Can I save the popup I made, or send it to someone?
There is a link under the result. It carries the template, the variant, the colour and your three lines of copy, so opening it anywhere rebuilds the same popup. Nothing is stored on our side, which also means there is nothing to log in to and nothing to lose.
Why is the preview rendered at a phone size?
Because the popup reads its own viewport when it boots, so a frame narrowed to fit a column would render the desktop layout squeezed rather than the mobile layout. The frame here is a real 390 by 844 phone viewport, scaled down to fit. What you are looking at is the mobile popup, which is the one most shoppers get.
You have built it. Now it needs a reason to appear.
Nudgesmart gives the popup you just built a trigger, an audience and somewhere for the email address to land.
