Jul 6

7 Ecommerce Product Category Pages Best Practices For Your Website

7 Ecommerce Product Category Pages Best Practices For Your Website

Category pages on your eCommerce site are always an important area to concentrate for conversion optimization. A well-organized category page design will not only create a good shopping experience but also encourage purchases and repeat purchases.

If you run an eCommerce store and looking out for simple tweaks to improve your conversion rates, this article will tell you a lot. Here, we will discuss 7 eCommerce product category page optimization tips cum A/B testing ideas that you can adopt to improve your category page performances.

So, let’s just start it.

1. First of all, improve your load time speed

Conversion optimization and search engine optimization both perfectly agree to this point that you cannot have a conversion friendly website in 2017 and onwards if it loads slowly.

How would you even show your category pages to the visitors if 40% of your visitors would not even wait for the page to load if it takes more than 3 seconds? Moreover, with every 1-second delay after 3 seconds, 7% of your visitors would also hit that close window button on the browser.

That’s a truth and data from 2016, now think of 2017, what would be that patience margin for the visitor now?

Also, poor loading time will kill your SEO because page speed is an important ranking factor for Google and other search engines. Especially on mobile SERPs, page speed means lighting fast pages.

That’s why you need a very fast loading eCommerce website if you even want your potential customers to see your well-decorated product category page. So, optimize your back-end configurations, and use the speed optimization tricks to get the optimal loading time on your website.

You can also use Google’s PageSpeed Insight Tool and Test my site tool to know your page speed status for desktop and mobile respectively. Google has recently updated the test my tool and has included some interesting comparison stats to it. You must check it out.

2. Use uniform product images

It’s about product images but affects the category-page-CRO as well. The cleanliness and organization factor is too crucial when you are showing multiple product images of multiple products on a single page. One would like to see a consistency in the way all these product images look. It’s not an SEO factor but a design factor that can improve the look and feel of your product category page.

A consistent category page would show all the similar products in a homogeneous look.

Something like what Myntra has done here by showing all Polo-Ts images in similar backgrounds and with the models.

uniform product images_myntra

A similar consistency can be seen on the below category page where the site has used the images with model face hidden. It has used the hidden face pictures for every listing in that particular category.

particuler caterory uniform product images

You can also call the below listing a consistent one because it has used a similar type of images for all the products- isolated images on white background.

isolated images on white background

However, this tip is hardly followed by many. Still, even the best seller eCommerce stores use the mix of all these image presentation styles. But, I think, this is a right tip and we have also tested it on most of our eCommerce CRO projects and it works just much better than the mixed one.

It’s better to keep the consistency factor alive on your product pages. Go for better, you have already got the good one. There are multiple ways to get product images, use them and get some consistent images for your products.

3. Add a “Latest Arrivals” category for repeat visitors

If your store has a decent number of repeat or loyal visitors then adding a “Latest Arrivals” or “New on Store” category would definitely be a right step to engage them.

You must add this category to simply let your visitors see that what’s new in the store since they visited last time. You can also have some filters on the category to sort the products as per the preferences.

For example, this is how knowband has used the “Recently Added” category to showcase the new products on the store. Repeat or even the new visitors would be surely interested in at least checking out the new products once.

Add a Latest Arrivals category knowband.com

4. Use interactive filters according to the category type

It’s not just about letting your customers find their desired products, but also about narrowing the choices and take the customer to the conversion funnel with a quick decision.

The more are the filters, the narrower becomes the range of choice and the customer reaches to what he/she actually wants. However, using a wrong filter can even take the customer away from the conversion funnel or keep your best products in the background.

You must use the filters on the category pages very carefully and logically. If you look at the Amazon’s site, it has dozens of categories and each category has the filters according to the category types. For example, the men’s clothing section will have filters for the brand, size, shipping type, color, rating, price and so on.

Use interactive filters according to the category type

However, the Smartwatches category has a different set of filters. It will have the filters that apply to this particular category of products only. For example, the filter like Gender, shipping, features, type, Water resistance, brands etc.


Therefore, when you are selling a diversity of products on your store, it’s very important to use the filters according to the type of product that would be there in the category listing.

This also means that you need to be very careful while adding a product to a category and make sure a product does not get filtered out just because it does not come under any of the conditions in that category.

5. Use layered navigation carefully

Filters provide a quite engaging shopping experience to the users. A logical use of filters can take the customers closer to the conversion funnel. However, when you are using layered navigation with facets like brand name, size, price or any filter, you must also know that facet navigation also causes the duplicate content problem. It creates many URLs for the identical content.

Use layered navigation carefully

This is a common issue on any eCommerce store using the layered navigation. However, this problem can be easily sorted out by configuring the search console to help Google know which URL to consider for indexing, that is, by using the canonical tags.

Also, you can use JavaScript codes that change the view without necessarily changing the URL.

6. Never hide the Price of the product

Some eCommerce stores bounded by the manufacturer’s policy or minimum advertised price rules, either do not show the price of the products until checkout or show a hiked price till the checkout page. This practice is however bounded by rules and policies of the manufacturers, but it is never a recommended one.

The final price of the product should always be shown right from the category listing page. Keep your pricing as much predictable as possible. So, product category page is always the best place to reveal the pricing without asking users to necessarily visit the product page or log in to know the price.

It should not be like this:

Never hide the Price of the product

It should be like this:

For example Price of the product

7. Use call to actions to support, not confuse

CTA buttons perform a two faced task for your eCommerce store. One is guiding the customer what’s needed to be done next, and two taking the customer near to your conversion funnel.

A CTA button which can perform both the tasks is always a desirable one. However, some merchants omit the CTA buttons on the product category listing assuming that customers already know that they can click the product image or product title to go to the product page and then add the product to the cart.

While this is a standard navigation pattern in all the eCommerce stores, it is still recommended to use the CTA buttons to guide the users. For example, this is how the PrestaShop default theme shows two CTA buttons on the product category listing:

Use call to actions to support

This might look simple, but it’s a very wise implementation. The “More” button will guide the users to the product page, while the “Add to Cart” will take the user directly to the shopping cart and then checkout.

This one CTA implementation can provide single product shoppers a quicker way to complete their purchase and get into your conversion funnel ultimately.

So, omitting the CTA implementation is not bad here, but including it can give you more conversions upfront.

Over to you

So, these are 7 implementations that can make your Product Category Pages drive some boosted conversions. You should A/B test all these ideas to see how actually they can improve your conversion rates. Utilize the MockingFish free A/b testing tool and test these ideas today, I can bet you will love the results. For your assistance, read how to setup an A/B testing experiment on MockingFish?.


Post A Comment