---
title: "Commerce Engine Starter Kits | Ecommerce Storefront Templates"
description: "Launch faster with production-ready Commerce Engine storefront templates for React, Next.js, TanStack Start, Astro, SvelteKit, and Node.js."
canonical_url: "https://www.commercengine.io/starters"
---

> Commerce Engine site index: https://www.commercengine.io/llms.txt

# Commerce Engine starter storefronts

Production-ready ecommerce storefronts powered by Commerce Engine. Choose a design, select your preferred framework, and go from clone to production in hours. Every starter connects to the same Commerce Engine APIs, and you can customise every component, interaction and customer journey.

Available for React, Next.js, TanStack Start, Astro and SvelteKit, with a Node.js integration for server-side services.

## Get started

Run the command yourself, or hand it to your coding agent. Both routes end at the same project: configured, typed and talking to the API.

### Scaffold it yourself

One command clones a production starter on your framework, or writes the Commerce Engine layer into the repo you already have. Builds on Next.js, React, TanStack Start, Astro and SvelteKit.

```sh
# A new project: clones a starter, vendors its workspace packages and writes .env
pnpm create commercengine@latest

# A repo you already have: writes src/lib/commerce/, .env and .gitignore, and touches nothing else
pnpm create commercengine@latest --mode existing
```

### Have it built by your coding agent

Install the skills and your coding agent reads the real spec, every SDK method, schema and pattern, before it writes a line. The skills teach setup, catalog, cart, checkout, orders and webhooks.

```sh
# Claude Code: nine skills land in .claude/skills, versioned and MIT-licensed
npx skills add commercengine/skills --agent claude-code

# Cursor: installed as project rules
npx skills add commercengine/skills --agent cursor

# Codex: written into AGENTS.md
npx skills add commercengine/skills --agent codex
```

Lovable has no install step. Add this to your project knowledge: "Use Commerce Engine for commerce. Docs: commercengine.io/docs/llms.txt"

### What either route gives you

A project that already talks to Commerce Engine. The client, session handling and environment are written for you, with `@commercengine/storefront`, `@commercengine/checkout`, `@commercengine/seo` and `@commercengine/ai` installed before you open the editor:

- **Storefront**: the typed Storefront SDK.
- **Hosted Checkout**: a complete checkout to embed.
- **SEO & AEO**: metadata, structured data and agent-readable pages.
- **Agent tools**: commerce tools for AI agents in the browser.

**Docs:** [Commerce Engine documentation](https://www.commercengine.io/docs) · [How agents build on Commerce Engine](https://www.commercengine.io/docs/ai/overview)

## Storefront templates

Each template ships the same commerce capabilities on every framework. The design and features stay identical; only the stack changes.

### Linea

Jewellery & Luxury. An elegant jewellery storefront designed for premium brands, editorial product storytelling, and refined shopping experiences. Linea pairs an editorial homepage with a restrained product experience built for high-consideration purchases: generous whitespace, quiet typography, and merchandising that lets the product lead.

Includes: editorial homepage, product listing, product filtering, product detail experience, wishlist, cart, checkout flow, responsive navigation and Commerce Engine integration.

| Framework | Live demo | Source |
| --- | --- | --- |
| React | https://linea.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/linea |
| Next.js | https://linea-next.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/linea-next |
| TanStack Start | https://linea-tanstack.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/linea-tanstack |
| Astro | https://linea-astro.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/linea-astro |
| SvelteKit | https://linea-svelte.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/linea-svelte |

### Little Things

Electronics & Lifestyle. A modern electronics storefront designed for product-rich catalogues, bold merchandising, and fast product discovery. Little Things is built for breadth: dense category navigation, promotional surfaces, and a listing experience tuned for shoppers comparing dozens of products at once.

Includes: product-focused homepage, category navigation, product listing, product filtering, product detail experience, wishlist, cart, checkout flow and Commerce Engine integration.

| Framework | Live demo | Source |
| --- | --- | --- |
| React | https://little-things.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/little-things |
| Next.js | https://little-things-next.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/little-things-next |
| TanStack Start | https://little-things-tanstack.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/little-things-tanstack |
| Astro | https://little-things-astro.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/little-things-astro |
| SvelteKit | https://little-things-svelte.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/little-things-svelte |

### SOJA

Beauty & Cosmetics. A refined beauty storefront designed for skincare, cosmetics, and ritual-led product storytelling. SOJA blends immersive editorial imagery with a warm, understated shopping experience for beauty brands, ideal for communicating ingredients, rituals, and product benefits without losing focus on conversion.

Includes: editorial homepage, category navigation, product listing, product filtering, product detail experience, wishlist, cart, checkout flow and Commerce Engine integration.

| Framework | Live demo | Source |
| --- | --- | --- |
| React | https://soja.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/soja |
| Next.js | https://soja-next.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/soja-next |
| TanStack Start | https://soja-tanstack.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/soja-tanstack |
| Astro | https://soja-astro.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/soja-astro |
| SvelteKit | https://soja-svelte.demo.commercengine.com | https://github.com/tark-ai/ce-starter-projects/tree/main/apps/soja-svelte |

## Frameworks

Use the framework your team already knows. Every starter connects to the same Commerce Engine APIs and commerce capabilities.

| Framework | Stack | Rendering |
| --- | --- | --- |
| React | Vite | Client-side SPA |
| Next.js | App Router | SSG with ISR |
| TanStack Start | — | SSG with link crawling |
| Astro | — | SSG with island hydration |
| SvelteKit | Svelte 5 | SSG with static adapter |
| Node.js | Storefront SDK | Server-side services and APIs |

Node.js is a server-side SDK integration rather than a storefront build, so it has no template or demo.

## How it works

No scaffolding, no boilerplate. Each step is a choice you make once; the commerce layer is already wired up.

1. **Choose a template**: Select the storefront experience that best suits the brand or business.
2. **Select your framework**: Choose the framework the development team already uses. The design and capabilities stay identical; only the stack changes.
3. **Connect Commerce Engine and customise**: Configure the starter, connect commerce data, and adapt the storefront to the project.

Every starter ships working: product catalogue, search and filtering, customer accounts, wishlist, cart, checkout, promotions, order management, responsive layouts, framework integration and Commerce Engine APIs.

## Connected to Commerce Engine from day one

Every starter includes the foundation needed to load products, manage carts, and build custom commerce experiences with Commerce Engine APIs: a typed Storefront SDK, an environment-aware client, and the same calls in every framework.

```ts
import { createStorefront, Environment } from "@commercengine/storefront";

export const storefront = createStorefront({
  storeId: process.env.NEXT_PUBLIC_STORE_ID!,
  apiKey: process.env.NEXT_PUBLIC_API_KEY!,
  environment: Environment.Production,
});

// The starter's product page loads its data like this.
const { data, error } = await storefront.public().catalog.getProductDetail({ product_id: "<product-id>" });
```

**Docs:** [Developer documentation](https://www.commercengine.io/docs)

## Related

- [Hosted Checkout and payments](https://www.commercengine.io/features/payments.md)
- [Catalog & Inventory](https://www.commercengine.io/features/catalog.md)
- [Marketing & Campaigns](https://www.commercengine.io/features/marketing-and-campaigns.md): SEO and agent-ready storefront pages.
- [All features](https://www.commercengine.io/features.md)

## Get started

Pick a template, choose your stack, and take a fully customizable storefront to production in hours.

- [Start building free](https://app.commercengine.io/signup)
- [Talk to our team](https://www.commercengine.io/contact-us.md)
- [Read the documentation](https://www.commercengine.io/docs)