Designing an effective product display page is critical for every e-commerce website that wants to maximise its sales and revenues.
Based on the unique data we collect, we see product display pages have an average Customer Struggle Score of 2.6. Our machine learning algorithms automatically detect and measure struggle using a scale of 0 (no struggle) to 5 (high struggle).
We think this level of struggle is too high but it shows there is a great opportunity to optimize and improve product display pages. With this in mind, we wanted to share our thoughts and recommendations on what to do.
The first aspect of a product display page to consider is the images used to showcase the product. As well as providing a main image, it’s important to provide more alternative images for visitors.
On desktop, we see 17% of visitors interact with product imagery. That increases to 26% for mobile.
Techniques that increase engagement on mobile include offering multiple product images on a carousel for users to interact with a clear indication of how many images there are. Also, a zoom feature so that the images can be inspected in more detail.
Placement of the Calls to Action (CTA)
On desktop, 20% of visitors don’t scroll below the fold. That means you absolutely have to make sure the most important information is placed near the top of the page – so the CTA, product variants and prices and any key information like ingredients.
A good way of achieving this is to provide a short description above the fold with a “read more” or similar link that expands the details on request. From the activity we see, when sites do this, it generates an average click activity of 7%.
On mobile, average scroll depth is greater at 74% as scrolling below the fold is often required to access the “buy now” CTA.
Providing supporting product content
More detailed product information is best presented using accordions or tabs so that it is easy for a user to discover and explore whilst keeping the page as clean and presentable as possible.
From our research, 50% of e-commerce websites will position this supporting content just above the fold. Placing the supporting content immediately after the CTA or providing a link to it from higher up in the page is a worthwhile consideration that we see improves engagement.
Many sites include customer reviews to provide proof that builds trust and confidence in a purchase. Adding review information will increase engagement with the CTA by an average of 1%.
As before, it’s worth considering the placement of review information. Showing the overall rating and number of reviews available above the fold will drive more interaction in comparison to positioning this content further down the page.
Our product display page recommendations
To summarize, we believe these points need to be considered to optimize your product display page and reduce customer struggle:
- Product imagery receives the highest amount of visitor interaction across both desktop and mobile. This should be placed in a predominant position. Improve engagement further by including multiple images using a carousel or similar mechanic and providing an image zoom feature.
- Carefully position the CTA above the fold on desktop and after the product images on mobile at around 60% scroll depth.
- Scroll heat below the page fold cools quickly so ensure key information such as detailed product descriptions are easy to locate and interact with. Use accordions or tabs to present this.
- Reviews boost engagement with the CTA but make sure you show overall customer review rating and the total number of reviews above the fold to maximise the upside of this.