Display Product Count for Better Search Context
If users don't know how many products are available in a collection or after filtering, they may feel lost or frustrated. Without product count visibility, they might assume there are too many (or too few) options and abandon the search.
Always show the total product count at the top of collections and update it dynamically when filters are applied. This gives users a clear expectation of their options, helping them refine or expand their search with confidence.
- Your collection pages have bounce rates above 60% or users frequently return to homepage after viewing collections
- Analytics show low filter usage rates (less than 15% of collection visitors use filters) despite having filtering options
- You have collections with 20+ products or highly variable inventory that changes frequently
- Your store runs on Shopify, WooCommerce, or Magento with basic theme customization capabilities
- You receive customer service inquiries about product availability or users asking "how many options do I have?"
Display product counts prominently at the top of your collection pages with real-time updates when filters are applied.
- Shopify Implementation: Navigate to your theme editor, edit your collection template file, and add this code above your product grid:
{% assign product_count = collection.products.size %}
{{ product_count }} {% if product_count == 1 %}product{% else %}products{% endif %}
- Styling specifications: Position the count 16-24px above your product grid, use your primary text color at 14-16px font size, and ensure minimum contrast ratio of 4.5:1
- Dynamic filtering: If using apps like Searchanise or Boost, enable their product count display options in app settings. For custom filters, add JavaScript to update count elements when filters change
- Mobile optimization: Reduce font size to 12-14px and position count directly above the sort dropdown on mobile devices
Timeline: 2-4 hours for basic implementation, 6-8 hours if custom filtering integration is required.
- Filter usage rate increase of 20-35% within 3-4 weeks as users gain confidence in refining searches
- Collection page bounce rate reduction of 8-15% measured through Google Analytics behavior reports
- Average session duration on collection pages increase of 15-25% indicating improved user engagement
- Conversion rate improvement of 5-12% from collection pages, tracked via enhanced ecommerce or platform analytics
- AVOID: Hiding product counts on mobile due to space constraints - users need this context even more on smaller screens
- BEST PRACTICE: Use condensed layouts but always maintain count visibility with appropriate sizing
- AVOID: Static product counts that don't update when inventory changes or filters are applied
- BEST PRACTICE: Implement real-time updates using AJAX or your platform's dynamic loading capabilities
- AVOID: Placing product counts below the fold or buried within filter sections where users might miss them
- BEST PRACTICE: Position counts prominently at the top of collections, ideally near sort options for maximum visibility
Get A Free Website Audit.
We’ll identify what’s leaking revenue on your site and show you how to fix it. The free audit includes: