Customization

The E-commerce Starter Kit is designed to be customized for your store. All components use design tokens and Tailwind CSS utilities, making brand adaptation straightforward.

Changing Colors

Update CSS custom properties in app/globals.css:

:root {
  --primary: oklch(0.55 0.2 250);
  --primary-foreground: oklch(0.98 0 0);
  --accent: oklch(0.6 0.15 150);
  --accent-foreground: oklch(0.98 0 0);
}

All components automatically inherit the new colors — buttons, badges, links, charts, and focus rings.

Changing Typography

Configure fonts in app/layout.tsx:

import { Inter, DM_Sans, JetBrains_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-heading" });

Swap these for any Google Font or local font files. The CSS variables --font-sans, --font-heading, and --font-mono control body text, headings, and code respectively.

Replacing Seed Data

All mock data lives in data/seed.ts. Replace it with your data source:

Static data (SSG/ISR)

// In your page
import { getProducts } from "@/lib/api"

export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductGrid products={products} />
}

CMS integration

Replace seed data imports with your CMS client:

import { sanityClient } from "@/lib/sanity"

const products = await sanityClient.fetch(`*[_type == "product"]`)

Database

import { db } from "@/lib/db"

const products = await db.product.findMany()

Extending Components

Use the cn() utility to add custom classes:

import { Button } from "@/components/ui/button"

<Button className="rounded-full shadow-lg" size="lg">
  Add to Cart
</Button>

Adding Component Variants

Components use class-variance-authority:

const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "...",
      brand: "bg-brand-500 text-white hover:bg-brand-600",
    },
  },
})

Customizing the Storefront Header

Edit components/layout/store-header.tsx to:

• Add or remove navigation links
• Change the logo
• Add a currency/language selector
• Modify the cart icon badge

Customizing the Checkout Flow

The checkout uses separate routes for each step. To add or remove steps:

1. Add/remove page files in app/(storefront)/checkout/
2. Update the CheckoutSteps component in components/layout/checkout-steps.tsx
3. Adjust navigation between steps

Adding New Product Fields

1. Update the Product interface in types/index.ts
2. Add the field to products in data/seed.ts
3. Display it in ProductCard or ProductTabs

Adding New Admin Pages

Follow the existing pattern:

1. Create a new page in app/(admin)/admin/your-page/page.tsx
2. Add a navigation link in components/layout/admin-sidebar.tsx
3. Create any needed composites in components/admin/

Removing Unused Features

Delete directories you don't need:

• Don't need compare? Delete app/(storefront)/compare/ and components/storefront/comparison-table.tsx
• Don't need wishlist? Delete app/(storefront)/wishlist/
• Don't need admin analytics? Delete app/(admin)/admin/analytics/
• Run pnpm build to verify no broken imports

Using shadcn/ui CLI

Add new components alongside the kit:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens.