Hello.
I have tried so many times to get this bar that shows how many products on each product page. Does any one know how to do this. No one have the right code..
Topic summary
A user is attempting to add a prominent bar displaying product counts on collection pages but hasn’t found working code despite multiple attempts. The desired element is a large, visually distinct bar (shown in an attached screenshot).
Initial Solution Provided:
- Another user shared Liquid code to insert into
main-collection-product-grid.liquid - The code displays product counts using Shopify’s translation strings
- Implementation involves finding the ‘facet-filters sorting caption’ section and adding the snippet above it
Current Status:
- The original poster clarified the provided solution doesn’t match their needs—they want a “big bar” rather than the standard text display shown in the response screenshots
- Store preview URL has been shared for further troubleshooting
- The discussion remains open as the desired visual design hasn’t been achieved yet
Hi @silenceclothing ,
-
Go to Online Store > Themes > Actions > Edit Code > main-collection-product-grid.liquid
-
Find ‘facet-filters sorting caption’ then add below code just above this div tag
{%- if collection.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }}
{%- elsif collection.products_count == collection.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
{%- else -%}
{{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
{%- endif -%}
Out put
this is not what i want. look at the picture, its a big bar.
Could you please share your store URL..