Shopify集合页面隐藏产品后如何填充空白并调整分页？

问题根源 #

你当前用{% continue %}跳过带hideProd标签的产品，本质是在Shopify默认分页返回的产品列表里做“跳过显示”，但Shopify的分页逻辑是基于原始集合的产品总数计算的，不是过滤后的数量。比如原始100个产品分5页（每页20），排除20个后，每页实际显示的产品会少于20，同时分页总数还是5页，就出现了第一页没填满却有多余分页的问题。

解决方法 #

方法一：后台集合规则过滤（推荐，性能最优） #

直接在Shopify后台通过集合规则过滤掉目标产品，让集合返回的产品列表本身就是过滤后的，分页会自动适配：

• 进入Shopify后台，打开目标集合的编辑页面
• 在「条件」板块添加规则：标签 → 不包含 → hideProd
• 保存设置后，集合的产品列表会自动排除带指定标签的产品，分页总数会根据过滤后的产品数重新计算（比如80个产品就会显示4页，每页20个）

方法二：模板层面手动处理过滤与分页（适用于无法用后台规则的场景） #

如果必须在模板里实现过滤，需要先收集所有符合条件的产品，再对这个过滤后的数组做分页：

{% comment %} 先收集所有不带hideProd标签的产品 {% endcomment %}
{% assign filtered_products = '' | split: '' %}
{% for product in collection.products %}
  {% unless product.tags contains 'hideProd' %}
    {% assign filtered_products = filtered_products | push: product %}
  {% endunless %}
{% endfor %}

{% comment %} 对过滤后的数组做分页，这里的20是每页显示数量 {% endcomment %}
{% paginate filtered_products by 20 %}
  {% for product in paginate.items %}
    <!-- 你的产品网格渲染代码 -->
  {% endfor %}

  {% comment %} 渲染分页导航（如果需要） {% endcomment %}
  {% if paginate.pages > 1 %}
    <div class="pagination">
      {% if paginate.previous %}
        <a href="{{ paginate.previous.url }}">上一页</a>
      {% endif %}
      {% for part in paginate.parts %}
        {% if part.is_link %}
          <a href="{{ part.url }}">{{ part.title }}</a>
        {% else %}
          <span>{{ part.title }}</span>
        {% endif %}
      {% endfor %}
      {% if paginate.next %}
        <a href="{{ paginate.next.url }}">下一页</a>
      {% endif %}
    </div>
  {% endif %}
{% endpaginate %}

注意：如果集合产品数量较多，这种方法可能会有性能损耗，优先推荐方法一。

内容的提问来源于stack exchange，提问作者Mrunal shah