From checkout to kerb: a click & collect accelerator for headless commerce.

Background

Click & collect — or BOPIS (buy online, pick up in-store) — became one of the fastest-growing fulfilment preferences during 2020, as shoppers sought the speed and convenience of online ordering combined with same-day in-store pickup. Retailers with physical locations suddenly needed BOPIS capability urgently, and most faced a significant build effort to add it to their existing Vue Storefront implementations.

Divante’s product team recognised this as a pattern worth solving once, well, for the broader Storefront UI ecosystem — rather than rebuilding it repeatedly for each client engagement.

What We Built

The Click & Collect Accelerator extends Vue Storefront with a complete BOPIS purchase flow: store search and selection at the product page, availability checking per location, store-pickup selection at checkout, confirmation and collection instructions post-purchase. The UX was designed mobile-first, with an emphasis on the checkout flow where friction most commonly causes drop-off.

The design system draws on Storefront UI’s component primitives, extended with purpose-built map and store selector components. The entire flow is brandable through Storefront UI’s theming system, requiring no design work to customise to a specific retailer’s visual identity. The accelerator was published as an open-source contribution to the Vue Storefront community.

Key Features

• Store locator with map integration and search by postcode or city
• Real-time stock availability per store at the product detail page
• Store pickup option at checkout with collection time estimation
• Post-purchase collection instructions and store contact details
• Mobile-first, fully accessible UI built on Storefront UI components
• Themeable to any brand identity through CSS custom properties