GWP × Studio · concept mockup
Free gifts at the basket,
themed to Studio.
A third-party-funded gift-with-purchase offer, rendered inside Studio's own basket page and bag drawer. The widget inherits Studio's live design tokens — Montserrat, the mint CTA, the navy type, 4px radii — so it reads as part of the page, not an ad bolted onto it.
Surface 01
Basket page
The gift panel sits directly beneath the bag, in the wide column — full visibility without touching the order summary or the path to checkout. Toggle to see the basket before and after a shopper picks their gifts.
T&Cs apply | Shop now
Price £22.50
Price £11.69
Your free gifts
Pick up to 3 · nothing to payWhat changes when a gift is picked: the panel flips to an “Added” state, and the order summary gains a Free gifts line at £0.00 — reinforcing added value without altering the total. Placement, offer count and copy are all configured per retailer; nothing here is hard-coded.
Surface 02
Bag drawer
Studio's bag drawer slides in whenever a shopper adds to bag — the highest-intent moment on the site. Here the widget compresses to a single strip above View bag and Checkout, so it never pushes the buttons out of reach. One gift is shown already added.
Why the drawer matters: on Studio the drawer is the only surface that appears at add-to-bag, so it reaches shoppers who never open the basket page. The strip stays above the buttons and collapses to three lines — no scroll is introduced.
How it's built
Themed from Studio's own tokens
Nothing above is a bespoke build. These values were read off studio.co.uk's live basket page and dropped into the widget's theme config — which is how any retailer is styled.
Tokens in use
#76e8c5Panel header + primary CTA(same mint as Add to bag)
#00003cAll type + selected outline#ff0000“Free” flash — echoesStudio's sale pricing
#f7f7f7 / #dddPanel fill + hairlinesMontserrat 700Uppercase button labels#8400d1Deliberately unused — purple staysreserved for Frasers Plus
Reusable for any prospect
- Capture the tokens. Open the retailer's basket page and read the CTA colour, type colour, font and corner radius.
- Paste them in. All six live in one
:rootblock at the top of this file. - Swap the contents. Replace the two line items and the three offers with ones that fit their customer.
- Publish. One command puts it on a public link you can send — no login for the recipient.
That's the whole process — the same one used to produce this page, so anyone on the team can turn round a prospect mockup without design work.