The six screens an online store actually needs
An online store is not one design problem. It is six, and they are only loosely related to each other. The screen that has to convince someone the shop is worth their attention has almost nothing in common with the screen that has to hand over a file they already paid for.
This is a walk through all six, as drawn for 1dot1 — a store selling wallpapers, motion loops, UI kits, spreadsheets and Claude skills as instant downloads. Every flow exists at 1440 and at 390, so the responsive behaviour is a decision made on purpose rather than whatever the grid did when the window got narrow.
Home
The job of a home page in a digital store is to answer two questions fast: what is sold here, and is any of it good. The hero does the first in one line and a subline naming the actual file types. The second is answered immediately below by Most Popular, deliberately two large cards rather than a row of six small ones, because two products shown properly are more persuasive than six shown as thumbnails.
Below that sit three category rows of five, an articles row, a trust bar and the dark footer. The order is a funnel: broad promise, proof, browsable depth, editorial, reassurance.
At 390 the hero keeps its full size — shrinking the one line that has to land would be a strange economy — and the two paired buttons stack. The category rows become horizontally scrollable rather than wrapping, so the page does not turn into an endless column.
All Products
The catalog page states how many files exist and across how many categories, then gets out of the way. The toolbar carries category pills, availability and rating filters on the left, and the count, sort and a grid-density toggle on the right.
The density toggle is the interesting one. A five-column grid is right for browsing and wrong for comparing, so the page offers a seven-column compact view instead of picking a side. It is a link, not a piece of client state, which means a density preference survives being sent to somebody else.
At 390 the filter rail cannot survive as a rail, so it collapses to a single Filters button carrying a count of how many are active, opening a drawer from the right. That count is the whole trick: once filters are hidden, the only thing standing between a shopper and an apparently empty shop is a number reminding them they narrowed it themselves.
The product page
Two columns: a sticky gallery on the left, the buy column on the right. The buy column runs kind label, title, price with the compare-at struck through and a discount pill, then Add to cart, then a thin strip promising instant download, email delivery and lifetime re-downloads.
The part that matters most for digital goods is further down, and it is the part most stores get wrong. A "What you get" manifest lists every file in the package with its format and weight — twelve 6K stills as PNG at 248 MB, four looping motion variants as MP4, a crop guide, the licence — and totals them into one line naming the file count, the single ZIP and the whole download size. Someone buying a physical object can judge it from a photograph. Someone buying a ZIP cannot, so the manifest is the photograph.
At 390 the gallery goes first and the buy column stacks under it, with the price and Add to cart kept above the fold. The manifest survives intact, because a smaller screen is not a reason to hide the one thing that answers what am I actually paying for.
The bundle page
The bundle page is centred rather than split, and that is a considered break from the standard product layout. A bundle has no single hero image, so a sticky gallery on the left would have nothing honest to put in it. Centring the title, the price and the savings pill gives the page a subject.
Under the price sits a strip naming the file count, the total weight and instant delivery, then a row of artwork from four of the products, then everything included, each item showing what it costs on its own. Showing the separate prices is what makes the saving legible: a number in a pill is a claim, and a grid of individual prices is the evidence for it.
At 390 the centred treatment holds and the included grid becomes one column. The per-item separate prices stay, since they are the argument.
The cart drawer
The cart is a drawer over a dimmed page rather than its own route, because a shopper adding a second item should never lose the page they were on.
There is no quantity stepper anywhere in it. A downloadable file is always quantity one, and a stepper would invite a question the store cannot answer sensibly. Line items carry a thumbnail, kind label, title, price and a plain Remove link. Underneath, bundle savings appear as their own line before the subtotal, then a note that taxes are calculated at checkout and there is no shipping because everything is a download. The last line removes the single largest source of checkout anxiety before it starts.
At 390 the drawer takes nearly the full width and the totals block pins to the bottom, so Check out is reachable with a thumb regardless of how many items are in the list.
Checkout success
This is the screen most stores treat as a receipt and it should be a delivery screen. The heading confirms payment and says the files are ready. Below it, a panel lists what was bought with a Download button on every row and a Download all as ZIP link in the corner.
Two smaller decisions carry a lot of weight. The copy states plainly that links stay live for thirty days, or forever with an account, which turns account creation into a benefit rather than an obstacle. And the account prompt sits below the downloads rather than above them, so nothing stands between someone who has paid and the thing they paid for. A signup wall at that moment is the most expensive possible place to put one.
At 390 the download rows stack with the buttons full width, and the account prompt follows in the same order for the same reason.
The chrome that never changes
Six screens, one header and one footer. The header is 72px, sticky, white, with a single hairline under it, and it carries the same left group on every page: the mark, then Home, All Products, Articles, Contact. On the right sit the currency selector, search, account and bag, with the cart count as plain text rather than a coloured bubble — a badge bubble is a notification pattern, and a count of things somebody deliberately put in their own basket is not a notification.
The footer inverts to near-black and is the only place in the whole set where the palette flips. Having exactly one such place is what stops dark sections turning up at random. It holds the newsletter form, three link columns and the copyright, and it is identical on all six screens.
Repeating the chrome exactly is not laziness in a mockup set; it is the point. If the header drifts between the home page and the checkout, the screens stop being a system and become six illustrations.
What is deliberately not there
A set of screens is defined as much by what it refuses. There is no carousel on the home page, because a hero that moves is a hero nobody reads. There is no quantity stepper anywhere. There is no star-rating summary in the catalog toolbar competing with the filters. There is no live chat bubble sitting over the checkout. There is no countdown timer manufacturing urgency around a file that will still be there tomorrow.
Each of those is a normal e-commerce component that would not have looked out of place. Leaving them out is what gives the six screens room to do their actual jobs, and it is the reason the whole set reads as quiet rather than busy.
What the two breakpoints are actually for
Drawing every flow twice is not about proving the design is responsive. It is about forcing the decisions that only show up at 390 to be made deliberately: which rail becomes a drawer, which row scrolls instead of wrapping, what stacks first when a two-column layout collapses, and what is allowed to disappear.
The answer in this set is that almost nothing disappears. Filters move behind a button but keep a count. The file manifest stays. The separate prices on the bundle page stay. What changes is arrangement and reach — the things a thumb has to get to move closer to it.
Get the screens
All twelve screens are available as four HTML pages you open in a browser, with no build step and nothing to install, together with the 24-section design system they were drawn from and the prompt that produced the whole set.