As an eCommerce business owner, you’re constantly trying to enhance the experience for your customers—as you should—considering 58% of shoppers leave due to poor experience.
However, there is one crucial element you may not be considering: your product listing page.
And, it makes sense: your customer cannot buy something if they do not understand it.
Sounds simple enough: but is it really?
Did you know that a majority of small to medium eCommerce businesses are experiencing stunted growth because of poor product listing pages?
Some common problems include low-quality product images, truncated product descriptions, an overwhelming amount of options, and confusing navigation.
Fret not, there is a simple way to fix that:
Optimize your product listing page (PLP) to the last detail!
Short on time? Here's a quick video with all the brilliant examples:
Product Listing Pages: 15 high-converting examples + best practices (& FAQ)
1. Get that perfect product view (Everlane)
The more attractive and engaging your eCommerce PLP is—the more effective it will be for visitors to click through—which is one of many great tactics to increase conversion rate on mobile.
When it comes to product view, it is best to efficiently utilize all available space without leading to eye fatigue.
There are two ways you can achieve this:
- grid view with two to four images, and
- list view with one product per line
The grid view brings more attention to the product picture and is often used by fashion brands, whereas the list view offers more information about each product and is best used for electronic brands, food brands, etc.
Here’s how Everlane features a grid view.
When deciding which view to choose for your products, double down on what you want to focus on.
Is it the look and feel of a product or the lifestyle? Here’s a ready fact reckoner - with list views, buyers’ attention has been seen to reduce as they move from top towards bottom while in a grid view their attention is more evenly placed.
Similarly, shoppers seem to linger more on pictures that have a human element in it versus just a product featured.
2. Entice your audience with persuasion triggers (Missguided UK)
We all love a good sale and when we see a flash sale, we’re lured in by the urgency of making a purchase while the discount is still around.
Flash sales aren’t unusual: they're a common practice for boosting Black Friday sales.
In fact, they are a proven tactic known to boost conversions by playing on the Fear of Missing Out—and it makes sense.
Triggered by scarcity and urgency labels on product images, visitors are more aggressive in taking action.
Let us consider the example of Case-Mate, which ran two mini flash sales to test the results.
Here’s what they found—the first flash sale achieved a whopping 50% increase in conversions and the second got a 105% increase in conversions.
To understand how you can use these persuasion triggers on your website, get product listing page design inspiration from Missguided UK.
Feature the new price AND the old when declaring a flash sale - especially when it’s a significant discount, featuring both helps shoppers instantly compare.
3. Keep the best on top (Home Depot)
On your product listing page, it’s important to show your best selling products first.
If a shopper lands on this page and sees products that are highly rated or have been bought by lots of other people, they can infer that the brand is doing something right and are more likely to trust and purchase from your business.
This is a subtle but powerful way to reassure the shopper that your store is efficient and safe.
A good product listing page example is that of Home Depot.
An established brand with a long history in the US, they use this product listing page template to show the audience their best selling products at the very top.
Label your bestsellers to create distinction from other products and draw attention! Only lining them at the top won’t let people know they’re selling well.
4. Use drool-worthy headers (ULTA)
Headers form the meat of the page. They are one of the most visible and accessible things on your website.
eCommerce PLP headers are what you use to make a compelling statement about your products that stick with your customers.
You want these headers to be eye-catching and engaging enough for them to click through to your products page and learn more.
They, therefore, need to be as visually appealing, informative and helpful as possible.
By optimizing your headers you’ll be in a better position to achieve this.
To gain a better idea of what optimized headers look like, check out ULTA.
To make their page headers more visible, they use images in their headers and limit the amount of text.
Decide on how you want to use your header space.
If it’s for a new launch, the copy and any accompanying discount needs to feature.
However, if it’s to further the essence of your brand, use just a very compelling image in line with your brand values and stay away from copy.
5. Make navigation a walk in the park (Waterstones)
Even though the Internet is rapidly evolving, we still haven’t come up with a better solution for navigating websites than using menus.
Menus are the typical tool we use to navigate websites and since they are so common we tend to take them as a given.
However, recent research by Baymard Institute revealed that displaying product categories in the main navigation can have enormous navigational advantages.
Along with that, there are a few things you can do to simplify navigation simpler and drive conversions:
- Display product categories at the top, allowing a clear view
- Make your website easy to search through a simple and intuitive search bar
- Open ratings to your audience and allow them to rank each product
- Provide filtering tools that let the audience sort through color, size, category, price, etc.
To drive this point home, let’s look at Waterstones, a leading digital bookstore that allows users to click through product categories, use an easy-to-operate search bar, and rate their favorite items.
Offer a quick description of the nature of your products between the header and the start of your product line.
This can further enhance the shopper’s search experience - giving them a deeper sense of your products based on benefit.
Here’s how Bigelow Teas does it.
6. Reveal more through hover (Shane Co.)
People like to see how things look. This is especially important when it comes to products that they’re thinking of buying.
When you allow them to hover over the product image and get more visual information, they can quickly assess without having to leave the page.
The image carousel helps the customers gain a better understanding of the product and decide if they should view the product detail page and learn more about it.
A good example is that of Shane Co.’s wedding bands, where the audience can get more picture angles as well as understand the type, carat, and make of the product upon hovering.
Featuring a secondary image upon hover is ALWAYS a good idea - as revealed by usability tests performed by Baymard Institute.
This way shoppers can take in a lot more related detail around the product without having to go to the product page.
7. Use product recommendations—and use them well (River Island)
Product recommendations have long been championed as a very strong way of driving behavior from the product listing page.
They work well as manufacturers, retailers and brands can usually display products that are similar to the ones the user has already browsed, resulting in them clicking on an additional item or increasing their basket size.
Picking the right product recommendations is crucial.
It is best to show items that are relevant, personalized, and likely to connect with THAT user.
eCommerce personalization goes a long way in driving revenue.
Hey, you'll love this: eCommerce personalization: 20 revenue generating examples
To give you a brand example, River Island displays product recommendations based on past browsing behavior. This makes it easier for users to enjoy these recommendations and even think of buying a few products. The best part? It allows River Island to personalize the experience without breaking any data protection laws.
Feature product recommendations in a way that it adds on to the category you’re featuring on a specific product listing page.
For example, cull out the bestsellers from that category and feature them in a separate, highlighted section.
8. Leverage social proof with product ratings (Fabletics)
“When you say it, it’s marketing. When your customer says it, it’s social proof”, Andy Crestodina.
Whether a shopper likes to make an informed purchase based on feedback from product reviews or they do it based on their own personal preferences; displaying reviews and ratings gives them the support they need to make a buying decision.
Ratings and reviews also inspire trust that the product is worth their time and money.
Customers are more likely to opt for a product when they know that it was worn—and loved—by another fellow person.
A great example is Fabletics which shows the rating right next to the product making it easier for their customers to make a holistic decision.
Make your product recommendation engines show up the best rated products in the suggestions section, to in turn make your reviews more accessible.
9. Feature “recently added” for repeat customers (Soludos)
As much as your product listing pages are a way into your brand and offerings for new buyers, they can also be the reason why loyalists come back.
This is why a “recently added” section can work wonders on a page like this.
Look at it this way - “new arrivals” or “recently added” calls out attention to what’s fresh in that category.
It’s quite possible that many of your repeat customers are already acquainted with your current category offerings.
So a call-out of this nature does two things at one go:
- engages the repeat visitor’s imagination a little longer
- drives the loyalist to consider buying something new in a category they already love
Soludos, for example, takes its new arrivals seriously and ensures they get that tag on their product listings pages.
Feature most of your recent additions to the category towards the top of the page - with the rest strewn in lesser numbers as the shopper scrolls down.
10. Make products on sale prominent (Le Sport Sac)
Let's pause once to consider the typical structure of a product listing page.
Within limited real estate, a business has to show its products, display critical task buttons, display price, highlight selections, make space for filters and so on.
In terms of design, we’re talking about a lot, which means any product listing page has to work extra hard to inspire people to buy.
Enter the mark-down sale with slashed prices, with or without reason, across the year.
By making products that are on sale prominent, it’s possible to pull visitors in.
This enables them to immediately compare the price differences.
Typically, sale prices are a lot more competitive and this needs to be made upfront for people to consider buying.
Here’s an example from Le Sport Sac, and how they contextually highlight the items on sale.
Along with a sale price, also mention if those products can be available at an even lower price for some unique reason.
For example, the home brand Wayfair has a price category called the ‘open box outlet price’.
This has to do with products from the returns category that have been inspected and are in excellent condition.
11. Incite extra interest through “quick look” (Sephora)
Even if you assume users would certainly be interested to explore your offerings, you can’t assume they have all the time in the world.
In fact, it’s best to optimize your product listing page with the assumption that most users won’t want to go into the product pages.
Bad news? Not exactly. It’s an opportunity to find a middle ground between the briefest specifics (what you generally see on a listing page) and extreme detail (what you see on a product page).
Enter the “quick look” button, which is a win-win.
It serves you as a business because you can channel all the willing attention to deeper detail and it serves the customer because they don’t need to employ extra clicks and spend more time.
Here’s a look at how Sephora incorporates this feature into their listing pages.
To reduce shopper confusion about what this feature means (you know, everybody doesn’t know!), use the callout button right beneath the product image instead of placing it after the image and the accompanying text on price, discount, stock info, ratings etc.
12. Highlight a special feature alongside products (Bellroy)
Have you wondered what the typical experience of a person going through a product listing page is like?
It starts with interest, moves to impatience (especially if they aren’t able to find what they are looking for) and possibly ends in fatigue.
To bring a little relief and break the monotonous spell of continuous browsing, some witty brands are now doing something interesting.
They are promoting an offer or a brand feature in one tile along the grid layout, as the user jumps from column to column during browsing.
It’s typically on the extreme right and appears after a few scrolls.
Here’s an example from Bellroy.
Place the special feature either at the beginning of a row or at the end of it.
Since human eye tracking typically moves from the left to the right, this can be beneficial in attracting attention while creating relief between featured products (the above example captures this perfectly!)
13. Introduce the side scroll feature for product variants (Allbirds)
Many eCommerce businesses wrongly judge the intent of shoppers to be high for a specific product - and in the process, hide away the variant details within the specific product page.
Bad idea, if you ask us.
The first assumption that you need to come with while designing the layout of your product listing page is that shoppers are always in a hurry.
So, even if they’re interested in buying a specific product, it’s likely they won’t explore more if they don’t see all the options upfront.
Enter the side scroll feature that allows you to feature all product variants beneath the main product image.
It’s a lot like the scrolling feature a shopper uses in the hero banner space to view highlighted sections.
Here’s how Allbirds does it.
Ensure when the color variant thumbnails are changed, the main image also changes - but that even then the main image, when clicked, takes shoppers to the same product page.
14. Feature related products in the same row (Natori)
When most eCommerce businesses think about related products, they think about product recommendations.
However, it does not necessarily have to work this way when it comes to product listing pages.
Let’s say you’re a luxury brand that features bags, jewelry, shoes, perfumes etc.
For every category then, on the listing page, you could line up similar products in the same row.
This is also applicable for brands that come up with collections in different categories. A case in point is luxury brand Natori.
In the following example, the brand displays related products from the same collection in the same row.
How does it help, you ask?
It’s subtle selling that can quickly align with consumer preference.
In this instance, if someone wants a ring, it’s likely they might also consider buying a pair of studs.
Label related products with appropriate descriptors so that even if the images seem very similar, shoppers exactly know what they are looking at.
15. Create visual relief by introducing a surprise element in the layout (Papersmiths)
It’s not news that predictability is paramount in UX.
However, there’s a shadow aspect to predictability that not many people don’t talk about:
And, boredom can be very real when shoppers are in the middle of experiencing a product listing page through endless scrolling.
If you’re trying to keep things interesting, one way to do it is to introduce visual relief in the usual grid layout.
Done well, this can infuse a sense of surprise and can make the shopper scrolling stop to take a good look.
Papersmiths, the UK based stationery brand does it really well.
FAQs about the product listing page: a handy checklist
A product listing page (PLP) is one of the most important factors in improving your conversion rates - so it’s necessary you get it right. The PLP is an essential part of any eCommerce website and plays a key role in helping shoppers make their purchase decisions.
What are the benefits of having a product listing page?
- Gives you a better understanding of your customers & their psyche
- Helps your customers discover your products & understand them in detail
- Offers insights into how different products are performing & how to boost performance
- Improves customer engagement
- Simplifies the shopping experience
- Reduces the time taken during checkout
What should my product listing page feature?
- A clear and easy-to-locate search bar
- Popular searches, best selling products, and other relevant products
- Relevant offers and deals you are offering to your customers
- Tools that will help the audience navigate through the products
- Tools that will help personalize the search results
- SEO keywords that are relevant and customized to your webpage
- A list of all products in your store, with pictures & apt descriptions
- Plenty of CTAs encouraging the audience to make a purchase or learn more
A well-researched and optimized product listing page will help to boost your conversion rate and improve your overall sales figures.
Take, for example—the eCommerce PLP for an established brand like ASOS.
Notice how the product listing page is clean, minimal, and extremelyfunctional with features that make the users’ journey simple.
What tasks do you need to perform to optimize your PLP more effectively?
- Determining which keywords to target on your PLP
- Creating high-quality product descriptions that deliver value to the customer while addressing their search intent
- Planning a landing page strategy in tandem with your ad campaigns and keyword bids
- Ensuring that the pricing of the products featuring on your PLP reflects market trends
- Setting up conversion tracking
So, how is PLP different from PDP?
A product listing page is a single web page that shows details about your product—the title, price, images, description and so on.
A product listing page helps build awareness for all the products in your inventory.
It helps to drive sales and conversions by giving consumers more information about the entire range of products in one go.
A PLP also allows users to select or filter permitted products from different collections.
This type of page allows the sellers to include product images, product descriptions and item specifics.
It also comes with selling tools that enable users to manage their listings and monitor their sales data.
The product detail page goes one step deeper. It is a page that is created for each one of the products you sell.
It should contain any and all aspects of a product that you want people to know about.
The product description page is the best place to add more value and incite action from a visitor.
It’s the quickest way for a consumer to review all important information about a particular product and make a quick decision.
How many products should I show per page?
A product listing page (PLP) is often a single page on a website where multiple items from one or more products can be viewed and purchased.
However, larger websites generally use multiple—even thousands—of eCommerce PLPs.
These can be filtered by category, collection, pricing, offers, etc.
There can also be other PLPs depending on the product and manufacturer.
For example, a business that sells computer hardware may have one eCommerce PLP for wireless routers, one for motherboards, another for power supplies, etc.
When determining how many products to show per eCommerce PLP page, remember to factor in two key rules: speed and accessibility.
Your product listing page should take no longer than two seconds to load. Chances are that if it takes longer, you will lose up to 40% of your customers.
Avoid cramming the eCommerce PLP page. Ensure that each product is clearly visible with the price, description, and other elements clearly mentioned.
How do I create a product listing page?
A product listing page is a page that allows potential customers to view and purchase your product or service.
This is different from a static brochure type page in that the information usually found on the product will appear on the listing page.
As a result, you will need to create pages that allow interested buyers to review the products they are considering purchasing.
A good product listing page provides information on the items, addresses potential questions, and shows how these items will improve their lives.
This is also the perfect opportunity for you to leverage your main keyword or keyword phrase in order to rank for it.
In fact, using product listing pages to boost search engine rankings is a proven method used by several brands across the globe.
What should each product listed on the page include?
When a shopper views the individual products on a PLP, what they are actually looking at are individual product pods.
What information each product pod carries is vital in deciding whether a shopper decides to explore further through a product page and finally, convert.
For your PLPs work well, here’s a list of factors your product pods should definitely feature:
- A primary image (and a secondary image if you want to activate the hover feature)
- Color swatches if there are multiple color variants available
- Thumbnail images if the product variants have slight differences
- Stock availability
- Any available discounted savings
- Product name and a brief descriptor
- Add-to-bag CTA
- Quick View or Quick Look feature
- Star ratings & the average rating in numericals
What best practices should I follow to make my PLPs perform better?
Since your PLPs work at a number of levels - for easy scanning, easy comparing and quick navigation between categories - you’ll HAVE TO ensure certain vital aspects are in place for them to perform well.
- Breadcrumbs to ease navigation at the top of the page & bottom of the page
- Pagination or ‘Load More’ to make sure shoppers don’t quit midway
- Keep filters visible and highly accessible (placing them in a familiar location is a great idea - the left hand side of the page is where most shoppers look)
- Make the filter section sticky
- The number of products in that category needs to feature right at the top
- Keep related categories handy in boxes at the top of the page
Still looking for a way to assess your PLPs better?
Try out our free audit tool to get more information on how your current PLPs are performing.