What would a popup look like on my store?
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
- #008168
Read 1,278 KB of https://drinkolipop.com/ · HTTP 200 · 379 colour declarations, 30 distinct
A ready-made template with its accent moved onto #034638. The popup is running, not a screenshot of one.
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.
It matches the store. It still fires for nobody.
A colour and a popup wearing it is where this stops. What a preview cannot do is decide who sees it, when it fires or what it offers. Nudgesmart starts from a ready-made template, targets it on real on-site behaviour, and reports back per campaign.
How it's calculated
A Shopify popup preview reads one public storefront page, takes the strongest colour that page declares about itself in its own CSS, 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 store own public HTML, through the same SSRF-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.
One fetch of a public page, then four refusals. The refusals are the part that took the work: every one of them is a wrong answer that was observed and had to be designed out.
- Declared colour
- A colour written into the page as a value: a CSS custom property, a rule in a style block, an inline style attribute, a colour utility class, or the theme-color meta tag. Shopify themes descended from Dawn write these as raw channel numbers rather than hexes, so a reader that only understands hex and rgb sees a stock storefront as having declared nothing at all.
- The image mask
- Nothing is read from an img, video, picture, canvas, svg or iframe tag, and a background colour is dropped whenever the same declaration also paints an image or a gradient. This is the guard that keeps a photograph out of the answer. Payment and social icon rows are excluded for the same reason: a footer card logo is another company brand colour, and on one store measured it outnumbered the real one by six to one.
- 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 CSS, so those hues are suppressed unless a vector mark on the page independently carries the same colour.
- The swatch gate
- A product colour swatch is a small round label with a colour on it, and it is a picker rather than page chrome. On one store measured, five phantom accents including a strong navy came from exactly that element. Background colours declared in a swatch context are dropped; text colours are not, because a coloured word is not a swatch.
- Agreement
- How many independent places in the markup name the same colour: the buttons and links, the header and body chrome, and the inline vector marks. Agreement is ranked above raw strength, because a colour only one source has ever seen is a guess however loud it is. A mark can raise agreement but never supplies the value, since a mark is a lossy sample of a colour the CSS states exactly.
- Achromatic
- The verdict when no colour on the page is colourful enough, and well enough evidenced, to be a brand colour. The tool then reports the strongest dark neutral the page declares. The test is colourfulness rather than saturation, because saturation is meaningless at the extremes of lightness: a near-black ink can report a saturation of 16 while being, to the eye, black.
- The read itself
- One request, following at most 4 redirects, abandoned after 9 seconds, reading at most 2 MB of the response. A colour declared past that cap is missed, and the result says when the body was truncated.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Worked examples
Markup fixtures, not customer data and not live stores. Every colour below is produced by the same function 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 |
The first two rows are the positive control and they matter as much as the refusals. Without them a reader that returned nothing at all would pass every refusal row and look immaculate. Row one is a stock Shopify colour scheme, where the brand red is written as three channel numbers rather than a hex; row two is a utility-class storefront where the brand colour and its hover shade sit in the same attribute, one character apart.
What this number doesn't tell you
It reads the page the server sent, not the page you see
A storefront that paints its colours with JavaScript after load declares nothing this reader can see. The colours are real and they are simply not in the HTML. That case comes back as a page that declared nothing, 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 declared 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 declare 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.
Questions
How does this find a brand colour without opening the store in a browser?
It reads the HTML the store server sent and collects every colour the page declares about itself: CSS custom properties, style blocks, inline style attributes, colour utility classes and the theme-color meta tag. Those are values the brand typed. It never samples pixels, because a pixel sample of a storefront is mostly product photography.
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 achromatic. 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 declares, 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 actually uses most strongly, 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 matches the store. It still has nobody to appear for.
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.
