E-commerce section 01 · Product card row
Four product cards with badge, wishlist heart, colour swatches, rating, price and a quick-add button that appears on hover.
E-commerce sections 36
E-commerce section 02 · Product grid with filters
A shop listing with a filter sidebar (categories, price, on-sale), sort menu and live product count. Filters really work.
E-commerce section 03 · Product detail
A full product page top: thumbnail gallery, title, rating, price, colour and size pickers, quantity, add to cart and detail accordions.
E-commerce section 04 · Shopping cart
A full cart page: line items with quantity steppers and remove, a free-shipping progress bar, promo code and live totals.
E-commerce section 05 · Mini-cart drawer
A slide-in cart drawer from the right with items, free-shipping progress, an upsell and checkout. Opens from a cart button in a demo header.
E-commerce section 06 · Checkout
A one-page checkout: contact, delivery address, delivery method, payment with card fields, and an order summary with line items.
E-commerce section 07 · Order confirmation
A thank-you page with order number, delivery timeline, items, address, payment summary and next actions.
E-commerce section 08 · Category banners
A bento grid of category banners: one large seasonal tile and four smaller ones, each with product art and a shop link.
E-commerce section 09 · Featured product spotlight
A big product feature with callout dots on the illustration, key specs, price and an add-to-cart bar. For launches and hero products.
E-commerce section 10 · Bundle builder
A "frequently bought together" bundle: tick items in or out, see the bundle price and savings update, then add all to cart.
E-commerce section 11 · Tabbed collection
Tabs switch between New in, Bestsellers and Sale, each showing a row of compact product cards with an add button.
E-commerce section 12 · Local order menu
An order-ahead menu for a bakery or café: grouped items with add/remove steppers, pickup time picker and a sticky order bar.
E-commerce section 13 · Quick view product grid
A fashion product grid where each card has a Quick view button that opens a dialog with a mini gallery, colour and size choice, quantity and Add to bag, without leaving the page.
E-commerce section 14 · Size guide and fit finder
A size guide with a cm/inches switch and highlighted row, plus a fit finder that suggests a size from height, weight and preferred fit, with a confidence note.
E-commerce section 15 · Stepped checkout
A three-step checkout (details, delivery, payment) with express pay buttons, a step indicator, address and delivery options, card form with formatting, and an order summary that collapses on phones.
E-commerce section 16 · Product comparison table
A three-product comparison with sticky product headers, a best-seller badge, check and cross marks, a "show differences only" switch and add-to-bag buttons.
E-commerce section 17 · Subscribe and save product
A coffee product page section with one-time or subscribe-and-save purchase options, delivery frequency, grind choice, a live price with savings, tasting notes and a pause-any-time note.
E-commerce section 18 · Flash sale countdown
A time-limited sale section: bold banner with a live countdown, deal cards with original and sale prices, percentage badges, stock bars that turn red when low, and an ends-soon state.
E-commerce section 19 · Reviews with rating breakdown
A product reviews section: average score, clickable star histogram that filters reviews, fit summary, photo review strip, sorting, verified badges and helpful votes.
E-commerce section 20 · Wishlist page
A saved-items page: price-drop and low-stock badges, move to bag, remove with undo, notify-me for out-of-stock items, a running total and a share-wishlist link.
E-commerce section 21 · Gift card builder
A digital gift card builder: choose a design, pick an amount or enter your own, add recipient and a message, choose a send date, and watch a live preview of the card update.
E-commerce section 22 · Click and collect stock checker
Check stock in nearby stores: choose a size, search a postcode, see each store's distance, stock level for that size and collection time, then reserve for pickup.
E-commerce section 23 · Sofa configurator
A furniture configurator: pick fabric, leg finish and size and the sofa preview recolours live, with price that updates, delivery estimate, fabric swatch sample offer and finance per month.
E-commerce section 24 · Returns portal
A self-service returns flow: pick items from an order, choose a reason and refund or exchange for each, pick a drop-off or courier collection, and see a refund summary before confirming.
E-commerce section 25 · Plant shop grid and list
A plant shop collection with a grid/list view switch, sort menu and care-level filter; list view adds light and size details, and results update live.
E-commerce section 26 · Product page with sticky buy bar
A cast-iron cookware product page: colour swatches that recolour the product, a postcode delivery estimate with real dates, and a slim buy bar that sticks to the bottom once the main button scrolls away.
E-commerce section 27 · Limited drop raffle
A trainer release with a live countdown to the raffle closing, size picker that greys out sold-out sizes, entry count, and an entry form with a confirmation state and what happens next.
E-commerce section 28 · Buy more, save more tiers
A supplement product with quantity-break cards (1, 2, 3 or 6 tubs) showing price per tub, percentage saved and free gifts, plus a one-time or subscribe switch that updates every price.
E-commerce section 29 · Recipe to basket
A grocery recipe card: ingredients with checkboxes, a servings stepper that rescales every quantity and price, a “I already have it” toggle, and one button to add the rest to your basket.
E-commerce section 30 · Engraving personaliser
A jewellery personaliser: type up to 12 characters and see them engraved live on the pendant, choose font and metal, with a character counter, extra price and a proof reminder.
E-commerce section 31 · Marketplace seller shop
An independent seller’s shop on a marketplace: cover, avatar, rating, sales and response time, follow and message buttons, shop tabs, and listings with “ships from” and star rating.
E-commerce section 32 · Camera hire date range
A kit-hire booking card: product image, add-ons, a December calendar where you pick a start and end date (unavailable days disabled), and a running total for the days chosen.
E-commerce section 33 · Digital product with licences
A font and template bundle product page: preview tabs (alphabet, in use, files), licence cards that change the price and terms, included file formats, and an instant download note.
E-commerce section 34 · Product questions and answers
Customer Q&A on a camping stove page: search questions as you type, helpful votes, sort by most helpful or newest, an empty state and an ask-a-question form with a submitted state.
E-commerce section 35 · Gift finder
A gift finder for a department store: choose who it’s for, their interests and a budget slider; matching gifts appear with a count, “perfect match” badges and gift-wrap options.
E-commerce section 36 · Bike parts fitment checker
A bike parts shop that checks fit: choose your bike from a garage selector, every part shows “Fits your bike” or “Won’t fit”, with a toggle to show only parts that fit and a saved-bike chip.