In this article 10 sections
The PLP as a decision filter
The Product Listing Page (PLP) is where users decide whether your catalog is worth their time. I’ve been auditing ecommerce sites for years and the pattern repeats itself: the user never gets to see the product because the listing page has already driven them away. According to Baymard Institute, with more than 18,000 usability sessions, PLP problems are among the main causes of early abandonment.
The problem isn’t aesthetic. It’s structural. A badly designed PLP hides relevant products, confuses with useless filters and frustrates with insufficient information.
Listing layout: the first impression
Group product variations
One of the most costly mistakes I see in audits: showing each color or size variation as a separate product. If you sell a T-shirt in 8 colors, the user sees 8 almost identical products taking up the listing.
| Approach | Behavior | Result |
|---|---|---|
| Separate variations | 8 identical items in the grid | The user loses context, the catalog feels repetitive |
| Grouped variations | 1 item with color swatches | The catalog feels more varied, navigation is more efficient |
The rule: group variations of the same product into a single listing item. Use swatches or selectors to show the available options.
Grid view vs. list view
Not every product looks equally good in a grid. After analyzing dozens of ecommerce sites, I’m clear on this:
| Type of product | Best view | Reason |
|---|---|---|
| Fashion, home decor, art | Grid | Visual decision, comparing aesthetics |
| Electronics, tools | List | Technical specs visible |
| Groceries | Grid | Visual product recognition |
| Software, services | List | Comparing features and prices |
For visually differentiated products (fashion, home decor), use grid view by default. For spec-driven products (electronics, software), list view lets you show more information without forcing users to open every product page.
On mobile, consider offering a single column for list items that need technical information. Two columns work well for visual products, but they squeeze the information too much for complex products.
Pagination vs. infinite scroll vs. load more
| Method | Pros | Cons | Best for |
|---|---|---|---|
| Pagination | User control, easy to go back | More clicks, fragments the experience | Large catalogs, users who compare |
| Infinite scroll | Smooth, no interruptions | Impossible to reach the footer, hard to go back | Inspiration feeds, casual browsing |
| Load more | A balance, the user is in control | Requires an explicit action | Most ecommerce sites |
For ecommerce, my recommendation is clear: load more with a button that says how many products are left to load. Infinite scroll has severe accessibility problems and makes it impossible to reach the footer, where contact details and policies usually live.
If you use infinite scroll, add anchors to the URL so users can return to the same point after visiting a product page. Without this, users lose their position and have to scroll from the top again.
Default number of products
Showing too few products forces constant pagination. Showing too many slows loading and overwhelms.
| Device | Recommended products | Reason |
|---|---|---|
| Desktop | 24-48 | Enough to explore without excessive scrolling |
| Tablet | 16-24 | Balance between density and performance |
| Mobile | 12-16 | Natural vertical scroll, fast loading |
Let users change this value. Some prefer to see 100 products at once, others 12. The default should be sensible, but not the only option.
Thumbnails: the visual shop window
Enough visual information
The thumbnail should let users evaluate the product without clicking. This principle is fundamental and I see it broken all the time. For visual products, this means:
- The whole product visible, not cropped
- A background that doesn’t compete with the product
- A size large enough to appreciate details
- Adequate image quality (no pixelation)
| Common mistake | Impact | Solution |
|---|---|---|
| Thumbnail too small | The user can’t evaluate it | At least 200x200px on desktop |
| Cropped product | Loses context and proportions | Show the whole product |
| Distracting background | Makes comparison harder | Consistent neutral background |
| Low quality | The product feels cheap | Optimized but sharp images |
Multiple angles on hover
For products where the angle matters (furniture, clothing, accessories), showing additional images on hover speeds up evaluation:
<!-- Example of a thumbnail with hover -->
<div class="product-thumbnail">
<img src="product-front.webp" alt="Product, front view" class="default">
<img src="product-side.webp" alt="Product, side view" class="hover">
</div>On mobile, where there’s no hover, consider a small carousel inside the thumbnail or the ability to swipe between images.
Thumbnails for color filters
When the user filters by color, the thumbnail should show the product in that color, not in the default color. It sounds obvious, but I’ve lost count of how many ecommerce sites show the product in white even though the user filtered by red.
Products with multiple components
For packs, bundles or products that include accessories, the thumbnail should show every component included. If you sell a camera with a case, the thumbnail should show both.
List item information
Essential data in sight
Without opening the product page, users should be able to see:
| Data | Criticality | Why |
|---|---|---|
| Price | Mandatory | The main decision factor |
| Product name | Mandatory | Basic identification |
| Average rating | High | Social proof, quick comparison |
| Number of reviews | High | Context for the rating |
| Availability | High | Avoids post-click frustration |
| Available variations | Medium | Shows options without clicking through |
Price: total clarity
The price must be unambiguous. These are the mistakes I find over and over again:
| Mistake | Problem | Solution |
|---|---|---|
| ”From €X” price with no context | The user doesn’t know the real price | Show a range or the price of the product shown |
| Price excluding VAT in B2C | A nasty surprise at checkout | Always the final price including VAT |
| Discount without the original price | The saving isn’t perceived | Show the struck-through price + the current price |
| Hidden unit price | Makes comparing multipacks harder | Show the price per unit next to the total |
For products whose price varies (sizes, colors), show the price of the variation shown in the thumbnail, not the minimum price.
Ratings: quantity and quality
Average ratings without context are misleading. I repeat it in every audit: a product with 4.5 stars and 3 reviews isn’t comparable to one with 4.3 stars and 500 reviews.
| Metric | What to show | Why |
|---|---|---|
| Average | Stars or a number | Quick evaluation |
| Quantity | Number of reviews | Credibility of the average |
| Distribution | Optional: distribution bar | Spotting polarizing products |
The golden rule: average × quantity. A product with fewer stars but many more reviews is usually a better choice than one with a perfect score and few reviews.
Stock status
Showing availability in the listing keeps users from wasting time visiting sold-out products:
| Status | How to show it | Action |
|---|---|---|
| In stock | No label needed | Normal |
| Low stock | ”Last few left” | Legitimate urgency |
| Sold out | ”Sold out” + a notification option | Allow a restock alert |
| Coming soon | Estimated date | Manage expectations |
Don’t remove sold-out products from the listing entirely: users looking for a specific product need to know it exists even if it isn’t available right now.
Visual differentiation
In listings where products look alike (cables, components, white goods), add differentiators:
- Badges: “Best seller”, “New”, “Sale”
- Key attributes: capacity, dimensions, compatibility
- Use labels: “For gaming”, “Professional”
These elements help users tell apart products that would otherwise look identical.
List item features
Color swatches
For products with color variations, swatches are mandatory in the listing:
| Implementation | Problem | Solution |
|---|---|---|
| No swatches | The user doesn’t know which colors exist | Always show swatches |
| Swatches that don’t update the thumbnail | Visual disconnect | Update the image on selection |
| Only some colors visible | The user misses options | Show all of them or say “+X more” |
| Swatches too small | Hard to tell similar colors apart | At least 20x20px, ideally 24x24px |
On mobile, make sure swatches have a large enough touch area (at least 44x44px including padding).
Saving to favorites
This point is non-negotiable: let users save products without creating an account. Forcing a login to save a product is a guaranteed way to lose them.
<!-- Wishlist without mandatory login -->
<button class="save-to-wishlist" aria-label="Save to favorites">
<svg><!-- heart icon --></svg>
</button>Use localStorage for users who aren’t logged in. When they create an account, migrate their saved favorites.
A comparison tool for technical products
For electronics, appliances and spec-driven products, a comparison tool is essential:
| Feature | Criticality |
|---|---|
| Select products to compare | Mandatory |
| View the comparison as a table | Mandatory |
| Complete specs in the comparison | Mandatory |
| Explanation of technical specs | High (inline help) |
| Highlight differences | Medium |
The comparison table must have complete data. A comparison with empty cells is no use for making decisions.
Quick view for visual products
Quick view lets users see more information without leaving the listing. In my experience, it works well for fashion and home decor, where users want to see more photos without committing to the full product page.
| Quick view content | Include |
|---|---|
| Image gallery | Yes |
| Price and availability | Yes |
| Size/color selector | Yes |
| Add to cart | Yes |
| Full description | No (link to the product page) |
| Full reviews | No (link to the product page) |
On mobile, quick view is less useful because it takes up the whole screen anyway. Consider whether it really adds value or whether going straight to the product page is better.
Adding to cart from the listing
For repeat-purchase products (consumables, basics), let users add to cart straight from the listing:
| Type of product | Add from the listing |
|---|---|
| Simple product, no variations | Yes |
| Product with mandatory variations | No (requires a selection) |
| Expensive or complex product | No (a more considered decision) |
| Repeat purchase (same customer) | Yes, ideally with “buy again” |
Indicator for products already in the cart
If the user already has a product in the cart, show it visually in the listing. It prevents accidental duplicates and helps people pick up interrupted purchases.
Filters: what to offer
Mandatory filters
Whatever the sector, these filters should always be there. They aren’t optional:
| Filter | Reason |
|---|---|
| Price | The main decision factor |
| User rating | Social proof, perceived quality |
| Color | Almost always relevant |
| Size | Critical for fashion, furniture, etc. |
| Brand | Preferences and trust |
Category-specific filters
Each category needs its own filters based on the attributes that differentiate the products:
| Category | Specific filters |
|---|---|
| Electronics | Capacity, resolution, connectivity |
| Fashion | Material, style, occasion |
| Groceries | Allergens, certifications, origin |
| Furniture | Material, dimensions, style |
| Cosmetics | Skin type, ingredients, format |
The attributes that differentiate products should be filters, not separate categories. If you sell coats and jackets, “Garment type” is a filter inside “Coats and jackets”, not two separate categories.
Themed filters
Not every user knows exactly what they’re looking for. Themed filters help:
| Traditional filter | Themed filter |
|---|---|
| Category > Subcategory | ”Gifts for him” |
| Color + Material | ”Office look” |
| Price + Brand | ”Under €50” |
| Technical attributes | ”For sensitive skin” |
These filters work especially well for occasions (weddings, vacations), recipients (gifts) and problems the user wants to solve.
Status filters
| Filter | Usefulness |
|---|---|
| On sale / Reduced | High demand, saves time |
| New in | Returning users |
| Best sellers | Social proof, quick decision |
| Available now | Avoids frustration |
Filters: logic and behavior
AND vs. OR logic
Combining filters must follow predictable logic. It seems basic, but I’ve seen implementations get it terribly wrong:
| Combination | Logic | Example |
|---|---|---|
| Across filter types | AND | Color:Red AND Size:M |
| Within the same filter | OR | Color:Red OR Color:Blue |
If the user selects red and blue, they want to see red OR blue products, not products that are red AND blue at the same time.
Allow multiple selection
Forcing users to pick a single value per filter is limiting. If I want to see products in red, blue or green, I need to be able to select all three:
<!-- Wrong: radio buttons (a single value) -->
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
<!-- Right: checkboxes (multiple values) -->
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">Show the number of results
Every filter option should show how many products match:
| Without a counter | With a counter |
|---|---|
| ☐ Red | ☐ Red (45) |
| ☐ Blue | ☐ Blue (12) |
| ☐ Green | ☐ Green (0) |
The counter should update in real time as other filters are applied. If I’ve already filtered by size M, the color counter should only count products in size M.
Consider hiding or disabling options with 0 results to avoid frustration.
Explain technical filters
Filters that use sector-specific terminology need an explanation:
<!-- Filter with an explanatory tooltip -->
<label>
<input type="checkbox" name="ipx7">
IPX7
<button aria-label="What does IPX7 mean?">ⓘ</button>
</label>The tooltip or modal should explain in plain language what the term means and why the user might care.
Filter persistence
Applied filters must persist when:
- The user goes to a product page and comes back
- The user uses the browser’s “Back” button
- The user moves to another page of the listing
Resetting filters for no reason is one of the most reported frustrations in usability tests. I’ve seen it cause abandonment in eye-tracking sessions more times than I can count.
Visible, applied filters
Users should be able to see at all times:
- Which filters they’ve applied: chips or a list of active filters
- How to remove each filter: an X or a clear button on each chip
- How to remove all filters: “Clear filters”
<!-- Applied filters in plain sight -->
<div class="applied-filters">
<span class="filter-chip">
Color: Red <button aria-label="Remove filter">×</button>
</span>
<span class="filter-chip">
Size: M <button aria-label="Remove filter">×</button>
</span>
<button class="clear-all">Clear filters</button>
</div>Filters: interface and layout
Number of visible options
Showing too many filter options overwhelms. My rule: 4-8 options visible at first, the rest behind “Show more”:
| Number of options | Treatment |
|---|---|
| 1-8 | Show them all |
| 9-20 | Show 8 + an expandable “Show more” |
| 21+ | Show 8 + a search box inside the filter |
Numeric filters with free input
For price and other quantities, offering only predefined ranges is limiting:
| Implementation | Problem | Solution |
|---|---|---|
| Ranges only (€0-50, €50-100…) | Doesn’t match the real budget | Min/max inputs |
| Slider only | Hard to be precise | Slider + numeric inputs |
| Inputs only | Less visual | Inputs + visual feedback |
The ideal combination: a slider for quick adjustment + numeric inputs for precision.
Accessing filters on mobile
On mobile, filters are usually hidden behind a button. That button should be:
- Prominent: not a small icon that can be mistaken for decoration
- Clearly labeled: “Filter” or “Filters (3)”, saying how many are active
- Accessible: fixed or sticky so it can be reached without scrolling
<!-- Accessible mobile filter button -->
<button class="filter-toggle" aria-expanded="false">
<svg><!-- filter icon --></svg>
Filter
<span class="filter-count">3</span>
</button>The “Apply” button on mobile
On mobile, filters usually open in a panel. That panel needs a sticky “Apply” button at the bottom:
| Without a sticky button | With a sticky button |
|---|---|
| The user scrolls and loses the button | The button is always visible |
| They don’t know how to apply | A clear, accessible action |
| They abandon the filter selection | They complete the action |
The button should show how many results match: “View 45 products”.
Order of filter options
The order of options in a filter isn’t trivial. For long lists (brands, colors):
| Sort criterion | When to use it |
|---|---|
| Alphabetical | Long lists where the user is looking for something specific |
| By popularity | Short lists, the user is exploring |
| By relevance | Contextual filters (based on other filters) |
For brands: alphabetical. For colors: by popularity or grouped by family (blues, reds…). Never random.
Search inside long filters
If a filter has more than 20 options, add a search field:
<!-- Search inside the brand filter -->
<div class="filter-search">
<input type="text" placeholder="Search brand..." aria-label="Search brand">
</div>
<ul class="filter-options">
<!-- filtered options -->
</ul>Sorting the listing
Sort options you can’t do without
| Criterion | Why it’s needed |
|---|---|
| Price (low to high) | Users on a limited budget |
| Price (high to low) | Users looking for quality/premium |
| Rating | Decisions based on social proof |
| Best sellers | ”What others are buying” |
| New in | Returning users |
Default order: diversity
I have a clear opinion here: the default order shouldn’t be “cheapest first” or “most expensive first”. It should show a diverse selection that represents the catalog:
| Default order | Problem |
|---|---|
| Price ascending | The user assumes everything is cheap |
| Price descending | The user assumes everything is expensive |
| Best sellers | Homogenizes, hides new products |
| Diversity/Relevance | Represents the real catalog |
A diversity algorithm mixes products from different price ranges, brands and popularity levels to give a complete picture of the catalog.
Clear labels
“Price: low to high” is clearer than “Price ascending”. Technical terms are for developers, not users:
| Technical | Clear |
|---|---|
| Ascending/Descending | Low to high / High to low |
| By rating | Top rated |
| By date | Newest |
Show the current order
The sort selector should always show which criterion is applied:
<!-- Dropdown showing the current selection -->
<select aria-label="Sort by">
<option value="relevance" selected>Relevance</option>
<option value="price-asc">Price: low to high</option>
<option value="price-desc">Price: high to low</option>
<option value="rating">Top rated</option>
</select>Sorting by rating: include quantity
When sorting by rating, don’t use the average alone. A product with 5 stars and 2 reviews shouldn’t appear before one with 4.7 stars and 500 reviews.
The formula should weigh both average and quantity. A simple approximation:
score = (average × reviews) / (reviews + k)Where k is a smoothing factor (typically 10-50) that keeps products with few reviews from dominating.
The real cost of a badly designed PLP
A poor PLP doesn’t just lose the current sale: it creates the impression of a limited catalog or an unprofessional store. Users who can’t find what they’re looking for don’t assume the problem is the interface. They assume the product doesn’t exist.
I’ve seen ecommerce sites lose 15-25% of users during the catalog exploration phase because of PLP problems. It isn’t anecdotal: it’s a pattern.
The time you invest in optimizing the PLP has a direct impact on engagement metrics (pages per session, time on site) and on conversion. Google documents the importance of navigation structure for crawling in its SEO guide, and NNGroup has extensive research on filters and faceted navigation.
The investment in a well-designed PLP pays off in every user session. It isn’t just UX: it’s business.