Skip to main content

How It Works

The How To Order page is the storefront education surface for first-time customers. It reduces uncertainty by explaining the full flow in a short step sequence from sign-in through collection.

What this flow covers​

  • Opening the How It Works page
  • Reviewing the four public ordering steps
  • Following the CTA back into the storefront

Open the page​

1. Open the How It Works page from the storefront footer or quick links​

The page lives at /how-to/ on the reference storefront.

Live screenshotHow It Works page entry point
How It Works page entry point
static/img/storefront/how-it-works/placeholder.svg

2. Review the How To Order page intro​

The page explains that customers can get drinks quickly by following a short four-step process.

Live screenshotHow It Works page intro
How It Works page intro
static/img/storefront/how-it-works/placeholder.svg

Review the four ordering steps​

3. Capture the Sign in with Google step​

The page starts with Google sign-in as the first step in the illustrated journey.

Live screenshotHow It Works sign-in step
How It Works sign-in step
static/img/storefront/how-it-works/placeholder.svg

4. Capture the Add To Cart and Select Payment steps​

These middle steps explain browsing, customization, and choosing how to pay.

Live screenshotHow It Works cart and payment steps
How It Works cart and payment steps
static/img/storefront/how-it-works/placeholder.svg

5. Capture the Collect In Store step and CTA​

The final step closes the loop with collection guidance and a Start Ordering Now call to action.

Live screenshotHow It Works collection step and CTA
How It Works collection step and CTA
static/img/storefront/how-it-works/placeholder.svg

Good practice​

  • Use this page when documenting onboarding for new customers who have never used order-ahead before.
  • Capture the intro and the step cards together if the layout is visible in one screen; otherwise split them into separate shots.