apps/storefront-template

From clone to storefront
in 1 day

Next.js 15 skeleton consuming the 8 libs. Fork, configure 3 env vars, customize logo + color — you're live.

Get started → I want white-label

What's inside

Everything a real store needs, ready to customize.

Home

Hero carousel + featured products + CTA

Listing with faceted filters

Filters by category, brand, price, tag

Product detail

Gallery, variants, price by list, add to cart

Persistent cart

UUID + expiry, sync with Odoo when logged in

Full wishlist

FAB, drawer, header badge, sync when logged in

Supabase auth

Email/password + social login, recovery, profile

Complete checkout

Addresses, shipping, payment methods, NF-e

Customer dashboard

Orders, downloads, addresses, personal data

Getting started

5 steps from clone to customization.

1

Clone and install

Fork the monorepo, install dependencies with pnpm. Everything ready for green typecheck and tests.

git clone git@github.com:kmee/k-shop-libs.git
cd k-shop-libs
pnpm install
pnpm typecheck    # green
pnpm test         # green
2

Configure the template

Edit .env.local with your Odoo, Elasticsearch and Supabase URLs. Just 3 backends.

# Odoo / Shopinvader
NEXT_PUBLIC_ODOO_BASE_URL=https://shop.example.com/shop

# Elasticsearch (server-side)
ELASTICSEARCH_URL=https://elastic.example.com
ELASTICSEARCH_API_KEY=YOUR-KEY
ELASTICSEARCH_PRODUCT_INDEX=products

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://YOUR.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR-ANON-KEY
3

Run dev server

Default hero carousel, featured products listing from your Elasticsearch, header with search/wishlist/cart, footer.

pnpm --filter storefront-template dev
# → http://localhost:3000
4

Customize branding

Logo, colors via HSL tokens, footer. The whole UI follows automatically.

/* app/globals.css */
@import "@kmee/shop-ui/tokens.css";

@layer base {
  :root {
    --primary: 25 100% 50%;          /* your color */
    --primary-foreground: 0 0% 100%;
    --radius: 0.75rem;
  }
}
5

Customize pages and flows

Override pages as needed. Add new components consuming shop-react providers.

// app/custom-product/page.tsx
"use client"
import { useCart } from "@kmee/shop-react"
import { ProductCard } from "@kmee/shop-ui"

export default function Page() {
  const { addToCart } = useCart()
  // ...
}

How deep can you customize

From surface branding to custom adapters.

Visual branding

1 day

Colors, font, radius, logo, footer. No TypeScript code — just CSS vars.

Page content

2–5 days

Texts, images, hero banners, footer links, FAQ. Plain JSX, easy to edit.

New checkout flows

1–4 weeks

B2B quotes, approval levels, custom payment. Compose with existing providers.

Third-party gateway/ERP integration

1–3 weeks

Custom adapter plugged in as subclass of OdooHttpClient or ProductService.

Offline mode for evaluation

No real backend? You can mock and see the UI running.

If you just want to evaluate the UI without setting up Odoo + Elasticsearch + Supabase, you can mock adapters returning static data. The storefront-template has fallback with FALLBACK_SLIDES and fake products — open app/page.tsx and lib/server.ts for the mock entry point.

For serious evaluation with real data, we suggest plugging into a KMEE Odoo demo instance. Ask in the diagnostic.

Need a custom white-label template?

KMEE delivers the template with your visual identity, B2B/B2C flows tailored, and integrated to your Odoo. You receive it ready to deploy.

Back to K-Shop → Request white-label