Step 1 — Enable the store
- Open your project dashboard.
- Enable Online Store under Features.
- Webstorio can scaffold store pages for you — product listing, product detail, cart, and checkout.
Step 2 — Configure your store
Open Store in the project sidebar:Adding a product
- Go to Store → Products → Add product.
- Fill in name, description, price, and images.
- Set a slug for the product URL (e.g.
artisan-mug). - Publish the product when ready.
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
- Visitor browses products and adds items to the cart (stored in the browser session).
- On checkout, they submit contact/shipping details.
- Webstorio creates an order you can view in Store → Orders.
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.
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 exposesgetMyOrders() and getMyOrderById() for account pages.
For developers and agents
Editing page code yourself? Build catalog, cart, and checkout pages withwindow.webstorio store methods (getProducts, addToCart, createOrder, and more).
→ Methods, parameters, and examples: Store SDK reference
Agents can manage products and categories via MCP.
