Shopify Section页面如何仅为产品展示单张配图及对应价格、描述

你现在的代码有两处核心逻辑问题，才会出现循环展示全部产品图、内容重复的情况：

• 循环嵌套层级错误：把售价、产品描述的渲染代码直接放在了product.images的遍历循环内部，结果就是每加载一张产品图，就会重复渲染一次价格和描述
• 图片选取逻辑不对：直接无差别遍历产品下存储的所有图片资源，没有定向获取商家后台预设的代表主图

调整只要动两个核心点就行：

1. 删掉多余的全量图片遍历循环，直接调用Shopify自带的product.featured_image对象，获取商家在产品编辑页设置的默认封面图当代表配图，完全不用遍历所有图片资源
2. 把售价、产品描述的渲染逻辑从图片循环里移出来，每个产品块只渲染一次对应内容，避免重复输出

{% for block in section.blocks %}
  {% assign product = all_products[block.settings.product] %}
  <!-- 增加空值判断，避免未绑定产品时出现渲染报错 -->
  {% if product != blank %}
    <!-- 单图渲染：直接调用产品主图，附带基础alt属性优化 -->
    <img 
      src="{{ product.featured_image | product_img_url: 'master' }}"
      alt="{{ product.featured_image.alt | default: product.title | escape }}"
    >
    <!-- 独立渲染售价和描述，不再嵌套在图片循环内 -->
    <div class="product-price">{{ product.price | money_without_trailing_zeros }}</div>
    <div class="product-description">{{ product.description }}</div>
  {% endif %}
{% endfor %}

{% schema %}
{
  "name": "Demo",
  "blocks": [
    {
      "type": "new-arrival",
      "name": "New Arrival",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        }
      ]
    }
  ]
}
{% endschema %}

• 这段代码取的主图完全匹配单张代表配图的需求，不需要商家额外调整产品后台的配置，展示的就是商家自己选定的产品封面图
• 如果后续想灵活调整某个块展示的非主图（比如商家上传了5张图但某个位置想展示第二张当封面），可以在现有block的schema里新增图片选择类的设置项，自行指定单张展示图，常规场景下用featured_image就足够满足需求
• 附带的alt属性既可以避免图片加载失败时的无意义占位，也能满足基础的SEO要求

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