A landing page where one buybox handles both halves of the decision — how many tins, and which scents — with the discount applied automatically at checkout.
001 — Bundle size on top, scents below: the whole decision resolves without leaving the buybox The Tallowed Truth launched three new F-Balm scents — Lavender, Orange & Vanilla, and an unscented Black Label — alongside the original. Selling them from a single paid-traffic landing page meant asking one buybox to resolve two decisions at once: how many tins (1, 2 or 3, at deepening discounts) and which scents fill them.
Shopify’s variant model does not express that. A three-tin bundle of three different scents is three separate products, not one variant, so the usual quantity picker cannot describe it. The bundle apps already on the store either forced a fixed pre-built kit or took over the product page entirely — and a landing page paying for its own traffic could not afford a flow that sent shoppers elsewhere to finish choosing.
A custom buybox section in Liquid, driven by its own small JavaScript component.
The top half is the quantity ladder — tier cards for 1x, 2x and 3x with their per-tin price and saving, configured as theme settings so the merchant can retune percentages for a promo without touching code. The bottom half is a row per scent, each one an independent product picker with its own Add+ button. Because every row points at its own product, a bundle can mix scents freely, and the call to action reads the running selection back to the shopper — “Select 2 More Tins”, with the crossed-out total beside the discounted one.
The discount itself is applied cart-side rather than faked in the buybox: adds are tagged as they happen so the store’s automatic discount fires at checkout, which keeps the advertised saving and the amount actually charged in sync.
Two details do much of the persuasive work. Hovering or tapping a scent row swaps the main gallery image to that tin, so the scents can be compared without scrolling away or losing the bundle in progress. And the page runs without header or footer — no navigation, no exit links — while still carrying the store’s shared $5 Flat Rate Shipping bar, so the offer keeps its context without the distractions.
The final pass aligned the page to the Figma comp, and is where most of the craft went. The headline is sized with a CSS container query rather than viewport breakpoints, so it tracks the width of the column it actually sits in and holds one line from 390px to desktop — the product info column is not a clean fraction of the viewport, so a vw-based size clipped at the narrow end and under-filled at the wide end. Carousel thumbnails became 16:9 rectangles, matching source images that were already that shape and had been centre-cropped into squares. The scent previews stopped arriving cropped and over-zoomed. And the vertical rhythm was corrected optically rather than nominally: equal margins were painting as 25px above the title and 3px below it, because the heading font carries a tall ascender and the tier badge sits proud of its card. Compensating for both in em brought every gap to a consistent 14px on phone and desktop alike.
Live at thetallowedtruth.com/pages/f-balm-new-scent-bundles. One page now carries an ad click all the way to a mixed-scent, multi-tin order: bundle size and scent choice resolved in the same component, the discount applied automatically at checkout, and a layout that holds its proportions from a phone to a wide desktop. Performance data for this page is still being gathered; this entry will be updated once that is in.
Scroll the strip to move through it.
