> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleap.co/llms.txt
> Use this file to discover all available pages before exploring further.

# E-commerce Store

> Build an online store

Create an online store to sell products with shopping cart and checkout.

## What We're Building

An e-commerce store with:

* Product catalog with categories
* Product detail pages
* Shopping cart
* Checkout with Stripe
* Order confirmation

## Prerequisites

* Kleap account
* Stripe account (for checkout)

Product data can be hardcoded in your site or stored in **Kleap Database** — a managed database built into Kleap (no separate account to connect).

## Step 1: Store Your Products

Your catalog can live in one of two places:

* **Static data** — hardcode the product list in your site. Simplest, great for a small catalog that rarely changes.
* **Kleap Database** — a managed database built into Kleap (no separate account). Best when you want to add or edit products without redeploying.

### Option: Kleap Database

```
Enable Kleap Database and create a products table:

products
   - id (uuid, primary key)
   - name (text)
   - description (text)
   - price (numeric)
   - image_url (text)
   - category (text)
   - inventory (integer)
   - created_at (timestamp)

Make products publicly readable.
```

Orders and payments are handled by Stripe's hosted checkout (Step 5), so you don't need orders tables in your site — Stripe records every order for you.

### Add Sample Products

```
Add 6 sample products (static data or in Kleap Database):
- Mix of different categories
- Realistic prices
- AI-generated or your own product images
```

## Step 2: Product Catalog

### Homepage

```
Create an e-commerce homepage with:
- Hero banner with featured products or sale
- Category navigation
- Featured products grid (4-6 items)
- "View All Products" link
```

### Products Page

```
Create a products page that:
- Shows all products in a responsive grid
- Has category filter tabs
- Has sort options (price, newest)
- Shows product cards with image, name, price, add to cart
- Handles empty state
```

### Product Card

```
Create a product card component with:
- Product image (hover zoom effect)
- Product name
- Price display
- "Add to Cart" button
- Quick view option
- Sale badge (if discounted)
```

## Step 3: Product Detail Page

```
Create a product detail page at /products/[id] with:
- Large product image gallery
- Product name and price
- Full description
- Quantity selector
- "Add to Cart" button
- Related products section
- Back to products link
```

### Image Gallery

```
Add an image gallery to product pages:
- Main large image
- Thumbnail strip below
- Click thumbnail to change main image
- Lightbox on click
```

## Step 4: Shopping Cart

### Cart State

```
Implement shopping cart functionality:
- Store cart in localStorage (persists across sessions)
- Add to cart function
- Remove from cart function
- Update quantity function
- Calculate totals
```

### Cart Sidebar

```
Create a cart sidebar/drawer that:
- Opens when clicking cart icon
- Shows list of cart items
- Each item shows: image, name, quantity, price, remove button
- Shows subtotal
- Has "Continue Shopping" and "Checkout" buttons
- Shows empty cart message when empty
```

### Cart Icon

```
Add a cart icon to the navigation that:
- Shows current item count badge
- Opens cart sidebar on click
- Updates dynamically when items added
```

## Step 5: Checkout with Stripe

Your store is a static Astro site, so checkout runs on Stripe's hosted pages. You only ever use your Stripe **publishable** key — no secret key (`sk_...`) and no server code live in your site.

### Set Up Stripe

1. In your Stripe Dashboard, create a **Payment Link** or **Buy Button** for each product (or a **Pricing Table** for a set of products).
2. Copy each product's link or Buy Button embed snippet.

### Add Checkout

```
Wire up checkout:
- Point each product's "Buy" action to its Stripe Payment Link (or embed the Buy Button)
- Clicking Buy sends the shopper to Stripe's hosted checkout page
- Stripe collects payment and shipping details, then emails a receipt
- After payment, Stripe redirects back to a success page on your store
```

<Note>
  Stripe Payment Links and Buy Buttons each sell one product (or a fixed bundle). A fully dynamic cart that totals arbitrary items into a single Stripe Checkout Session needs a backend beyond a static site — for that, use a Payment Link per product, a Stripe Pricing Table, or add a small server/serverless function as an advanced step.
</Note>

### Order Confirmation

```
Create an order confirmation / success page that:
- Shows after Stripe redirects back from a successful payment
- Thanks the customer
- Includes a "Continue Shopping" button
```

Stripe emails the receipt and records the order in your Stripe Dashboard.

## Step 6: Orders (Optional)

Every order and payment lives in your **Stripe Dashboard** — view orders, payment status, and customer details there without adding anything to your site.

An in-app orders page or admin panel (past orders, status updates, sales stats) needs to read payment data from a backend, which is beyond a static site. Use the Stripe Dashboard for order management, or add a small server/serverless layer as an advanced step.

## Step 7: Polish

### Loading States

```
Add loading states:
- Product grid skeleton while loading
- Button spinner when adding to cart
- Checkout button loading state
```

### Error Handling

```
Add error handling:
- Show error if product fails to load
- Handle out of stock items
- Display payment errors gracefully
```

### Mobile Optimization

```
Optimize for mobile:
- Full-screen cart on mobile
- Touch-friendly product gallery
- Mobile-optimized checkout
- Easy quantity adjustments
```

## Step 8: Launch

### Pre-Launch Checklist

* [ ] All products display correctly
* [ ] Add to cart works
* [ ] Cart updates correctly
* [ ] Buy buttons open Stripe checkout
* [ ] Payment processes successfully
* [ ] Order confirmation shows
* [ ] Mobile works well

### Deploy

1. Click **Publish**
2. Test checkout in Stripe test mode
3. Switch your Payment Links / Buy Buttons to live mode
4. Connect a custom domain

## Enhancements

After launching, consider adding:

* **User accounts** - Save shipping info, order history
* **Reviews** - Product ratings and reviews
* **Wishlists** - Save products for later
* **Search** - Search products by name
* **Inventory tracking** - Update stock on purchase
* **Email notifications** - Order confirmation emails
* **Discount codes** - Coupon system

## Complete Prompt Flow

1. Database setup
2. Homepage with featured products
3. Products listing page
4. Product detail page
5. Shopping cart functionality
6. Stripe checkout (Payment Links / Buy Buttons)
7. Order confirmation
8. Polish and mobile optimization

<Card title="Stripe Integration" icon="credit-card" href="/integrations/stripe">
  Complete Stripe setup guide
</Card>