Pop Theme¶

Pop is a loud, friendly storefront theme: flat saturated colour blocks, thick ink outlines, hard offset shadows that squash when you press them, tilted stickers and a scrolling strip along the top. It is built on top of Nova (Pop → Nova → Bootstrap template fallback), exactly as Brock is, so every page works from the moment a site switches to it; Pop replaces the pages where the personality matters most.

Site admins pick it under Admin → Shop Settings → Theme (Choosing a Theme); platform staff can also set it per site in System → Tenants → {site} → Theme (theme name Pop).

Design principles¶

Principle	What it means on the page
One colour per product	Every product is one of five block colours (tomato, cabbage, mustard, ultramarine, bubblegum). The colour is chosen by a stable hash of the product's `seoName`, so it is the same on the listing card, the product page and the "added to basket" panel, every visit, with nothing for the merchant to maintain.
Photographs in a window	Real packshots and lifestyle photos sit in a white, ink-outlined window on the colour block. Nothing is blended into the colour, so white-background packshots and full-bleed photography both look right on all five colours.
Flat colour, hard shadows	No gradients or blur. Buttons, chips and cards have a 4–7px offset ink shadow; hover lifts them, pressing collapses the shadow.
Stickers say something true	A sticker only appears for a real flag: a saving (`-20%`), "Only 3 left" (tracked stock of 1–5) or "Sold out". There is no "new" sticker, because nothing on the product says it is new.
The strip	A mustard marquee under the header repeats the site's announcement and delivery / returns / secure promises. It appears once the site sets an announcement, a delivery promise or a returns promise; "Secure checkout" alone (the default wording) does not switch it on. It scrolls at a steady pace (about 55 px a second) however long the text is.

What Pop redesigns¶

Area	Highlights
Header / footer	Brand as a tilted sticker, search pill (with as-you-type suggestions), account, and a basket button showing item count and running subtotal; mega menu (collection menu and admin-built menu) and a slide-in mobile menu; the marquee strip; an ink footer with reassurance row and payment marks.
Listings	Collection, search and merchandising pages: an oversized title with the collection's own description and a product-count sticker, sub-category chips, a sort pill, filters as chips (a rail on desktop, a slide-in panel with "Show N products" on mobile), applied filters as inked chips with Clear all, and pill pagination with "Showing 1–24 of 312".
Cards	Colour block, photograph window, stickers, name, price (with the was-price and saving) and one action in the product's colour, chosen by product type exactly as Nova's card does.
Product page	Gallery on the product's colour block beside a buy box that stays in view on desktop; brand, big title, rating, price, options as pills, honest stock line, quantity + Add to basket in the product's colour, promises, and Description / Delivery & returns as a single accordion; a docked buy bar on phones.
Added to basket	The panel that opens after adding, headed in the product's colour.
Rails	Trending, featured and recently-viewed products use the same card.

Pages that fall back to Nova¶

Basket, checkout, order confirmation, account, blog and content extensions have no Pop template: they render Nova's markup inside Pop's header and footer. They still look like Pop because Pop re-points Nova's design tokens (palette, fonts, radii, hard shadows) and restyles Nova's buttons and inputs (.nova-btn, .nova-input). Nova's standalone sign-in / register / password pages keep Nova's own page styling.

What is not in Pop (and why)¶

The design mock invented some data. These are deliberately absent, because the product model has nothing to drive them and Pop adds no back-end features:

Heat meter, flavour filters and "vegan" chips – no such attributes exist. (Filters shown are the real facets the search layer provides.)
Subscribe & save / one-off toggle – needs subscription pricing on the product.
Build-your-own bundle banner – needs a bundle definition (the existing productBundle extension keeps Nova's template).
"New" sticker – needs a "new" flag; only createdDate exists, and comparing dates belongs in Java, not a template.
Reviews and "pairs well with" blocks – no review or pairing data.
Free-delivery progress meter in the basket panel – needs a delivery threshold on the model.

Any of these can be added later by computing a flag or value in an extension and adding it to the relevant template.

Configuring the copy¶

The "Shop all {0}" link at the foot of each admin-built menu dropdown (pop.nav.shopAll) can also be reworded or hidden per site with the nav-mega-menu-view-all-label and nav-mega-menu-view-all-enabled site config keys; see Brock: the "Shop all" link.

All Pop wording is in messages.properties under pop.* and can be overridden per site in Admin → Shop Settings → Site Text (/admin/shopSettings/text). The playful tone lives in headings and empty states; buttons, errors and legal text stay plain. The ones a merchant should set:

Key	Default	Where it shows
`nav.banner.message`	(empty)	The marquee strip. HTML allowed.
`pop.promise.delivery`	(empty)	Marquee, product page, footer, "added" panel. e.g. "Free delivery over £40"
`pop.promise.returns`	(empty)	As above.
`pop.promise.secure`	Secure checkout	Marquee, product page, footer.
`pop.promise.help`	(empty)	Footer reassurance row.
`pop.pdp.deliveryInfo`	(empty)	"Delivery & returns" section on every product page (HTML allowed).
`pop.pdp.priceNote`	(empty)	Line under the product price, e.g. "Including VAT".
`pop.rail.trending`, `pop.plp.emptyTitle`, `pop.added.title`, …	Playful	Headings and empty states.

The strip only appears once the announcement, delivery or returns text is set, so a new site never shows a message it hasn't written. With prefers-reduced-motion the strip stops scrolling and shows the message once.

For developers¶

Templates: web-mvc/src/main/resources/templates/pop/. Styles and behaviour: resources/settBuilder/themes/pop/css/pop.css and js/pop.js, linked from Pop's fragment/head.html after Nova's bdgr.css (and before the Design Brief's theme.css).
Pop's ThemeContext points cssPath/jsPath/imagePath at Nova's folders, so Nova templates and extension scripts keep working; see Theme Resolution. Pop's icons live in fragment/pop-icons.html (not icons.html) for the reason given there.
Per-product colour. Templates compute tone = (seoName.hashCode() % 5 + 5) % 5 and add pop-tone-N to the card, product section and rail card; pop.css maps pop-tone-0..4 to --pc (block colour) and --pc-ink (text on it). pop.js copies the class onto the "added" panel. Changing the palette order changes every product's colour, so treat it as stable.
Design Brief. Pop's five block colours are fixed identity. The Brief's brand colour (--color-primary) drives the logo sticker and the buttons on Nova-rendered pages; its font and shape tokens apply as they do on Nova.
Fonts (Bricolage Grotesque and Figtree) are self-hosted variable fonts from @fontsource-variable packages: the Latin and Latin-ext subsets are vendored (see scripts/copy-versioned-deps.js) and declared inline in fragment/head.html. No request goes to a third-party font host.
Pop reuses Nova's scripts (variant picker, sticky buy bar, search suggestions, basket repricing) unchanged; each Pop template documents the ids and classes it keeps for them.
Tests: PopProductCardRenderTest renders both cards for every image state and checks the tone class and that stickers appear only for real flags.
The theme record is added by system update 86.json (idempotent) and initialisation/templates.json.