GWP × Virgin Wines · concept mockup
A third-party-funded gift-with-purchase offer rendered inside the Virgin Wines basket. It's built from their live design tokens — Roboto, the green action colour, the Virgin red, the 4px cards with their hairline borders — and it sits in the slot Virgin Wines already uses for add-ons. The difference: this one adds value instead of asking for more spend.
Surface 01
The gift panel sits in the left column directly beneath the case, immediately above the add-on carousel — the same slot in which Virgin Wines already offers a paid add-on case. The only change outside the panel is a single £0.00 Free gifts line in the summary, beside their own You save row — the total, the delivery date and the route to checkout are untouched. Toggle to see the basket before and after a shopper picks their gifts.
What changes when a gift is picked: the row flips to an “Added” state and the summary gains a Free gifts line at £0.00, sitting alongside their own You save row — added value without touching the total, the case or the delivery date.
Surface 02
Below their 992px breakpoint Virgin Wines drops to a single column and the order summary stacks beneath the basket contents. The gift panel keeps its place directly under the case, so it's seen before the shopper ever reaches the summary — and each CTA goes full width rather than competing for space.
Captured, not guessed: Chrome can't be sized below Virgin Wines' 992px breakpoint at this display's zoom, so I fetched their stylesheet, disabled every min-width block and re-rendered the live basket on their mobile-first CSS. That confirmed the single column and the summary stacking below — this replica follows that, not an assumption.
How it's built
Every value below was read off the live basket at virginwines.co.uk and dropped into the widget's theme config — the same way any retailer is styled.
#35b63eGift CTA — the same green as#e10a0a“FREE” chip — Virgin red,#2d2d2dType + selected outline#f8f8f8Panel header — same fill asrgba(0,0,0,.08)1px card hairline, 4px radiusRoboto + JoyUI in Roboto; headings in their:root block at the top of this file.Same process produced the Pro Breeze, Studio, Acer and Halfords mockups.