Click & Collect and Store Availability: the Unified Commerce Frontend

Click & Collect is no longer a differentiator. It is a baseline expectation. When a shopper opens a product detail page, they expect to see: is this in stock at my nearest store? Can I pick it up today?

The problem is that this seemingly simple use case connects real-time inventory from a store management system, browser geolocation, a map display, a modified checkout flow for pickup instead of delivery, and a notification system for when the order is ready. Six systems, one seamless flow in the frontend.

This post describes how to build Click & Collect, store availability, and a cross-channel cart as a composable frontend on your existing stack - without backend replatforming.

The Laioutr Multichannel Retail Growth Kit includes all components described here as a production-ready UI set.

Why "omnichannel" and "unified commerce" describe different goals

Omnichannel means you are present on multiple channels (online, store, app, marketplace) and these channels are somehow connected. Unified commerce means online and in-store share the same data foundation, the same checkout logic, the same customer record - and the shopper experiences this as seamless.

The difference is not academic. In an omnichannel setup, there are often still separate systems: an e-commerce system with its own inventory, a store system with its own inventory, and an integration layer trying to sync the data. In a unified commerce setup, there is a single source of truth for inventory, customers, and pricing.

For the frontend, this means: in an omnichannel setup, store availability must be fetched from a separate system, often with latency and unclear data freshness. In a unified commerce setup, inventory comes live from one source.

The Multichannel Retail Growth Kit is designed for both setups - the components abstract where the inventory comes from. The path to unified commerce becomes easier when the frontend is not bound to the existing backend architecture.

Store availability: the underestimated complexity

What the product detail page needs to show

A store availability component on the product detail page sounds straightforward. In practice, it needs to:

1. Determine the shopper's location (browser geolocation or saved preference)
2. Query the nearest stores with the product in stock
3. Display per-store inventory in real time (or with acceptable latency)
4. Distinguish between "available," "limited stock," and "not available"
5. On click, show a store list or map with distance, address, and opening hours
6. Prepare the checkout flow: when "pick up at Store X" is selected, checkout switches to Click & Collect mode

Each of these is a frontend state that needs clean implementation. Missing states - what happens if geolocation is denied? What if no stores nearby have stock? - create friction and abandonment.

In the Multichannel Retail Growth Kit, all inventory states, error states, and loading states for the store availability component are implemented. You configure which backend API delivers the inventory - the component code stays stable.

Real time vs. near real-time: what is acceptable

Querying store inventory in true real time - fetching live from the store system on every page load - is technically possible but has consequences for performance and system load. A product detail page with 50 stores and real-time queries generates 50 API calls per page load.

A pragmatic approach: cache inventory with a short TTL (5-15 minutes), but always query live at the Click & Collect reservation step. The frontend then shows "generally available" rather than a live number, and the actual inventory is verified at the checkout moment.

This is an acceptable trade-off for most retail scenarios. The exception: high-turnover items with fast inventory movement (electronics bestsellers, seasonal merchandise). There, a shorter TTL or a real-time WebSocket channel for the stock value is worthwhile.

Click & Collect: the flow from the customer's perspective

Step by step

A complete Click & Collect flow from the customer's perspective:

1. Product found on the product detail page, store availability checked
2. "Pick up at Store X" selected
3. Checkout: delivery address is replaced with store details (address, opening hours) and an optional pickup time slot selection
4. Order completed, confirmation email with pickup code
5. Notification (email or push) when order is ready for pickup
6. In-store pickup: show pickup code, collect order

Each of these steps has a frontend component. Particularly underestimated: step 5. The "ready for pickup" notification is triggered by the store system, but the frontend is the interface through which the customer sees their pickup code and order status.

Click & Reserve vs. Click & Collect

Two similar but distinct flows:

• Click & Collect: item is ordered and paid for online, reserved and prepared at the store for pickup
• Click & Reserve: item is reserved for free (no prepayment), prepared at the store, payment on collection

Click & Reserve is particularly popular for higher-priced items where customers want to see and touch the product at the store before paying. The Multichannel Retail Growth Kit includes both flows as separate checkout variants.

Ship from store

Ship from store is the reverse path: an online order is fulfilled not from the central warehouse but from the nearest store with inventory. From the customer's perspective, this looks like a standard online purchase with delivery. In the background, the order is routed to the store system, which acts as a mini-warehouse.

Ship from store is an inventory optimization measure - stores with high stock levels for certain products can become fulfillment points for online orders without needing to increase central warehouse inventory. The frontend does not need much for this: display "express delivery from nearest store" as a checkout option.

Store finder: more than a map

What a good store finder delivers

The store finder is frequently one of the most visited pages of a retail website. Shoppers look for:

• Location and directions
• Current opening hours (including holiday adjustments)
• Availability of a specific product at this store
• Store services (repairs, consultations, accessibility)
• Appointment booking (consultation, Click & Reserve pickup)

A store finder that only shows name, address, and opening hours is a missed opportunity. Connecting to the product catalog - being able to answer "is product X in stock at this store right now?" directly within the store finder - is a feature that measurably reduces abandonment.

The Multichannel Retail Growth Kit includes store finder components with map integration, opening hours calendar, store detail page, and a product availability link.

Store finder performance

Map widgets are a well-known performance issue: Google Maps or Mapbox load several hundred kilobytes of JavaScript, block LCP, and drag Core Web Vitals down.

The solution: lazy-load map widgets via Intersection Observer - only when the map component enters the viewport is the map widget initialized. Before that, a static map preview (screenshot or static image) shows the location without script overhead.

This optimization is built into the Multichannel Retail Growth Kit out of the box.

Cross-channel cart

Mixing delivery and pickup

A customer buys three items. Items 1 and 2 should be delivered to home. Item 3 they want to pick up at the store tomorrow. A cross-channel cart allows exactly this: different fulfillment types in one order.

This is convenient but technically demanding:

• The cart needs to track fulfillment type per line item
• The checkout summary shows both delivery address and pickup information
• The confirmation needs to communicate both fulfillment types clearly
• The backend needs to split the mixed order into two sub-orders (one for the warehouse, one for the store)

The last point is a backend concern - the frontend visualizes the split, but does not decide it. The Multichannel Retail Growth Kit includes a cart that handles delivery/pickup mixes and a checkout flow that treats both types separately.

Loyalty and coupons across channels

Loyalty points, coupons, and loyalty programs need to work across channels in a unified commerce setup: points collected in-store should be redeemable online and vice versa. The frontend displays this, but the source is your loyalty backend.

The Multichannel Retail Growth Kit includes loyalty components (points balance, coupon input, digital loyalty card) that connect to your loyalty system.

The composable frontend layer as the enabler

The key point: all the flows described here do not require a new backend system. They require a frontend that brings together data from the existing systems (store system, ERP, loyalty system, OMS) and renders it as a seamless customer experience.

That is exactly the job of a Frontend Management Platform (FMP): the frontend layer that connects to any backend system without replacing it. Laioutr works with your existing stack - Shopify, Shopware, commercetools, OXID, Sylius, and 50+ other backends. Your backend stays. Your frontend becomes modern.

The Laioutr Multi-Brand/Multi-Market product also lets you run the same component pool across multiple retail brands and country markets - one UI library, all brands and markets.

For Shopware as the backend, there is also a dedicated pillar: Headless Frontend for Shopware, which documents the specific integration.

FAQ: unified commerce frontend

What backend infrastructure do I need for real-time store availability? You need an API that answers stock queries per product and per store. That can be your existing store system, an OMS (order management system), or a simple inventory management backend. What it does: respond to the query "how many units of item X are in store Y?" The Laioutr frontend layer connects to this API and renders the state.

How much effort is the Click & Collect integration? The frontend side - checkout flow, confirmation, pickup code display - is included in the Multichannel Retail Growth Kit. The effort is on the backend side: your OMS or store system needs to be able to receive Click & Collect orders and return status updates (ready for pickup, picked up). Typical implementation time with an existing backend: 2 to 4 weeks.

Can we add Click & Reserve without rebuilding the entire checkout flow? Yes. Click & Reserve is a separate checkout variant in the Multichannel Retail Growth Kit that coexists with the standard purchase checkout. You configure which products and stores are enabled for Click & Reserve - the rest of the checkout stays unchanged.

Our store data is in a legacy system without an API. What then? The first step is a simple middleware or proxy that queries the store data and exposes it as a REST or GraphQL API. That is backend work, not frontend work. The Laioutr frontend layer can connect as soon as the API is available.

Does this work for large retail chains with 200+ stores? Yes. The store finder component in the Multichannel Retail Growth Kit is optimized for large store networks - with zip code/city search and radius filtering to keep the list manageable. The performance optimizations (lazy map loading, cached inventory data) are designed specifically for high store counts.

Summary: unified commerce needs a unified frontend

Click & Collect, store availability, ship from store, loyalty, cross-channel cart - these are not isolated features you add one by one to your existing shop. They are expressions of a single purchasing experience that treats online and in-store as one channel.

The Multichannel Retail Growth Kit provides all these components as a production-ready set that runs on your existing stack. No replatforming, no months-long greenfield project.

A full overview of all industry-specific growth kits is available in the UI Growth Kits hub.

If you want to see what the components look like on your backend, book a demo.

Laioutr is the [Frontend Management Platform (FMP)](https://www.laioutr.com/en/composable-headless-frontend) for composable commerce. The [Multi-Brand/Multi-Market product](https://www.laioutr.com/product/multi-brand-multi-market) lets retail chains run one component pool across all brands and country markets.