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

# Online store

> Set up products, cart, and checkout pages on your Webstorio site.

Sell physical or digital products directly from your Webstorio site. The **Online Store** feature includes a product catalog, shopping cart, and order flow — no separate e-commerce platform required.

**Available on:** Starter plan and above.

## Step 1 — Enable the store

1. Open your **project dashboard**.
2. Enable **Online Store** under **Features**.
3. Webstorio can **scaffold store pages** for you — product listing, product detail, cart, and checkout.

<Tip>
  After enabling, check **Pages** for new store-related pages. You can customize them with the AI editor like any other page.
</Tip>

## Step 2 — Configure your store

Open **Store** in the project sidebar:

| Setting        | Purpose                                                |
| -------------- | ------------------------------------------------------ |
| **Store name** | Displayed on catalog and checkout                      |
| **Currency**   | Prices shown to customers                              |
| **Products**   | Add items with title, description, images, price, slug |

### Adding a product

1. Go to **Store → Products → Add product**.
2. Fill in name, description, price, and images.
3. Set a **slug** for the product URL (e.g. `artisan-mug`).
4. Publish the product when ready.

Organize products with **categories** for filtered catalog views.

## Step 3 — Store pages

Typical store structure:

| Page               | Purpose                               |
| ------------------ | ------------------------------------- |
| **Products**       | Grid or list of all products          |
| **Product detail** | Single product with add-to-cart       |
| **Cart**           | Review items and quantities           |
| **Checkout**       | Customer details and order submission |

Ask the AI to refine layout: *"Make the product grid three columns on desktop, one on mobile"* or *"Add a sticky add-to-cart bar on product detail."*

## Step 4 — How customers buy

1. Visitor browses products and adds items to the **cart** (stored in the browser session).
2. On checkout, they submit contact/shipping details.
3. Webstorio creates an **order** you can view in **Store → Orders**.

<Note>
  **Payment gateway** integration (cards, e-wallets, QRIS) is on the roadmap. Today, orders are captured in the dashboard; you coordinate payment fulfillment outside the platform or manually.
</Note>

## Orders in the dashboard

* **Store → Orders** lists all orders with status, totals, and line items.
* Filter and review customer details.
* Update order status as you fulfill.

## Signed-in customers (Growth+)

With **User Authentication** enabled, customers can sign in and view **My orders** on the site. The SDK exposes `getMyOrders()` and `getMyOrderById()` for account pages.

## For developers and agents

Editing page code yourself? Build catalog, cart, and checkout pages with `window.webstorio` store methods (`getProducts`, `addToCart`, `createOrder`, and more).

→ Methods, parameters, and examples: [Store SDK reference](/api-reference/sdk/store)

Agents can manage products and categories via [MCP](/developer/connect-mcp).