Shopping website UI mockup

The 4 screens

Shopping website: Home, Product listing, Product detail, Cart & checkout. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.

1. Home

   Browser page with 5 images, 5 paragraphs, 4 cards, 4 labels, 4 ratings, 3 badges, 2 buttons, 2 headings and 4 more component types.

   Headings

   Layers for the long weekend · Featured this week

   Navigation

   New in · Women · Men · Home · Sale

   Buttons and actions

   Shop the collection · Lookbook

   Text and labels

   Autumn ’26 · Linen, merino and waxed cotton - made to be worn for years. Free returns within 60 days. · View all products · New · Merino crew sweater · $98 · Waxed field jacket · $245 · Linen overshirt · $89 · Hot · Leather weekender bag · $310

2. Product listing

   Browser page with 10 labels, 9 paragraphs, 7 badges, 7 cards, 6 checkboxes, 6 images, 6 ratings, 3 dividers and 7 more component types.

   Headings

   Knitwear · Filters

   Navigation

   New in · Women · Men · Home · Sale

   Fields

   Sort: Featured

   Buttons and actions

   Apply filters

   Text and labels

   Home / Women / Knitwear · 42 products · Category · Sweaters · Cardigans · Vests · Size · XS · S · M · L · XL · Price · $40 – $180

3. Product detail

   Browser page with 5 images, 5 paragraphs, 4 badges, 2 buttons, 2 dropdowns, 2 headings, 2 labels, 2 links and 4 more component types.

   Headings

   Merino crew sweater · $98.00

   Navigation

   New in · Women · Men · Home · Sale

   Fields

   Select a size · Qty: 1

   Buttons and actions

   Add to cart · ♡ Add to wishlist

   Text and labels

   Home / Women / Knitwear / Merino crew sweater · Bestseller · 214 reviews · Knitted in Portugal from 100% extra-fine merino. Breathable, temperature-regulating and soft enough to wear next to skin. · Colour: Oat · Oat · Charcoal · Navy · Size · Size guide · Free shipping on orders over $75 · Free 60-day returns and exchanges · Ships in 1–2 business days from Portland, OR

4. Cart & checkout

   Browser page with 10 labels, 10 text inputs, 7 headings, 3 dividers, 3 paragraphs, 2 buttons, 2 images, a card and 5 more component types.

   Headings

   Checkout · Contact · Shipping address · Payment · Order summary (2) · Total · $370.44

   Navigation

   Cart · Information · Shipping · Payment

   Fields

   Email address · First name · Last name · Street address · City · State · ZIP code · Card number · MM / YY · CVC

   Buttons and actions

   Pay $370.44 · Apply

   Text and labels

   Email me about new arrivals · Merino crew sweater · Oat · M · Qty 1 · $98.00 · Waxed field jacket · Olive · L · Qty 1 · $245.00 · Subtotal · $343.00 · Shipping · Free · Estimated tax · $27.44 · Secure checkout · 256-bit SSL · Powered by Stripe

Open and edit it

The shopping website mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.

More mockups

• Admin dashboard UI mockup - A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.
• Travel booking UI mockup - A hotel booking site: search with dates and guests, filtered results with hotel cards, and a guest details + payment checkout.
• SaaS landing page UI mockup - A full marketing page for a project-management product: hero with two calls to action, features, pricing tiers, a testimonial, FAQ and footer.
• Sign in and sign up flows UI mockup - The three account screens every product needs: sign in with social options, create an account with a password strength meter, and reset a forgotten password.
• Video streaming site UI mockup - A streaming service - browse rows with continue watching and trending titles, a series detail page with episodes, and the video player.
• Project board UI mockup - A kanban project tool - columns of task cards with tags, progress and assignees, and a task detail page with subtasks, activity and properties.