Article

12min read

The Definitive Guide to Creating Perfect Product Listing Pages in 2023

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 there is a ton of information with e-commerce tips on  “how to optimize product pages,” less is said about product listing pages.

When in fact, product listing pages play a huge role in the buyer journey and the overall conversion rate. Your product listing pages need to be created with your visitors in mind to help them scroll and effectively search for their desired products.

If you want your visitors to convert after visiting your product listing pages, there are a few best practices you should follow.

What is a product listing page?

Product listing pages (PLP) are the results of either category pages or internal search results.

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

Product listing page example for e-commerce website

When done right, product listing pages can have a significant impact on the user’s experience.

The true impact depends on several factors such as your value proposition, the products’ attributes, as well as the overall quality of the information provided.

Now that we have a clear definition of product landing pages, let’s discuss 10 best practices to follow in order to create a more powerful product listing page that converts.

The 10 best practices to create perfect product listing pages

1. Optimize headers

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

They’re the main indication of the page’s content and should be treated as the most important thing. If the header does not properly describe the page or the category, visitors will not be able to find what they are looking for.

In the image below, 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.

Take care of the headers of your product page

In addition, never forget to include your keywords inside your <h1> tags. Not only will this make them more visible on the page, but they’re also a bit part of your on-page SEO efforts that will help you appear higher in search results.

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

2. Test list view vs. grid 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. Let’s look at the best time to use each one:

List view

List view is better suited for products that require extensive information and specifications in order to help customers compare aspects of similar products.

It’s a great fit for technical products like TVs, computers, electronics, DVDs, hardware, etc.

However, this isn’t the only time to use list view for your product pages.

If we take a look at the image below, Wine.com sells luxury wines and champagnes. In this case, it’s important that visitors take their time benchmarking the brands and “grands crus” before making a purchase decision.

Notice how they capitalize on the extra horizontal space to display ratings.

Pros of list view for listing product page

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.

Amazon 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.

Grid view pros for listing page

3. How many products per page and per row to display?

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

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. Image size – If you choose to display big, high-resolution images; there’s no doubt that you will have a hard time squeezing more than 4-5 products in a row.

2. Number of products – The number of products 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 rather than 2X6. You need to fill the page visually.

3. Volume of information – Not all products are considered equal when it comes to their product description. Some products natively require more information than others.  The more space they need, the fewer products you will display.

Ideal number of products to display on a e-commerce listing page

In the image above, Canada Goose, a high-quality outerwear provider, relies on a 2-products-per-row structure. This strategy highlights the visuals and delivers a more premium feeling to the user’s experience.

4. Pick effective product thumbnails

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

Your product thumbnails should include equally attractive images and create a sense of harmony in the product listing page design.

Regarding their size, it all depends on your brand image and your industry – fashion and apparel generally opt for bigger visuals to showcase the product.

In the image below, Asos, an online fashion company, displays its product images on a gray background. This is a technique commonly used to increase the contrast and highlight the products.

Product per e-commerce listing page

5. Implement 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.

In the image below, RevZilla does a great job of guiding customers through the endless journey of finding the right motorcycle helmet.

Faceted search for easy to navigate product catalogue

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. This is a huge value proposition compared to their competitors.

6. A/B test 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.

Now the question is, how can you do that? 

We have great news for you: 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 conversions and offer an overall better user experience to your customers.

Want to start optimizing your product listing pages? AB Tasty is the best-in-class experience optimization platform that empowers you to create a richer digital experience – fast. From experimentation to personalization to smart search, our solution can help you activate and engage your audience to boost your conversions.

AB Tasty Demo Banner

7. What information to 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 move down the funnel and make a purchase.

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

As an example in the image below, BestBuy does a great job of providing useful information on its 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.

What information to display on a product listing page

8. Sort your products like a pro

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

Your sorting options should be based on your audience’s needs and expectations regarding your products. Thinking in the mind of your customers is crucial for optimization at this point in the digital customer journey.

Let’s take WatchShop as an example.

How to sort products in e-commerce listing page

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

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

9. Should you use Quick View?

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

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

However, research led by Baymard found that Quick View actually does more harm than good when it comes to users’ interaction and conversion rates.

This is simply because some users confuse the Quick View with the full product page.

9. Leverage SEO for product listing pages

SEO is a big deal for most e-commerce players.

In fact, search engine traffic accounts for around 50% of all e-commerce traffic according to a 2023 study led by SmartInsights.

There are two main reasons that justify the dominance of product listing pages regarding SEO:

A. Product listing pages are keyword rich

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

B. Product listing pages are the most heavily linked to

Product listing pages are typically 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 this, all products within a category generally link back to that category, which is a strong internal link-building pattern.

The ultimate product listing page

Creating product listing pages will look a bit different depending on your market sector. However, for maximum performance, keep these best practices in mind for your e-commerce brand.

The ultimate product listing page is clean, easy to navigate, attractive and encourages customers to make a purchase.

You might also like...

Subscribe to
our Newsletter

bloc Newsletter EN

AB Tasty's Privacy Policy is available here.