Designing a Great e-Commerce Product Details Page

E-commerce website product details page is no doubt one of the most important page on which a designer and developer puts much concern. It is the page where the customers decide what to “add to cart” and it’s the page that generates SERP results. Walk some extra mile with us to know what great elements make a product details page successful.

E-commerce Website Design

Design, usability and Search Engine Marketing works hand in hand when we work on an e-commerce project. It’s time to start off, let us look at the surface. It just takes a few second for a user to decide if they want to stay on the page or leave. It’s important to engage visitors since the inception. Even though it seems like common sense, but we outline some of the items that become easy to find. Such as —


Many sites does not show that, as well as our customised e-commerce website make sure the e-commerce website design contains –

  • Large and Detailed Product Photos
  • Brand Name and Logo
  • Customer Reviews/ Star Rating and obviously
  • “Add To Cart” Button
Must-have for E-Commerce Product Page

It’s surprising to note that many elements are left out and website conversion rates suffers largely. So its required to double check your site and the e-commerce data to make sure that the e-commerce project delivers what promised.

All details in the Same Page

From the general e-commerce webs design perspective, designers need not be overly creative. We need to take more care of the usability section, but require designing a clearer product details page, ultimately that seeks information to the users. The goal is to move users from interested section to checking out section in few seconds.

Usability of Details Page

Overall usability is often ignored, the designer might have set his skills to work, but maybe the front-end developer was not armed with strong skills. Well, it may be that the usability never made to the design and development table. You have to crosscheck the function of this page, as it needs to happen quickly.

Few No-No’s for this page —

• Additional Tabs such as “Additional Details” or “Related Products” this should never cause the page to reload. This waster visitor’s time, it is frustrating.
• When a customer clicks on the star rating or “Write a Review”, the customer should not be taken to another page. Well, add the product reviews into the product details page itself at the bottom. When customer clicks on “read reviews”, it should automatically scroll down to that section.
• Do not scale down huge images into thumbnail sized, this increases loading time.

Product Details at the Bottom of the Same Page as the Product

Search Engine Marketing

The most important aspect that is going to help you page convert. Depending on the industry, the searchers look for a particular product. It is important to optimise the page rank of the 1st page of Google, be spotted and have a chance at the business. Developing a product details page must consider this few factors —

  • The name of the product must come with an appropriate header tag, preferably a H1. This is a part of the good front-end development (HTML / CSS) but helps Google to realise what the focus of the page is.
  • While developing a site, make sure the content of the page is in HTML. At times developers may use AJAX or another technology to pull content, but this can hurt SEO. You prefer Google to find all great content offered.
  • It is important to include the manufacturer SKU number (enter if you are in an industry were SKU is often searched), not your own.
  • Developing strong Title Tags for each pages of the e-commerce site is important, but developers ignore the product pages. In the title, product name, SKU and other valuable keywords must be present. If you have above thousand products dynamically generate your Title Tags.

Now, that how an e-commerce website works out in a developer’s lab.

Is your developer giving out the best effort to provide all these features mentioned above?