Get started

Quickstart

Run the complete storefront on your machine in Demo Mode — no WordPress, no database, no API keys.

Demo Mode runs the storefront against an in-memory store seeded with products, categories, brands, blog posts, reviews and a demo customer. Everything works — search, cart, coupons, checkout with test cards, sign-in, order history and invoices — so it is the fastest way to see the product, review designs, or pitch it to a client.

Before you begin

You need Node.js 22 or newer and Git, plus read access to the retail-store-frontend repository (weLabs grants it). The repository pins its package manager, so pnpm is enabled through Corepack — npm and Yarn are not supported.

Run the demo

Clone and install

git clone git@github.com:welabs-ltd/retail-store-frontend.git
cd retail-store-frontend
corepack enable
pnpm install

Create your environment file
Terminal window
```
cp apps/storefront/.env.example apps/storefront/.env
```
The example file already selects Demo Mode (COMMERCE_SOURCE=mock). The only value you must add is a session secret:
Terminal window
```
openssl rand -base64 32
```
Paste the output into apps/storefront/.env:
```
AUTH_SECRET=paste-the-generated-value-here
```
Start the storefront
Terminal window
```
pnpm dev
```
Open http://localhost:3000. You are looking at a complete store.

Take the tour

Try these to see the main flows end to end:

Try this	How
Search as you type	Start typing in the header search box.
Filter the shop	Open Shop and combine category, brand, price and rating filters — the URL is shareable.
Use a coupon	Add something to the cart and apply `DEMO10` for 10% off.
Pay with a test card	At checkout, choose the card method and use `4242 4242 4242 4242` (approved), `4000 0000 0000 0002` (declined) or `4000 0000 0000 3220` (3-D Secure challenge).
Try express checkout	Use the demo wallet button on a product page, the cart or the checkout.
Sign in	Use `demo@retail.store` / `demo1234` to see orders, invoices, addresses and the wishlist.
Preview a draft product	Visit `/api/preview/enter?token=demo-preview-d1`.

All of the demo values are collected on Demo data.

See it in Arabic

The storefront is multilingual and fully right-to-left aware. Restart it with two locales:

STOREFRONT_LOCALES=en,ar pnpm dev

A language switcher appears in the header, and every page is available under /ar.

Next steps

Connect to WooCommercePoint the storefront at a real store.

Install the Companion pluginSet up the WordPress side.

How it worksThe architecture in five minutes.

Demo Mode in depthWhat's seeded and how to use it for QA.

Storefront Playbook · Built by weLabsFeatures FAQ Talk to us