ClickCollect storefront guide
This documentation set covers the customer-facing storefront experience using nbc.clickcollect.coffee as the working reference. It focuses on the flow a customer sees from browsing the menu through checkout, account access, WhatsApp settings, and order updates.
What this section covers
| Storefront area | What it covers |
|---|---|
| Guest checkout | Completing an order without creating an account |
| Sign in | Google-only sign-in for orders, checkout, and repeat use |
| Checkout | Contact details, collection location, pickup timing, and payment |
| Orders | Accessing order history and linking older guest orders |
| About | Brand-story and trust-building content on the storefront |
| How It Works | The customer education flow for ordering and collection |
| WhatsApp settings | Managing saved WhatsApp number, preferred location, and payment defaults |
| WhatsApp notifications | New-order updates, post-checkout prompts, and linking guest orders |
| Account linking | Turning a guest order into a signed-in customer profile |
Live screenshotStorefront homepage and nav overview
Capture the public storefront hero, bottom navigation, and menu-category surface from the live storefront.
static/img/storefront/nav/placeholder.svgStorefront navigation order
The live bottom navigation on the reference storefront exposes these customer routes:
MenuOrdersCartAboutSettings
Customers can begin from the menu immediately and only need to sign in when they want account-linked history, preferences, or faster repeat ordering.
Before you document or demo the flow
- Use a public storefront URL, not the portal.
- Keep one clean browser session for guest checkout testing.
- Keep a second browser session available for Google sign-in and linked-order testing.
- Expect the cart to show guest and sign-in options side by side when the customer is not authenticated.
- Expect WhatsApp prompts to depend on whether the customer provided a usable WhatsApp-capable phone number.