Skip to main content
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.
After enabling, check Pages for new store-related pages. You can customize them with the AI editor like any other page.

​
Step 2 — Configure your store

Open Store in the project sidebar:

​
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: 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.
To collect payment at checkout (QRIS via Xendit), enable Payment Gateway and connect your key under Store → Payments. See Payment Gateway.

​
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.
  • When order email notifications are enabled (default), Webstorio emails you when an order is ready: after QRIS payment succeeds if Payment Gateway is connected, or as soon as the order is placed if it is not.

​
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 Agents can manage products and categories via MCP.