Skip to content

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.

Book a free assessment Get started

apps/storefront-template

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. 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. 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. 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. 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. 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.

Book a free assessment Back to K-Shop