In the previous article, we provided a checklist of explanations for each product and the available design rows on the PLP page concerning the page header issue. In this article, our aim is to present another checklist for the PLP page that, when followed, will result in a better user experience and higher conversion rates. The checklist includes the following items:
- What kind of images should be used to display products on the PLP page?
- What information are users seeking about products on the PLP page?
- How should the product price be displayed on the PLP page?
We have provided you with three articles on the key points to consider when designing a PLP page. The checklist for these three articles includes:
What kind of pictures should we use to showcase products on the PLP page?
Here are some suggestions for displaying product images on the PLP page:
It is important to consider that users perceive visual information faster than any other type of data and analyze it. If you use different colors, backgrounds, and image sizes, you may distract users’ attention, leading them to analyze the available information incorrectly.
For this reason, we have provided some suggestions for displaying product images on the PLP page:
Are alternative product shots shown on hover?
When the user hovers over the image of their desired product, we can reduce their uncertainty by displaying another image of the same item. A potential customer may not be impressed with the first image, but they will certainly be convinced by the second image.
Do you show additional product pictures on mouse hover? (relevant for desktop devices only)
The more information you provide to a customer about a product, the easier and faster they can make their final decision. That’s why we suggest displaying more product images to the customer by allowing them to hover over the product. But what features should these images have?
- Generally, you should show the product to the customer from different angles to help them properly understand the information you have provided.
- Show the product to the customer from different perspectives.
- Provide the customer with zoomed or more accurate images of various parts of the product so that they can see its different features, such as the material, more clearly.
- Offer the customer more images of the different variations of the product, such as in terms of color and size.
A bad example from the AllBirds Website:
On this website, hovering over each product does not display another image. They could have shown the customer an image of the shoe being worn, like the first one on the left, by hovering over it.
A poor example from the MVMT website:
The website fails to display an additional image to the customer when hovering. They could have showcased the watch image on a person’s wrist or in different styles to the customer.
A good example from the LuxyHair:
On this website, when we hover over the image of each color (product), a picture of a model with hair of the same color is displayed.
A good example from the Gymshark website:
On this website, when we hover over the image of the shorts, a picture from their other side is displayed.
A good example from the Cupshe website:
On this website, when hovering over the image, a picture from the back angle is also displayed. This helps the customer fully understand how the clothing will look after being worn.
What information are users looking for about the products on the PLP page?
The information provided on the website about the products not only makes the user more eager to investigate further, but also helps them categorize and prioritize the available products more quickly. Therefore, we have provided a checklist of this information below:
Display Product Ratings:
Rating a product is the most important form of social proof for that product. Users typically look at the product rating first, then at the reviews of other users. Ultimately, this leads to their prioritization and purchase decision. Therefore, the rating for each product should be prominently displayed on the PLP. Usually, orange or yellow stars are used to display the rating, which draws more attention.
It’s important to note that a large number of reviews and a high rating greatly help to attract customer satisfaction and selection for a product.
Here are some guidelines for displaying product ratings:
- Place the product rating below the title.
- Use popular and prominent colors such as orange or yellow (or your brand’s colors) to display the rating.
- Show the number of reviews next to the rating.
A good example from the PeakDesign website:
The products on this website not only have good ratings, but also have significant reviews written for them. That’s why they are prominently displayed on the PLP page.
Do you show badges on product image thumbnails?
On the PLP page, there may be hundreds of products that could confuse the user and reduce conversion at first glance. However, adding a badge to each product that distinguishes it from others with a unique feature can help the user to focus better.
Guidelines for displaying badges next to each product:
- Adding too many badges with different names will clutter the page and have the opposite effect of adding a badge to the product. For instance, a page that has only some of its products with a “best seller” badge will attract more attention.
- Design badges that can capture the user’s attention.
- Use clear and concise text on the badges, such as “best seller,” “new,” “trending,” etc.
- To familiarize users with the concept of badging on your website, you can start by manually selecting some products and adding badges to them.
A good example from Puravida website:
Do you show additional product details that are important for target audience?
Sometimes, the excessive amount of additional information about a product leads to clutter on the product listing page (PLP), making it challenging for the user to choose from the available products. Therefore, it is crucial to exercise caution while adding information to the product card and only include essential details. When adding supplementary information, it is essential to be concise and use short paragraphs and words.
A good example from B&H website:
Beneath the product rating, there is a section labeled “key features,” which highlights critical information about the product.
This point is crucial for e-commerce sites that sell clothes, shoes, and products in various sizes, colors, and materials. On the product listing pages (PLP) of these websites, it is essential to display various types of a product to the user; otherwise, they will not be aware of the othe available colors or sizes.
Good example from FashionNova and PeakDesign:
FashionNova displays different colors of each product under the item, while PeakDesign exhibits various color options of a product in the thumbnail image with a creative move.
One of the principles of sales in marketing is to create urgency for the customer. For example, selling a product for a limited time or in limited quantity can encourage the customer to buy the product more quickly. Therefore, for some products, you can create urgency on the PLP page.
A good example on the B&H website:
The sense of urgency is created by writing the sentence “Offer ends Mar 28 at 11:59 PM EDT” below the discounted price.
How should we display the product price on the PLP page?
Do you show product price?
On the PLP page, one of the most important factors that users consider when selecting a product is its price. The price should be completely clear, and displayed under each product. If the price is not displayed on the PLP page, users will have to go to the PDP page every time they like a product and then return to the PLP page to view other products. This leads to additional actions and dissatisfaction among users. To ensure that products are priced on the PLP page, consider the following:
- Use an appropriate color, font, and size that will attract the user’s attention and display the price of each product underneath it.
- Place the price close to the product title or near its image.
- If a product has different variations with different prices, display the lowest price on the PLP page.
An awesome example from Leesa:
Prices are the 3rd most prominent element in visual hierarchy after product images and titles.
Has the price of discounted products been struck through, and have you included the percentage of the discount?
On the PLP page, discounted products are always more appealing to users. Therefore, it is essential to show the amount of discount using various methods. For example, you can strike through the previous price and display the new price prominently in a different color next to it or you can display the discount percentage prominently next to the original price.
A good example:
In the example below, in addition to clearly displaying the previous and discounted prices, the percentage of the discount applied is also written underneath it, which is highly valuable for the audience.
So, to display discounts to the user on the PLP page, it is better to consider the following points:
- Display the price before and after the discount.
- Write the discounted price more prominently to indicate that it is a special offer.
- Show the amount or percentage that the user saves by purchasing this product; for example, “you saved 30%”.
For pricing, we should not force the user to perform calculations. We should only display a final price and the amount of profit the user will gain from the purchase, so that they can make a quicker decision.
Good example from B&H website:
They display regular price, discounted price, amount of savings
Do you use eye-catching colors (like red) for the sale price or the word “SALE”?
Another solution for helping users in finding discounted products quickly on the PLP page is to use eye-catching colors such as red for the price. Also, the word “SALE” can be written in the same color either next to or above the price.
A good example:
Conclusion:
In conclusion, optimizing your e-commerce website’s Product Listing Page (PLP) is paramount for driving conversion rates. By carefully selecting impactful product photos, addressing users’ information needs, leveraging urgency and scarcity triggers, and prominently displaying product prices, you can create a persuasive and user-friendly PLP. In our upcoming article, we will explore the significance of designing intuitive filters, sorting options, and compelling calls-to-action (CTAs) to further elevate your PLP’s performance. Stay tuned for valuable insights on optimizing your e-commerce website and maximizing conversions.