Decisive Recipe Of Perfect Product Listing Page Design ( Sub-Category Page )

Grids work bet when the product images tell maximum about the item without requiring any textual content to explain more. In grid view, the images shold be of high-quaity as the product presentation heaviy relies on its image.

When the images are not enough to tell everything about the product, and they need more information, then the List View can give more room to add more details along with each product.

The list view is used when many other similar products can confuse the buyer and the additional textual content is essential to distinguish one from the other.

( Example: Barnes & Noble )

Online shoppers are paralyzed, when they get an overwhelming list of choices. If you want to buy ballpoint on Jetpens.com, it will return you more than 1000 products and all look same to each other. What would you do there? If your site is like that, you should do the same as Jetpens did. Give your customers a Filtering tool to help them narrow down their search to the desired product list.

Though, the online shoppers have a filtering tool, but they might also need a sorting feature to be specific. For example, if they are looking for laptop , they might want to filter it based on its processortype, screen size, brand, operating system and other criteria.

( Example: Nordstrom )

Showing “Add to Cart” buttons depends on the type of products. If the products come with preferences, like size, color, etc, then it is not possible. But, if these are te standard products, “Add to Cart” button should be visible with the product on the category page. This will save one click of your customer in the buying process..

You shouldn’t miss adding add-to-cart button on the listed products on the sub category pages. This is a great way to make your sub category page better and get more conversions. This will remove one step from the buying steps as they buyer will buy items directly from the sub category page without landing ont eh product page.

( Example: Methodhome )

Adding little more functionality to show extra imagery will really help increase overall satisfaction and experience of the shoppers that will also definitely sell the products. Many inspirational ecommerce websites reveal additional products that appear on hover. That sensible feature is an easy way to show clearly how the product will look from different sides.

( Example: Zalando )

A list of recently viewed items includes products, which the user browsed and visited recently, using the history. At many other pages, like checkout page, this list is generally located at the bottom of the page, but on the product listing page – sub-category page – the navigation is easy if positioned at the sidebar. The user finds it easy to go back to the previously visited products pages at any stage of their navigation.

( Example: Cabelas )

Users find it really disappointing and frustrating, when they select any product from a sub category page and land on the product page to know their desired size or color is out of stock or not available. This can be avoid by playing little intelligently on the sub category page.

As in the examples, you will see with the mouse hover over the the product images on the category page, it quickly shows which sizes and colors are available to buy. This feature when combined with the add to cart button will shorten the shoppers journey and lessen the number of clicks he requires to buy an item.

( Example: Macy’s )