I want to hide products in the template based on product tags

Shopify Discussion
1

To hide products during display, I use {% unless product.tags contains ‘hidden’ %}. However, this causes an issue where, after pagination, the second page, which originally had 12 products, ends up with only 3 products after hiding. How can I filter out products based on tags before pagination?

shaobo_0-1733972852004.png
shaobo_0-1733972852004.png1018×625 18.7 KB

2

An error occurred after making the changes as you suggested.

The error message is as follows:

Liquid error (sections/main-collection-product-grid line 31): Array ‘filtered_products’ is not paginateable.

Below is my template code：


  {% assign filtered_products = collection.products | where: "tags", "hidden", false %}
  {%- paginate filtered_products by 12 -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
      
    {%- endif -%}

    

      {{ 'component-facets.css' | asset_url | stylesheet_tag }}
      
      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        
          {% render 'facets',
            results: collection,
            enable_filtering: section.settings.enable_filtering,
            enable_sorting: section.settings.enable_sorting,
            filter_type: section.settings.filter_type,
            paginate: paginate
          %}
        
      {%- endif -%}

      
        {%- if filtered_products.size == 0 -%}
          

            

            
              ## 
                {{ 'sections.collection_template.empty' | t -}}
                

                {{
                  'sections.collection_template.use_fewer_filters_html'
                  | t: link: collection.url, class: 'underlined-link link'
                }}
              
            

          

        {%- else -%}
          
            

            
              {%- for product in filtered_products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                - {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: section.settings.image_ratio,
                      image_shape: section.settings.image_shape,
                      show_secondary_image: section.settings.show_secondary_image,
                      show_vendor: section.settings.show_vendor,
                      show_rating: section.settings.show_rating,
                      lazy_load: lazy_load,
                      show_quick_add: section.settings.enable_quick_add,
                      section_id: section.id
                    %}
                
              {%- endfor -%}
            

            {%- if paginate.pages > 1 -%}
              {% render 'pagination', paginate: paginate, anchor: '' %}
            {%- endif -%}
          

        {%- endif -%}
      

    

  {%- endpaginate -%}
  {% if section.settings.image_shape == 'arch' %}
    {% render 'mask-arch' %}
  {%- endif -%}
3

To resolve the issue of filtering products by tags before pagination, you need to filter the collection of products at the data level before applying pagination logic. Shopify Liquid itself doesn’t support advanced filtering of products directly in the Liquid code for collections, but you can achieve this in three ways:

Option 1: Use a Custom Collection Scope

Create a collection that excludes products with the “hidden” tag using Shopify’s admin panel by creating a collection rule:

  1. Navigate to your Shopify Admin > Products > Collections.

  2. Edit or create a collection.

  3. Add a condition like:

    • Product tag is not equal to hidden

  4. Use this new collection in your Liquid code instead of the current one. It ensures the filtered collection doesn’t include the “hidden” products.

    Option 2: Use JavaScript Filtering Post-Render

    If you cannot filter before pagination and still need dynamic filtering, you can use JavaScript after the page loads. For example:

    1. Render all products (including hidden ones) server-side.
    2. Use JavaScript to hide elements with the “hidden” tag dynamically.

    Option 3: Build a Paginated Filter Manually

    If you are using a custom theme or need advanced filtering, you can:

    1. Use JavaScript or Shopify apps (like Search & Discovery) for managing pagination and filtering combined.
    2. Fetch filtered data using AJAX if supported in your theme.

    Would you like help with implementing one of these approaches? if you need my help contact me on whatapp: +923099239986 or email me (mention below in signature)

4

When I select the condition, the tag can only be set to “equal to” and not “not equal to”.