GWP × Halfords · concept mockup
Free gifts at the basket,
themed to Halfords.
A third-party-funded gift-with-purchase offer rendered inside the Halfords basket page. The panel is built from Halfords' live design tokens — the dark #242424 chrome, the orange action colour, the slab-serif product titles, the 5px radii — so it reads as part of the page rather than an ad dropped on top of it.
Surface 01
Basket page
The gift panel sits directly beneath the fulfilment group, in the wide column — clear of the order summary and of both Proceed To Checkout buttons. Toggle to see the basket before and after a shopper picks their gifts.
Basket
Your free gifts
Pick up to 3 · nothing to payWhat changes when a gift is picked: the row flips to an “Added” state and the Order Summary gains a Free gifts line at £0.00 — added value without altering the total, the collection slot or either checkout button. Placement, offer count and copy are configured per retailer; nothing here is hard-coded.
Surface 02
Mobile basket
The same offer on Halfords' mobile basket, rebuilt from their responsive layout — 60px header, 35px centred title, full-bleed Motoring Club banner, 42px buttons and the grey full-width Order Summary band. At this width the gift rows stack and each CTA goes full-width, so nothing competes for horizontal space with the quantity stepper or the price.
Basket
One hour after purchase. Your order will be held for 7 days from collection date. change
Your free gifts
Order Summary
Rebuilt from their responsive layout, not shrunk: on mobile Halfords drops to one column, the Order Summary becomes a full-bleed grey band at the bottom, and buttons shrink to 42px. The gift panel follows the same rules — rows stack, CTAs go full width, and it stays inside the fulfilment group above the summary, so the checkout button is never pushed off screen.
How it's built
Themed from Halfords' own tokens
None of this is a bespoke build. Every value below was read off the live basket page at halfords.com and dropped into the widget's theme config — the same way any retailer is styled.
Tokens in use
#ff9718Gift CTA — the same orangeas their Apply button
#242424“FREE” chip — matches theirown SAVE % badge
#198900Left alone — green staysthe checkout action only
#f0f0f0Panel header — same band asthe fulfilment group
#dedede1px card rules, 4px cornersslab serifOffer titles use theirproduct-title face
Reusable for any prospect
- Capture the tokens. Open the retailer's basket page and read the CTA colour, text colours, fonts and corner radius straight off the live DOM.
- Paste them in. All of them live in one
:rootblock at the top of this file. - Swap the contents. Replace the line item and the three offers with ones that suit their customer.
- Publish. One command puts it on a public link you can send — the recipient needs no login.
Same process produced the Pro Breeze, Studio and Acer mockups, so anyone on the team can turn a prospect round without design work.