When I sketched the layout for a model coffee shop in 2014, it made sense to describe the header, home page, category and product detail almost like building blocks: logo left, cart right, filters here, buy button there.
People’s basic expectations have not changed much. The context has: most designs must work on mobile, offers are more complex and every additional script competes for speed and attention. I therefore no longer recommend copying a layout blindly. I recommend walking through customer tasks.
The header should orient, not show every option
In the header people look for the brand, navigation, search, account and cart. They do not all need equal volume. Priority changes with the catalogue and buying stage.
- The logo leads home and has an understandable text name.
- Search is easy to reach where people know a product or parameter.
- The cart shows its state and does not disappear after an item is added.
- Contact or help is findable without competing with the purchase.
- The menu works by touch, keyboard and without precise mouse aiming.
A drawer menu can help a broad catalogue. With ten categories it is often just an impressive obstacle. Google recommends making categories and products reachable through ordinary navigation links; search alone may not expose the whole catalogue to robots. The principles are described in the e-commerce site structure documentation.
The home page should distribute traffic, not narrate the entire catalogue
On the home page I need to quickly understand what the shop sells, who it is for and where to continue. Instead of an automatic slider, I prefer one clear priority and several stable entrances to the main buying situations.
Best sellers can help, as can seasonal categories, advice or a reason to trust the shop. Every block must have a job. “So the page is not empty” is not a job.
A category helps narrow the choice
A category is not SEO text pasted above a product grid. It is a decision tool. Its name and short introduction define the offer, filters narrow it and sorting helps with the customer’s situation.
- Name filters in customers’ language, not internal database fields.
- Show active choices after filtering and make them easy to remove.
- Expose important subcategories as links, not only as script values.
- Show list data needed for comparison; put the rest in the detail.
- An empty result should offer a way back, not a dead end.
Breadcrumbs help people understand their position in the catalogue and can help search engines understand hierarchy. If you use structured data, follow Google’s current documentation on breadcrumbs.
The product detail must answer questions before and after the button
A visible add-to-cart button is a foundation, not the whole detail. Before deciding, people need the name, price, variant, availability, shipping, returns, photographs and information appropriate to the purchase risk.
For coffee, origin, flavour, roast, weight and preparation matter. For a drill, specifications, compatibility and service matter more. There is no universal order. There is a universal question: what does the customer need to know to buy the right variant and not return it later?
Reviews should be credible and relate to the specific product. Recommended goods should support the choice, not divert someone from an almost completed purchase. A social button on a product detail is still not a priority. We should have survived the time when a like button was an answer to everything.
The cart and checkout should remove surprises
The cart must allow quantity and variant changes and item removal. Show the total price, shipping and delivery date as early as possible, not after the third step and registration.
Guest checkout is often a sensible default. If an account offers real value, offer it after the order. Forms need correct labels, autofill and errors that explain what to fix. Touch targets must be large enough; the current criterion is described in WCAG 2.2 under Target Size.
Measure tasks, not button colour
A/B testing can help when a company has enough traffic, one hypothesis and a decisive metric. Weekly banner changes without a sufficient sample are a playground, not a reliable conclusion.
I track search and filter use, add-to-cart actions, form errors, abandonment at each step, returns and support questions. I complement numbers with observing people and their questions. Analytics shows where; a person often explains why.
The measurement foundation is in Google Analytics 4. I discuss performance checks in How to speed up a website.
An online shop need not be original in where its cart is. It must be convincing about why to buy this product here.
For arguments on product and sales pages, continue with Important sales-page elements. The complete website foundation is in How to start a web project.