The Definitive Guide to Creating Perfect Product Listing Pages in 2018

In the world of online shopping, most e-marketers are well aware that product pages play a significant role in the buyer’s journey – as they are the main interface between products and users.

While the ecommerce literature is abundant with tips on “how to optimize product pages”, less is said about product listing pages.

And that’s a shame.

In fact, product listing pages play a huge role in the buyer journey and the subsequent, dreaded conversion rate.

So, what is a product listing page?

In short, product listing pages (PLP) are the results of either category pages or internal search results.

They play a huge role as a “catalogue” because they actually display all products inside a category or after a filter is applied.

Product listing page example for e-commerce website
source: Etsy

When done right, listing pages can have a significant impact on the user’s experience: it all depends on several factors, such as your value proposition, the products’ attributes, as well as the overall quality of the information provided.

Without further ado, here are 10 best practices to follow in order to create powerful product listing pages that convert.

The 10 most important practices to create perfect product listing pages

1. Take care of your headers

Headers play the “title” role of each category and listing page.

They’re basically the main indication of the page’s content and should be treated accordingly.

Take care of the headers of your product page
source: Ulta

Beauty specialist Ulta bets on shiny visuals to increase its headers’ visibility: it’s a good solution to avoid “all text” headers that can seem dull at first glance.

Besides, never forget to include your keywords inside your <h1> tags: they’re part of your on-page SEO efforts that will help you appear higher in search results.

Remember: your category pages’ headers should first be informative and helpful to your customers.

Note: headers can also be used as promotional spaces to display featured products, special offers and discounts.

2. Grid view versus List view

Unfortunately, there’s no easy answer when it comes to choosing between list and grid views.

In fact, it all depends on what type of products you’re selling and what experience you want to provide.

Long story short, here are some tips to help you choose between the two.

List view:

Better suited for products that require extensive information and specifications in order to help customers compare specs between similar products.

It’s a good fit for technical products. Examples include: selling TVs, computers, electronics, DVDs, hardware…

Pros of list view for listing product page
source: Wine.com

Because Wine.com sells expensive wines and champagnes, it’s important that visitors take their time benchmarking the brands and “grands crus” before making any purchase decision: notice how they use the additional horizontal space to display ratings.

Grid view:

Grid view is mostly used for products that rely a lot on pictures and can be compared quickly without paying much attention to the specifications. It also allows for more visual experiences.

Grid view pros for listing page
source: Amazon

Amazon.com uses “grid view” to display products inside its “gift ideas” category. They also use tags to rank the bestsellers and lure visitors into clicking on the products based on their popularity.

3. How many products per page and per row?

If you opt for a grid view template, there’s no doubt that you’ll eventually come to the “how many products per row?” question.

It’s a fair question.

As for choosing between list and grid view, there’s no single answer that will fit everyone’s needs.

In fact, the number of products displayed per row depends on 3 main factors:

1. Size of your images

If you choose to display big, high-resolution images; there’s not doubt that you will have a hard time squeezing more than 4-5 products in a row.

2. Number or products

The number or product listed per row also depends on your total number of products for a given category.

If you only have 12 products to display, it’s a lot more coherent to opt for a 4X3 grid structure than a 2X6 one, because your visitors may feel like it’s not filled up.

3. Volume of information

Not all products are born equal when it comes to their product description. Some products natively require more information than others: the more space they need, the less products you will display.

Ideal number of products to display on a e-commerce listing page
source: canadagoose.com

Because they sell expensive outerwear, Canada Goose relies on a 2-products-per-row structure to highlight the visuals and deliver a more “premium” feeling to the user’s experience.

4. Product Thumbnails

Product thumbnails are important, especially for visually-driven industries such as beauty, apparel or travel.

As a matter of fact, your product thumbnails should include equally attractive images and create a sense of harmony.

Regarding their size, it all depends on your brand image and your industry: fashion and apparel generally opt for bigger visuals.

Product per e-commerce listing page
source: Asos

All product thumbnails on Asos.com are displayed on a grey background meant to increase the contrast and highlight the products.

5. Intuitive navigation

No matter the level of page depth, navigation always plays a crucial role in the user’s experience – and your product listing page should not be different.

Because some products have complex specifications and require extensive sorting options, pay attention to your website’s performance when it comes to sorting products and helping customers find their perfect product.

Faceted search for easy to navigate product catalogue
source: Revzilla

RevZilla does a great job at guiding customers through the endless journey of finding the right motorcycle helmet.

They use their left column to help customers sort and rank products according to several criteria (faceted search):

  • Color
  • Type
  • Shape
  • Category
  • Size
  • Gender

Bonus point: RevZilla provides visitors the opportunity to only display products that have a “video review”: a huge value proposition compared to their competitors.

6. What information should I display?

There are tons of options regarding which information you can display on your product listing pages and category pages.

Simply put, you need to display information that will effectively help and convince consumers to buy.

In order to help you choose, here’s a list of information that may be displayed on your product listing page:

  • Star ratings
  • Discounts
  • Color options
  • Stock availability
  • Best-sellers
  • Add to cart
  • New / Used
  • Short descriptions
What information to display on a product listing page
source: BestBuy

BestBuy does a great job at providing useful information on their product listing page. Besides the pictures and the price, they also added: star ratings, discounts and an add to cart button with a smart color hierarchy.

7. Sorting products 101

Sorting options have a sole purpose: narrowing down the number of products in order to increase conversion.

That being said, your sorting options should be based on your audience’s needs and their expectations regarding your products.

Simply put, you should ask yourself the following question:

What are my customers looking for? What are they needs?

If you can provide clear answers to these two questions, finding optimal sorting options just got way easier.

How to sort products in e-commerce listing page
source: watchshop.com

WatchShop knows that watches come in all sorts and shapes and thus they created various sorting options to match visitors’ requests, including water resistance, strap type, case color, movement type and so on.

It’s all tailored to match customers’ expectations – and it delivers.

8. Should you use Quick View?

Quick View is an ecommerce function that allows visitors to generate a miniature version of the desired product page. In short, it’s a mini product page that generally embeds a direct “add to cart” button.

Unfortunately, there’s no consensus on the matter and ecommerce experts have gotten into endless debates to solve this issue without much success.

However, recent research led by Baymard found out that Quick View actually does more harm than good when it comes to users’ interaction and conversion rates; simply because some users confuse the Quick View with the full product page.

9. Few words about SEO for product listing pages

SEO is a big deal for most ecommerce players. In fact, search engine traffic accounts for around 30-40% of all ecommerce traffic according to a 2016 study led by SmartInsights.

Taking into account the importance of search traffic for ecommerce websites, here’s another interesting fact: product listing pages account for 50% of all ecommerce traffic.

There are two main reasons that justify the dominance of Product Listing Pages regarding SEO:

A. They are keyword rich

Because they contain the names, brands, prices, specifications and descriptions of products, category pages tend to be keyword rich, meaning that they naturally rank for a lot of keywords in search engines.

B. They are the most heavily linked to

Product listing pages are where you want your customers to start their journey (or alternatively on the product page itself) which is why SEO pros tend to focus their efforts on these pages. Besides, all products within a category generally link back to that category, which is a strong internal link building pattern.

10. A/B Testing your Product Listing Pages

There is no secret when it comes to Conversion Rate Optimization (CRO): testing is what makes it work. The recipe for success doesn’t change for your product listing pages: you just have to A/B test them.

“How so?” you may ask. Well, here’s the thing: we’re A/B testing specialists.

Making a good product listing page isn’t easy: you will have to identify elements that work and elements that don’t to gradually increase your conversion and offer an overall better user experience to your customers.

Did you like this article? Feel free to share and check out our other in-depth articles on how to optimize your website, ecommerce and digital marketing.

Looking to improve your e-commerce shopping cart page performance? Check out our latest in-depth article on the subject.

AB Tasty is a complete personalization and A/B testing software integrating cutting-edge features so that you, as a marketer, can take action now and increase your website’s performance.

Request a demo now

Anthony Brebion

Anthony is Product Marketing Manager @ABTasty. He was previously SEO consultant and worked several years in digital ad houses. He’s now an A/B testing and optimization evangelist.

Related Posts