Shopify技术求助：产品页展示同供应商全部产品的实现方案

咱们先拆解下你遇到的核心问题：之前用collections['shop-all'].products循环同供应商产品，但Shopify集合默认最多返回50个产品（就算调上限也只能到200），产品页又没法做分页，导致超过数量的产品根本显示不出来。你尝试的all_products[vendor_handle].vendor逻辑不对，因为all_products是通过单个产品的handle来调用产品的，不是用来批量获取同供应商产品的，所以这个写法走不通。

下面给你两个实用的解决方案，按需选择：

方案1：自动集合+Liquid（适合供应商数量少的场景） #

这个方法不用写JS，纯Liquid就能实现，核心思路是给每个供应商创建一个自动集合，然后在产品页动态调用对应集合的产品。

步骤1：创建自动集合 #

在Shopify后台 -> 产品 -> 集合，点击“创建集合”：

• 集合类型选自动
• 命名规则统一用vendor-{{ 供应商名称的handle }}，比如供应商叫“Nike”，就命名为vendor-nike
• 条件设置为：供应商 等于 [对应供应商的全称]
• 保存集合（每个供应商都要创建对应的自动集合）

步骤2：产品页Liquid代码 #

把这段代码加到你产品页需要展示同供应商产品的位置：

{% assign current_vendor = product.vendor %}
{% assign vendor_handle = current_vendor | handleize %}
{% assign vendor_collection = collections['vendor-' | append: vendor_handle] %}

{% if vendor_collection %}
  <div class="same-vendor-products">
    {% for product in vendor_collection.products %}
      {% comment %} 排除当前正在查看的产品 {% endcomment %}
      {% if product.handle != product.handle %}
        <div class="recommendations_img">
          <a href="{{ product.url }}" title="{{ product.title }}">
            <img 
              src="{{ product.images.first | product_img_url: 'small' }}" 
              alt="{{ product.title }}"
            />
          </a>
        </div><!-- .recommendations_img -->
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

这个方案的优势是简单直接，纯Liquid渲染，不需要额外的前端开发，适合供应商数量不多的店铺。

方案2：GraphQL API（适合供应商数量多的场景） #

如果你的店铺供应商很多，手动创建集合太麻烦，就用Shopify的Storefront GraphQL API来批量获取同供应商的所有产品，不受集合数量限制。

步骤1：创建Storefront Access Token #

在Shopify后台 -> 设置 -> 应用和销售渠道 -> 开发应用 -> 创建应用，然后在“API权限”里启用Storefront API，复制生成的Access Token（记得保存好，不要泄露）。

步骤2：产品页代码 #

先在产品页添加一个容器用来放产品：

<div class="same-vendor-products"></div>

然后在页面底部添加这段JS代码（替换掉你的店铺front access token）：

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前产品的供应商和handle
  const currentVendor = "{{ product.vendor | escape }}";
  const currentHandle = "{{ product.handle | escape }}";
  
  // GraphQL查询语句：获取同供应商的产品（最多100个，超过可以加分页逻辑）
  const query = `
    query {
      products(first: 100, query: "vendor:${currentVendor}") {
        edges {
          node {
            handle
            title
            images(first:1) {
              edges {
                node {
                  transformedSrc(width: 150, height: 150)
                  altText
                }
              }
            }
          }
        }
      }
    }
  `;

  // 调用Shopify GraphQL API
  fetch('/api/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': '你的店铺front access token'
    },
    body: JSON.stringify({ query })
  })
  .then(response => response.json())
  .then(data => {
    const container = document.querySelector('.same-vendor-products');
    if (!container) return;

    // 遍历返回的产品，渲染到页面
    data.data.products.edges.forEach(edge => {
      const product = edge.node;
      // 跳过当前正在查看的产品
      if (product.handle === currentHandle) return;

      const productImage = product.images.edges[0]?.node;
      const productUrl = `/products/${product.handle}`;

      const productElement = document.createElement('div');
      productElement.className = 'recommendations_img';
      productElement.innerHTML = `
        <a href="${productUrl}" title="${product.title}">
          <img 
            src="${productImage?.transformedSrc || ''}" 
            alt="${productImage?.altText || product.title}"
          />
        </a>
      `;
      container.appendChild(productElement);
    });
  })
  .catch(error => console.error('加载同供应商产品出错:', error));
});

这个方案的优势是不用手动维护集合，自动获取所有同供应商产品，适合供应商多、产品数量大的店铺。

内容的提问来源于stack exchange，提问作者new recruit 21