SHOP.CO — online store prototype in Figma
We designed a Figma prototype of an online clothing store under the SHOP.CO name: home page, filtered catalogue, product page and cart for desktop and mobile. These are interface mock-ups, not a launched shop, and the path runs right up to checkout.
Challenge
SHOP.CO is a fictional clothing brand we built this prototype around: there is no real client, launch or sales behind the project. The mock-ups show an everyday wardrobe of T-shirts, shirts, jeans, shorts and hoodies; the Casual category alone lists a hundred items, and the catalogue filters cover nine sizes and ten colours.
An online store prototype first has to prove that shoppers can find an item in a large range. Even in the mock-up, the Casual category holds a hundred products, and without convenient filters people scroll an endless grid, get tired and leave without the item they came for.
With clothing, size, colour and fit decide the purchase, while the photo only catches the eye. The product page has to answer those questions before anything goes into the cart, and other shoppers' reviews carry extra weight for clothing: they are how people judge fabric, sizing and quality.
The cart is where orders are lost most often. Shoppers want to see the final amount before checkout, including the discount, delivery cost and promo code, with no surprises at the last step. If something is unclear, closing the tab is easier than working it out.
The same flows have to work on a phone, where there is simply no room for a filter sidebar and a wide product grid. Both versions were needed on one shared set of elements, so that a shop could be built from the mock-ups without reworking the logic of the screens.
Solution
We built the prototype around the shopper's path: home page, catalogue, product page and cart. Each screen answers one question: what the shop has, what suits me, whether the item is worth the money and what the total will be. The screens exist only in Figma with no working website behind them, so features are shown at interface level.
The home page is the entry point: search in the header, a first screen with a Shop Now button, new arrivals and collections all lead into the catalogue. There, filters by category, price, colour, size and style sit on the left and a product grid with sorting and pagination on the right. The product page lets shoppers pick a colour, size and quantity, and the cart works out the discount, delivery and total and accepts a promo code.
We made the mock-ups in Figma for desktop and mobile. The header with search, product card, rating stars, discount price tag and buttons repeat across all screens as shared elements, and the footer holds a newsletter sign-up and badges for Visa, Mastercard, PayPal, Apple Pay and Google Pay.
A catalogue filtered by size
The sidebar brings together five filter groups: category, a price range slider, ten colours, nine sizes from XX-Small to 4X-Large and dress style. Filters are applied with a single Apply Filter button once the shopper has set everything.
Sorting, a counter and pagination
Above the catalogue grid, shoppers see how many items were found, 'Showing 1-10 of 100 Products', and how they are sorted, by popularity by default. Page numbers and Previous and Next buttons sit at the bottom, and breadcrumbs above the heading lead one level up.
A product page with size choice
A three-photo gallery, rating, current and crossed-out prices with a discount badge, colour and size choice, a quantity counter and an Add to Cart button all fit on the first screen of the product page. Shoppers can decide whether an item suits them without scrolling.
Reviews and questions under the product
Below the product sit three tabs: details, rated reviews and frequent questions. The reviews section has date sorting, a filter and a Write a Review button, and every review shows its publication date and a verified shopper badge.
A cart with a transparent total
Every line in the cart shows size, colour and price, quantity changes with buttons and a bin icon removes an item. The Order Summary block shows the subtotal, discount, delivery and total, accepts a promo code and leads on with a Go to Checkout button.
Desktop and mobile versions
All four screens come in two versions, one for wide screens and one for phones. Shared elements such as the header with search, the product card and the footer with a newsletter and five payment badges repeat in both, so the interface is recognisable on any device.
Results
The project's key outcomes in numbers.
- 4Key screens
Home, catalogue, product page and cart: the shopper's whole path up to the checkout button.
- 2Mock-up versions
Every screen is shown in a desktop version and in a smartphone version.
- 5Catalogue filter groups
Category, price, colour, size and dress style narrow the results down to items that fit.
- 3Product page tabs
Details, reviews and frequent questions open under the product without leaving the page.
Design & interfaces
Key screens and interfaces of the project.
Project tech stack
The stack we used to build the solution for the client's task.
- Figma
Similar cases
Ready to become the next case?
Tell us about your task — a manager will assemble the team, calculate the estimate and send a proposal within the first hour after the request. No obligations, no drip campaigns.