How to hide products on collection page in frontend?

Topic summary

A merchant split product variants into separate products due to Shopify restrictions, using metafields to display them as variants on the frontend. They successfully render only the lowest-priced product on collection pages to avoid duplicates.

The Problem:

  • collection.products_count reflects all products in the collection, not just rendered ones
  • This causes incorrect counts in:
    • Collection page headers
    • Filter displays
    • “Load more” button functionality

Proposed Solution:
A support representative suggests using JavaScript to override the display count client-side, since collection.products_count is generated server-side and cannot be modified in Liquid.

Implementation steps:

  1. Locate the product list file (e.g., main-collection-product-grid.liquid)
  2. Add a JavaScript snippet inside the <ul> tags to count and display only rendered products
  3. Apply the same approach to search pages

A code snippet and screenshot were provided. The discussion remains open pending confirmation that the solution works.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.

In our store, we have a lot of products with variant. to comply with shopify restrictions, i unfortunately had to split the variants into products. depending on metafields, the products are shown as a product with variants in frontend. no probs here. to avoid the dieferent products to be displayed on the collection page, i only render the product with lowest price. so far so good.
now the problem:
collection.products_count is not affected by the number of products i render.
therefor a wrong number of products are shown in the header of the product page render.
a wrong number of products are shown in the available products count in filters and the “load more” button at the bottom of the page.

does anyone have an idea how work around it and solve the problem?

Hi @naeh-paradies

I am from Mageplaza - Shopify solution expert.

In case you have successfully displayed the product list as desired, but collection.products_count is not showing correctly, I will guide you on how to fix this issue in the best way:

collection.products_count is generated server-side and cannot be changed in Liquid. Therefore, you need to add a JavaScript snippet to handle the display on the client side:

Step 1: Open the file that contains the code for displaying your product list. It usually uses ul and li tags. For example, the file: main-collection-product-grid.liquid.

Step 2: Add the following JavaScript code inside the ul tags, as shown in the example below.


Step 3: Save and check the result.

For the search page, you can do the same as above.

Please let me know if it works as expected!

Best regards!