Shopify集合页不受分页限制循环全量商品匹配base_sku求助

你当前代码仅能匹配前1000个商品的核心原因是：{% paginate collections.all.products by 1000 %} 未指定页码时默认仅返回第一页数据，没有遍历全部分页获取全量商品。

方案一：Liquid 全量遍历（适用于全店商品数≤5000的场景，Shopify Liquid 中 collections 最多返回5000条商品数据） #

直接循环所有分页页码，拉取每一页的商品进行匹配，同时优化标签遍历逻辑减少冗余循环，修正后代码如下：

<div id="prod-var" class="prod-variants">
  {% comment %} 提取当前商品的基础信息 {% endcomment %}
  {% assign base_url = "" %}
  {% assign first_colour = "" %}
  {% assign first_size = "" %}
  {% for tag in product_card_product.tags %}
    {% if tag contains "BASE SKU" %}
      {% assign base_url = tag | split: "_" | last %}
    {% elsif tag contains "COLOUR" %}
      {% assign first_colour = tag | split: "_" | last %}
    {% elsif tag contains "SIZE" %}
      {% assign first_size = tag | split: "_" | last %}
    {% endif %}
  {% endfor %}

  {% if base_url != blank %}
  <div class="variant-all-div">
    {% comment %} 计算总页数，遍历所有分页拉取全量商品 {% endcomment %}
    {% assign total_products = collections.all.products_count %}
    {% assign page_size = 1000 %}
    {% assign total_pages = total_products | divided_by: page_size | ceil %}

    {% for current_page in (1..total_pages) %}
      {% paginate collections.all.products by page_size page: current_page %}
        {% for product in collections.all.products %}
          {% comment %} 单次循环提取当前匹配商品的颜色、尺寸 {% endcomment %}
          {% assign match_base = false %}
          {% assign colour = "" %}
          {% assign size = "" %}
          {% for tag in product.tags %}
            {% if tag contains base_url %}
              {% assign match_base = true %}
            {% elsif tag contains "COLOUR" %}
              {% assign colour = tag | split: "_" | last %}
            {% elsif tag contains "SIZE" %}
              {% assign size = tag | split: "_" | last %}
            {% endif %}
          {% endfor %}

          {% comment %} 匹配成功且不是当前主商品则渲染 {% endcomment %}
          {% if match_base and colour != blank and size != blank %}
            {% if first_colour == colour and first_size == size %}
              {% continue %}
            {% endif %}
            <div class="variant-div">
              <a class="collec-variant" href="{{product.url}}">
                <img style="width: 30px; height: 30px;" src="{{ product.featured_media | img_url:'30x30' }}" alt="{{ colour }}">
              </a>
              <span class="tooltiptext">{{ colour }}</span>
            </div>
          {% endif %}
        {% endfor %}
      {% endpaginate %}
    {% endfor %}
  </div>
  {% endif %}
</div>

本次代码核心优化点：

• 前置判断base_url是否为空，避免无BASE SKU标签的商品执行无效遍历
• 先计算全店商品总页数，循环遍历每一页拉取商品，突破单页1000条的限制
• 优化标签遍历逻辑，单次循环即可提取所有所需字段，减少了2/3的标签遍历次数
• 增加空值判断，避免无颜色/尺寸标签的商品渲染异常

方案二：Storefront API 异步加载（适用于全店商品数>5000的场景） #

如果全店商品超过5000，Liquid 无法直接拉取全量数据，可通过前端异步调用 Shopify Storefront API 查询匹配 base_sku 的商品：

• 第一步：在页面中注入每个商品的 base_sku 自定义属性
• 第二步：页面加载完成后，批量调用 Storefront API 按标签过滤查询匹配商品，动态渲染到对应商品下方
• 该方案不会阻塞页面首屏加载，性能更优

• 集合页每个商品都遍历全店商品会产生较高的循环次数，若集合页商品较多建议开启片段缓存，降低服务器压力
• 标签命名需保持统一规范，避免因格式不一致导致匹配失败

内容的提问来源于stack exchange，提问作者Berk B.