面试备战：Shopify集合数据获取及产品卡片开发问题咨询

• 先澄清一个关键误区：做前台的产品Section完全不需要用到Admin API（也就不需要admin权限的access token）。Shopify针对前台展示数据提供了两种更适配的方案：

  1. 直接用Liquid模板渲染（主题开发标准方式）
     这是最直接的做法，完全不需要调用API，因为Liquid是Shopify服务器端渲染的模板语言。在你的Section文件（Sections目录下）里，直接通过Liquid对象读取集合的产品数据即可，示例代码：

     {% assign target_collection = collections['你的集合handle'] %}
     {% for product in target_collection.products %}
       <div class="product-card">
         <h3>{{ product.title }}</h3>
         <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
         <p>{{ product.price | money }}</p>
       </div>
     {% endfor %}
     

     这里的集合handle就是你店铺集合URL末尾的字符串，比如集合URL是your-shop.myshopify.com/collections/best-sellers，handle就是best-sellers。

  2. 用Storefront API实现动态加载（如果需要前端交互）
     如果你的需求是前端动态拉取数据（比如下拉加载更多产品），就用Storefront API。这个API不需要admin token，而是用Storefront Access Token，获取方式：

     • 进入店铺后台 → 「应用和销售渠道」→ 「开发应用」→ 「创建应用」→ 选择「自定义应用」
     • 在应用的「API权限」里启用Storefront API，生成对应的token
       之后在Assets目录的JS文件里发起请求即可，示例：

     const storefrontToken = '你的Storefront Token';
     const shopDomain = 'your-shop.myshopify.com';
     const collectionHandle = '你的集合handle';
     
     // 用REST Storefront API请求集合产品
     fetch(`https://${shopDomain}/collections/${collectionHandle}/products.json?limit=10`, {
       headers: {
         'X-Shopify-Storefront-Access-Token': storefrontToken
       }
     })
     .then(res => res.json())
     .then(data => {
       // 拿到products数组后渲染产品卡片
       data.products.forEach(product => {
         // 渲染逻辑示例
         const card = document.createElement('div');
         card.className = 'product-card';
         card.innerHTML = `<h3>${product.title}</h3><img src="${product.images[0].src}"><p>${product.price}</p>`;
         document.querySelector('.product-list').appendChild(card);
       });
     });
     

• 关于你提到的/products.json端点：这个属于REST Storefront API的一部分，只要带上Storefront Access Token就能正常请求，不需要admin权限。

• 为什么不能用Admin API？Admin API是给店铺后台管理操作（比如批量修改产品、订单）用的，需要极高权限，前端前台完全没必要用它，而且在前端暴露admin token会导致严重的店铺安全风险。

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