What would a popup look like on my store?
Last updated
Below is an example read of drinkolipop.com, so the format is visible before you type anything. It was fetched from that store for this page. Enter a store above to replace it.
The strongest colour this page declares about itself is #034638, a teal agreed on by 3 independent sources in the HTML. It was read from what the page declares, never from a photograph.
- Buttons and links
- agrees
- Header, body and theme
- agrees
- Inline vector marks
- agrees
- Second colour
- #e2eb28
Read 1,073 KB of https://drinkolipop.com/ · HTTP 200 · 361 colour declarations, 31 distinct
Want a different colour, a different headline or a different template? Open it in the popup maker and change any of it, or start from a ready-made template of your own choosing.
A ready-made template with its accent moved onto #034638, 390 by 844 and rendering live, not a screenshot of one.
Reading the colour result
A Shopify popup preview reads one public storefront page, finds the brand colour that page uses, and renders a working popup in that colour, so a merchant judges it against their storefront rather than against a stock screenshot.
Read from one fetch of the public page of the store you enter, through the same hardened fetcher the store scanners use. Nothing about your store or your traffic is used, and no third party data source is consulted. The example below reads drinkolipop.com, and the fixture table is markup rather than live stores, so no claim on this page depends on a third party staying up.
What each part of the result means, and the answers this tool refuses to give. The refusals matter as much as the colour: every one of them is a wrong answer that was seen on a real store and designed out.
- Brand colour
- The one colour the page leans on most, shown as a hex you can copy into the maker or into your own design tool. Where the page settles on a second colour as well, it is listed underneath.
- Agreement
- How many separate parts of the page settle on the same colour: the buttons and links, the header and body, and the small inline marks such as a logo. Three of three is a confident answer. One of three is a weak one, and the result says so rather than dressing it up.
- What is left out
- Photography, video, product colour swatches and payment or social icon rows. A footer card logo belongs to another company, and on one store measured it outnumbered the real brand colour six to one. A swatch is a product option, not the brand.
- The stock accent
- The Shopify Dawn theme ships #FFC090 and #F57942 as its default accents. A store that never changed them is not a peach brand, it is a store with default settings, so those colours are not reported as a brand colour on their own.
- Black and white
- The verdict when no colour on the page is colourful enough, and well enough supported, to be a brand colour. The tool then reports the strongest dark neutral the page uses, because that is the colour a black and white brand actually puts on its buttons.
- The read itself
- One request, following at most 4 redirects, abandoned after 9 seconds, reading at most 2 MB of the page. A colour set past that limit is missed, and the result says when the page was cut short.
Most shoppers leave without buying or leaving an email. Nudgesmart catches them before they go, and is available on the Shopify App Store. Browse the template library or see what it costs.
Sample storefronts and the colour each one returns
Markup fixtures, not customer data and not live stores. Every colour below is produced by the same code the reader above runs. The last three rows each carry a wrong answer in their markup, waiting to be returned: the stock Shopify peach, a payment card red and a product swatch navy. A broken reader does not empty this table, it fills it with those.
| Storefront markup | What it tests | Colour returned | Verdict |
|---|---|---|---|
| Stock Shopify colour schemes, brand red written as channel numbers | The common case. --color-button: 225,39,39 is not a hex and is not rgb(). | #e12727 | Redagreement 2 |
| Tailwind storefront, brand green on the button beside its hover shade | Guard: a state variant is not the brand colour. | #034638 | Tealagreement 2 |
| A black and white brand | Guard 4: achromatic is an answer, not a failure. | #111111 | Black and whiteagreement 2 |
| A store still on the stock Shopify accent | Guard 2: the Dawn peach is suppressed, because it is default CSS. | #121212 | Black and whiteagreement 2 |
| A footer payment icon row, forty times louder than the brand | Guard 1: the Mastercard red is an image, not a declaration. | #14433d | Tealagreement 1 |
| Product colour swatches on a black and white store | Guard 3: a swatch is a picker, not page chrome. | #0d1012 | Black and whiteagreement 1 |
Where a colour read falls short
It reads the page the server sent, not the page you see
A storefront that paints its colours with JavaScript after load shows this reader nothing. The colours are real and they are simply not in the page as it arrives. That case comes back as a page with no readable colour, which is a different message from a blocked fetch and a different one again from black and white.
A colour read correctly can still be the wrong one to use
The strongest colour is the one the page leans on, not necessarily the one the brand would put on an overlay. Plenty of stores lead with a dark neutral on the page and a brighter accent in their marketing. The maker takes any hex you type, and that is the right place to disagree with this.
One page, one moment
This is the front page of the store on the day you asked. Seasonal takeovers, a campaign landing page and a different market can all use different colours. Nothing here is a claim about the brand over time.
The popup is a ready-made template, not a design decision
Moving an accent onto a template shows you the colour working at popup scale. It does not choose the layout, the offer, the imagery or when it fires, and those decide far more about whether a popup works than its colour does.
It says nothing about whether the store already runs popups
This tool reads colour and nothing else. Whether a store has an email capture mechanism on its page is a different question with a different answer, and it lives on the popup audit.
Popup preview questions
Where does the colour come from?
From the storefront page itself: the colours the store sets for its own buttons, links, header and marks. Photography is never sampled, because a picture of a storefront is mostly product photos, and a product photo is not a brand colour.
Why does it sometimes answer black and white instead of a colour?
Because some brands are black and white, and that is a real answer rather than a failure. Two of five brands measured while building this were black and white. A tool that always returns a hue is inventing one for those stores, and an invented brand colour is worse than none.
My store came back as blocked. Does that mean it has no brand colour?
No, and the page says so in its own words rather than showing you an empty result. A bot filter in front of a store answers instead of the store, so no page was read and nothing was measured either way. That outcome renders as a completely different block from a successful read, on purpose.
Why is the colour slightly different from the one in my brand guidelines?
This reads what the live page uses, which is not always what the guidelines say. Themes carry several colour schemes, a hover shade sits next to every button, and a pale web tint often gets darkened for legibility. The hex shown is the one the page leans on most, and you can type a different one into the maker.
Does the preview show a real popup or a picture of one?
A real one. The frame runs the same storefront rendering engine the app ships, loaded with a ready-made template whose accent has been moved onto the colour that was read. It animates, it responds, and closing it closes it.
It looks right. Now it needs leaving visitors to catch.
A matching design is half of a signup; the other half is reaching the shopper before they go. Nudgesmart takes it from a preview to a live campaign: a ready-made template, recoloured, targeted on real on-site behaviour and reported per campaign.
