Online shop
A shop is a path more than a page, from the shelf to the product to the order. These components cover each stop on that path, in the order a customer takes them.
The order
Top to bottom, the way the sections sit on the finished page.
Step 1 / 8 · Products
Product grid
The shelf, products with price, rating and a quick add, filtered and sorted.
Products in grids, lists, rows and editorial layouts, with filters, quick view and categories.
Step 2 / 8 · Categories and collections
Categories
Category entries lead people who browse instead of search to the right shelf.
The way into a catalog. Shop departments, blog topics, service areas or a directory, as icon tiles, image cards, round thumbnails, link columns or big names on a photo.
Step 3 / 8 · Product pages
Product page
Gallery, variants, price and the add to cart button, the page where the decision falls.
Gallery, options, reviews and buying, from a classic layout to a configurator with live price.
Step 4 / 8 · Reviews and questions
Product reviews
Ratings with photos and verified purchases next to the product answer the doubt in place.
Reviews as their own sections. A full overview with filters, search and shop replies, a customer photo wall, highlights by topic, the form to write one and a review row for home pages.
Step 5 / 8 · Delivery and stores
Shipping estimator
Delivery date and shipping costs before the cart prevent the most common reason to cancel.
When it arrives and what it costs. Options for a postcode, the cut-off of today with the way to the door, rates per region and a delivery window to book.
Step 6 / 8 · Cart and checkout
Cart
The cart shows totals, savings and the way to free shipping.
The cart as a panel, a page, a popover, an empty state and with upsells.
Step 7 / 8 · Cart and checkout
Checkout
Address, delivery and payment on as few steps as possible.
From one page to step by step, express checkout and the confirmation after.
Step 8 / 8 · Account and loyalty
Wishlist
A saved list brings back the people who were not ready to buy today.
Saved products as a grid or list, several named lists, a list friends reserve gifts from and price alerts with a price history.
Install all of it at once
One command puts every component of this collection into your project.
aiw add @ai-website/product-grid @ai-website/categories @ai-website/product-detail @ai-website/product-reviews @ai-website/shipping-estimator @ai-website/cart @ai-website/checkout @ai-website/wishlistPrompt for your AI assistant
Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.
Build an online shop with the UI Kit. Use Product grid, Categories, Product page, Product reviews, Shipping estimator, Cart, Checkout and Wishlist in this order. Write real copy for my offer and check the page in light and dark.More collections
- SaaS landing pageFrom the promise to the trial
- Local businessCafé, shop or trade around the corner
- Medical practiceTrust, hours and the next free slot
- PortfolioWork first, then the person behind it
- Blog or magazineFront page, reading and coming back
- EventProgram, tickets and the countdown
- App dashboardThe frame and the screens inside it
- AI productWhat the AI does, shown honestly
- Creator pageOne person, their work and their audience