showing 20 of 216



Add relevant sorting options

In order to find products they’re potentially interested, being able to sort the list is critical.   Common sorting options: Price Popularity Relevance New Ratings   Which sorting options do you provide?  



Organize products in a simple structure

KISS – Keep It Simple and Stupid That means simple category names, and as few categories as possible. It also means structuring the catalog in an intuitive way that makes products are easy to find.



Have relevant dynamic filters

For stores of a certain size Filters are particularly important for stores with over about 50 products. If your store only has a handful of products, there’s no point in filtering them.   My advice for your filters Provide category-specific filters in addition to site-wide filters (brand, price, ratings) (read more on this in this […]



Display these product attributes

The attributes below are a must. Image Title Price Star rating + # ratings Product variations, if any (typically in the form of color swatches)   List View vs Grid View If your products are heavy on specs, you might opt for a List View instead of a Grid View, in which case you can […]



Add urgency elements

There are several ways to build urgency Show how much they save on sale items Have limited quantity or limited time offers Offer free shipping or same-day (or next day) delivery if they purchase before a certain time Inform users about limited stock   Flash sales TBDress is the perfect example of the implementation of […]



Feature products, bundles or deals at the top

Inspiration from Amazon Amazon helps their shoppers reduce the number of options to choose from. They have multiple sections at the top of the category page with featured products: best sellers top rated recommended for you most wished for most gifted hot new releases   You can either add a section at the top of […]



Avoid pagination

Pagination isn’t great The page links are usually small and hard to click accurately, especially on mobile. Those pagination links load another page, which slows down the browsing experience. And users browse fewer products on average with pagination than with a Load More button.   Infinity scrolling is evil You scroll down and think that […]



Highlight items that are in the shopper’s cart

In product lists (categories) Add a label or replace the ‘Add to Cart’ button with ‘View Cart”.   Additional functionality You can also update those added items to allow shoppers to change the quantity, and/or include links to additional products or matching accessories.



Feature important product filters at the top of the product list

Sidebar + featured section Have the featured filtering values in the filter sidebar and at the top of the product list. Test making that top ‘featured filters’ section sticky, meaning that it remains visible on both desktop and mobile while scrolling down. Don’t use banner-like graphics for featured filters   Feature sparingly Adjust the visual […]



Truncate filter values

Truncate Truncate filters after about 10 values (truncate if minimum 5 values) Add a visual indicator next to the truncation link (an arrow or a +) Fade the last filter value   Link style Use the site-wide link styling for the truncation link Position the truncation link close to the filter values


Display breadcrumbs

On desktop Display hierarchical breadcrumbs. They’re important for SEO, and to help users figure out where they are on the site. If they come from a search, you can also add a ‘Back to Results’ link.   On mobile Have a link to the parent category only. There isn’t enough space to show the full […]


Have intermediary category pages for the first 1-2 levels

Purpose The main purpose of those pages is to introduce the sub-categories, and give them inspiration and guidance to help decide which sub-category they’re interested in.   Components Provide thumbnail previews, longer titles, and descriptions for those sub-categories. These components will also clarify categories with ambiguous industry jargon. Feature the sub-categories prominently, at the top […]


Interactive Color Swatches

More options available On IKEA, instead of showing variants there, they add More options available under the product. Interesting approach, it makes visitors wonder what the other options are. I think that is both a good and a bad thing. Curiosity is good, but it creates some confusion.   Show the color variants Macy’s, alternatively, […]


Avoid Quick Views

Quick Views are a bad idea According to Baymard (source)… they’re a symptom treatment for poor product list design (not enough information/attributes, thumbnails too small, etc.) users confuse them for the product page and struggle to understand the site’s hierarchy they introduce friction to the user’s browsing process The lack of a clear “product page […]


Provide additional list item information on mouse hover

Avoid pogo-sticking In Baymard’s user testing (source), showing too little information in the list made test subjects do extensive “pogo-sticking” (jumping back & forth between the list and product pages). Showing too much information leads to overwhelm.   Options on desktop If your niche is visually-driven (apparel, home decor,…), combine a ‘cut-out’ image by default, […]


Show product attributes consistently inside of a product list

Same order Put the same attributes in the same order. E.g. how many cups of tea a container of tea can make?   Inconsistencies According to Baymard: (source) 64% of e-commerce sites impede users ability to compare the product in their list due to inconsistencies in the listed product attributes. Shoppers tend to skip products without […]


Educate your shoppers in your category pages

Where? While this is commonly done in product descriptions and the homepage, you can also educate your visitors on the category page. Here’s a good example of a product page which educates well Follain has a category page with a Clean Fact section.   Copy sections You can copy some of the sections you have […]


Make it easy to trigger the product comparison

Friction On most stores that I reviewed recently which had a Compare feature, it was very difficult to figure out how to access the Comparison page once you select a couple of products to compare. I honestly couldn’t figure it out in a few cases.   How it should be Here’s a good example of […]


3 images per row on desktop, 2 per row on mobile

GridView layout This recommendation applies to a Grid View layout, which is most relevant for very visual products without a lot of specs (e.g. clothing and apparel). If your products are in-between those two extremes, you could give the option to users to switch view between Grid and List. On mobile, you can typically fit […]