Home » Ecommerce » The Anatomy of Good Category and Product Page

The Anatomy of Good Category and Product Page

Rate this post


There is a fact that the design of your eCommerce website can impact your sales. When your customers visiting your site, they will browse and experience your site. If they have a good experience, they will tend to make a purchase, and vice versa.

This today’s article will help you synthesize the critical elements to build a good e-commerce website interface, in specific, to build the perfect category page and product page.


Consumers spend 80% of the time on a page viewing content above the fold and 69% of time viewing the left-hand side. So a great category page will help to move shoppers along the buying cycle towards product pages via subcategories.


  • Customer service bar: sits below main navigation and reinforces core customer service points (delivery/support, etc…). It helps to reinforce key messages, builds trust and credibility.
  • Category title: a clear title element in the top left corner will provide validation to a consumer that they are on the right category.
  • Feature banner: high-quality feature image which represents the category helps to build an emotional attachment to product ranges.
  • Left-hand navigation: navigation tree of main categories and subcategories offer simple and effective category navigation in the optimal screen space.
  • Subcategory section: visual subcategory tiles to aid navigation towards the product pages. Using subcategories offers easy categorization alongside visual navigation.
  • Featured products: many consumers are interested in products purchased by others, that’s why you should introduce a small number of best selling products at the category level.
  • Copy: easy to read copy to introduce a category, it good for SEO as well as offers further validation to consumers.


In order to focus attention on a specific product and encourage a purchase decision, the product page must help motivate buyers by answering the simple question of “What’s in it for me?”


Section 1 – product validation and experience, top left of the page

  • Bread crumbs: this is a necessary usability element to aid navigation back to subcategory and category level. With a general best practice to remove distractions, including a left-hand menu, bread crumbs assist with usability.
  • Product title: you should place clear, large product title at the top left of the product page, above the main image. The studies show that consumers eyes move from the left to right from the top left, thus placing here for easy validation.
  • Main product images: consumers no longer want to browse a website, they want to experience it. So using high quality, large main product image with complimentary images to showcase the product is a good idea.
  • Social share buttons: it should be placed close to product images, away from the buying area. Up to 20% of customers engage after purchase to express their affinity for a brand or product.

Section 2 – Core product details & buying area, top right of the page

  • Product pricing: RRP, sale price and savings. Use percentage savings where possible. Studies have shown the power of percentage savings as a motivation to purchase.
  • SKU: the simple display of the SKU close to the top of the page. Assists consumers in the research and purchase process.
  • Short product description: concise product messaging answering “what’s in it for me?” question. Aids the decision making process and allows a quick overview to be digested.
  • Customer reviews: star rating with a link to view full product reviews below. An estimated 61% read reviews and 63% are more likely to purchase after reading one.
  • Delivery information: a bold statement about delivery. For example, FREE delivery on orders over $50. It helps to reduce cart abandonment by displaying delivery costs at an early stage.
  • Product variables: drop down or box selections for sizes, colors and other variables on the product. Keep product variations as a single variable product for clutter-free categories.
  • Product availability: a simple availability message e.g. “In stock and ready to ship”. Helps to build confidence to proceed further down the buying cycle.
  • Add to cart button: large and obviously clickable “Add to Cart” button in a contrasting color to your site. Helps to draw the eye to the main desired action: adding to cart.

Section 3 – Details in-depth product information; left-hand side, below section 1

  • Product information: detailed product description, reviews, return policy, delivery information and sizing details. Offer consumers in-depth details on a product whilst keeping this below core information and calls to action at an early stage.

Section 4 – Cross-sell and up-sell other products; right-hand side, below section 2

  • Cross & Up-sells: offer cross and upsells below the main “buying area” on the page. Displaying cross-sell and up-sells can assist in the main product purchase or increase order values.

Source: nublue.co.uk