Bundle Builder: design direction
What changes in the design plan, why the current draft reads as templated, and how the builder ships as both a page and a popup.
The read
A mobile-first commerce configurator for a colourful bag brand, where the product photography carries all the colour. Near-monochrome canvas, one locked brand accent, a tactile rewards ladder.
The taste skill sets a landing-page baseline of 8 / 6 / 4. This is not a landing page. It is a picker with six styles and twenty-four colours, so variance comes down for scannability and density goes up.
What reads as templated right now
Eight findings against the current draft. Each one is a named rule in the skill, not a preference.
| Tell | Where | Rule |
|---|---|---|
| Countdown as four bordered boxes with days / hrs / min / sec labels | campaign banner | 9.F micro-labels |
| Gradient call to action, gold into pink | .nb-bb__atc | 9.A gradient slop |
| Campaign title set as a wide-tracked uppercase eyebrow | .nb-bb__campaign-title | 4.7 eyebrow restraint |
| Black and gold palette for Black Friday | [data-campaign="bf"] | 4.2 palette rotation |
| Heading and subtext centred | .nb-bb__head | 4.3 anti-centre bias |
| Four different corner radii in one component: 999, 16, 12, 8 | throughout | 4.4 shape lock |
| Two em-dashes in user-visible strings | nb-bundle-builder.js:235, .liquid:240 alt text | 9.G hard ban |
| Everyday skin is neutral grey on white, so it reads as stock Shopify | base palette | 0.D anti-default |
The deepest problem is the last one. The everyday builder does not look like Nanobag, and the Black Friday skin then throws the brand away entirely to wear the same costume as every other store that weekend.
Colour: lock the brand, change the canvas
The product range is the colour. One hundred and forty-four variants of bright printed fabric, including Cats, Ducks, Psychedelic and Lemons. The interface should go quiet and let the grid carry the saturation. It currently competes with it.
Current campaign palette
Gold plus coral on black. Nothing here is a Nanobag colour.
Proposed, everyday and campaign
Crimson is the theme's own button colour. It stays fixed; only the canvas flips to black.
That single change is what makes the sale read as Nanobag having a Black Friday, rather than a generic sale template that happens to be selling Nanobags.
The campaign banner, rebuilt
Same information, two treatments. The left is what is deployed today.
What changed and why
| Countdown | One sentence instead of four boxes. A ticking seconds box is decoration; the deadline is the information. |
| Title | Set as a real heading, not a tracked-out uppercase eyebrow. |
| Button | Solid crimson. The gradient was the loudest AI signature in the build. |
| Ladder | One filling track tied to the tray, left aligned, replacing the row of dots with labels underneath. |
| Motion | Kept: rung unlock, total change. Cut: banner sheen, animated rail gradient. Both were decoration with no job. |
| Radii | One value across every surface. |
Where it lives
Two surfaces, one section. The page is the surface Google can read; the popup is where the buying happens.
| Surface | Route | Job |
|---|---|---|
| Page | /pages/build-your-bundle | Crawlable, translatable, links in from the banner |
| Popup | Freebie banner click, homepage and PDP | Catches intent without losing the page they are on |
How the popup loads, measured against the live store
| Route | Payload | Verdict |
|---|---|---|
?view=modal, the quick-view route | 1,339,551 bytes | Reject. Full page including header; quick view only extracts a fragment in the browser. |
?section_id= with the full prefixed id | 17,085 bytes | Best payload, no header. The id is scoped to its template, so another template cannot build it. |
| Builder hidden inside the overlay group | no fetch | Stable id everywhere, but pays roughly 124 image tags of markup on every page load. |
Measured on nanobag.com, not assumed. /pages/faq is 267,757 bytes as a page and 17,085 bytes as a section render.
Leading pick
A chromeless template fetched as /pages/build-your-bundle?view=bundle-modal, with a gate in theme.liquid that drops header, footer and drawers for that suffix. The same pattern is already proven on the dev branch for the page.blank-* landing templates. Small payload, stable URL, no id guessing. The cost is one edit to the file that also carries the consent and boot chain, so it has to be a pure output gate that never touches script order.
Build order
- Apply the design direction to the existing three files assets/nb-bundle-builder.css, assets/nb-bundle-builder.js, sections/nb-bundle-builder.liquid Palette lock, single radius, banner rebuild, motion cut, both em-dashes removed. No new surfaces yet.
- Move every visible string into locale files locales/*.json Section-instance copy dies on editor re-saves, so nothing translatable can live in a setting default.
- Wire the standalone page and its markets templates/page.bundle.json, templates/page.bundle.context.<market>.json × 8 Eight context files, one per market, each pointing at that market's product.
- Add the chromeless modal template and the layout gate templates/page.bundle-modal.json, layout/theme.liquid The riskiest edit, done once the payload it serves is already correct.
- Turn the freebie banner into the trigger sections/freebie-banner.liquid The existing anchors point at the page; script upgrades them to open the popup. It still works with JavaScript off and before consent in the EU.
- Place the banner on both templates templates/index.json, templates/product.json The homepage is at its 26-section limit, so the static image instance has its type swapped in place. Nothing is added.
- Ship dormant behind a switch config/settings_schema.json Lands on main turned off, then opens per market.
Three decisions
The skill's palette rule says black and gold is the default reach and should be rotated out. Crimson also keeps the sale recognisably Nanobag. This is the one choice that changes how the whole campaign looks.
Two gift ladders on one product page is clutter, and the existing widget is a dead end with its tiers hardcoded in two places.
theme.liquid acceptable?
It is the file that carries the consent and boot chain, and the August 2026 incident came from changing script loading there. The gate would only wrap output, never reorder scripts, but it is your call whether that file gets touched at all.
Still open
A ten-surface review of this change is running and will sharpen three things before any code is written: the teardown needed when the builder script is injected twice, the consent path for a re-injected script before a European visitor accepts cookies, and real numbers on the overlay-group option.
Separately, and outside this build: the cart drawer promises free shipping above 40 dollars while shipping is actually granted by weight above 0.11 pounds. Two Daypacks cost 51.90 dollars and weigh 40 grams, so the drawer says free shipping and the checkout charges 4.95 dollars. Daypack is the top revenue product of the last ninety days.