Customization

This guide covers common customizations from rebranding to extending the database schema.

Changing Brand Colors

Update the oklch tokens in app/globals.css:

:root {
  /* Change the primary hue from 45 (terracotta) to your brand hue */
  --primary: oklch(0.55 0.15 YOUR_HUE);
  --primary-foreground: oklch(0.98 0.005 YOUR_HUE);
}

.dark {
  --primary: oklch(0.65 0.15 YOUR_HUE);
}

Common hue values: 0 (red), 30 (orange), 60 (yellow), 120 (green), 210 (blue), 270 (purple), 330 (pink).

Update secondary, accent, chart, and sidebar tokens to maintain visual harmony.

Changing Fonts

In app/layout.tsx, swap the Google Fonts imports:

// Replace these with your preferred fonts
import { Inter, DM_Sans, JetBrains_Mono } from "next/font/google"

Update the CSS variables in globals.css to match:

--font-heading: "Your Heading Font", sans-serif;
--font-body: "Your Body Font", sans-serif;

Replacing Seed Data with Your Products

Option 1: Admin Panel

Use the built-in admin panel at /admin/products/new to create products with image upload.

Option 2: Direct Database Insert

Insert products directly into your Supabase database:

INSERT INTO products (name, slug, description, price, category_id, status, stock, sku)
VALUES ('Your Product', 'your-product', 'Description here', 49.99, 'category-uuid', 'active', 100, 'SKU-001');

Option 3: Bulk Import

Write a migration script that reads from your existing product catalog and inserts into the Supabase tables.

Adding Product Categories

Insert into the categories table:

INSERT INTO categories (name, slug, description, image_url)
VALUES ('Electronics', 'electronics', 'Gadgets and tech', 'https://...');

Update the storefront navigation in data/static.ts to include the new category.

Extending the Database Schema

Adding a New Table

1. Create a new migration file (e.g., 005_custom.sql)
2. Define the table with RLS:

CREATE TABLE coupons (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  code text UNIQUE NOT NULL,
  discount_percent integer,
  created_at timestamptz DEFAULT now()
);

ALTER TABLE coupons ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Public read" ON coupons
  FOR SELECT USING (true);

CREATE POLICY "Admin write" ON coupons
  FOR ALL USING (is_admin());

3. Run the migration in Supabase SQL Editor
4. Regenerate types: npx supabase gen types typescript --project-id xxx > types/database.ts

Adding Columns to Existing Tables

ALTER TABLE products ADD COLUMN weight numeric;
ALTER TABLE products ADD COLUMN dimensions jsonb;

Update the TypeScript types and any queries that read these columns.

Customizing the Checkout Flow

Tax Calculation

Replace the flat 8% tax estimate in app/api/checkout/route.ts:

// Replace this:
const taxAmount = subtotal * 0.08

// With your tax API:
const taxAmount = await calculateTax(subtotal, shippingAddress)

Shipping Rates

Replace fixed shipping costs with dynamic rates:

// Replace this:
const shippingCost = shipping_method === "express" ? 12.99 : 4.99

// With your shipping API:
const shippingCost = await getShippingRate(items, shippingAddress, method)

Currency

Change "usd" to your currency in app/api/checkout/route.ts and update price formatting across the app.

Customizing Email Templates

The kit does not include transactional emails. To add them:

1. Set up a transactional email service (Resend, SendGrid, Postmark)
2. Add email sending to the Stripe webhook handler after order creation
3. Common triggers: order confirmation, shipping notification, review request

Adding New Admin Pages

1. Create a new page in app/(admin)/admin/your-page/page.tsx
2. Add the route to the admin sidebar in components/layout/admin-sidebar.tsx
3. Create Server Actions in lib/actions/your-domain.ts
4. Add RLS policies for the new table

Removing Unused Features

To remove a feature (e.g., wishlists):

1. Remove the route: app/(storefront)/wishlist/
2. Remove the context: context/wishlist-context.tsx
3. Remove wishlist buttons from product cards and PDP
4. Optionally remove the wishlists table from your schema

The kit is modular — removing one feature does not break others.