Shopify如何实现指定标题集合下所有商品图片的展示

你只需要在原有判断逻辑内，新增一层对当前匹配集合下商品的遍历，渲染每个商品的主图即可，修改后的完整代码如下：

{% for collection in collections %}
  {% if collection.title == "OMBRONE COLLECTION" %}
    <a href="{{collection.url}}">
      <!-- 遍历当前集合下的所有商品，渲染商品主图 -->
      <div class="cm_collection_imgs">
        {% for product in collection.products %}
          {% if product.featured_image %}
            <img 
              src="{{ product.featured_image | img_url: '300x' }}" 
              alt="{{ product.title }}"
              class="cm_collection_product_img"
              loading="lazy"
            >
          {% endif %}
        {% endfor %}
      </div>

      <div class="cm_colec_title"><span>{{collection.title}}</span></div>
    </a>
  {% endif %}
{% endfor %}

补充说明 #

• 代码里img_url: '300x'是控制加载的图片尺寸，你可以根据自己页面的布局需要改成对应尺寸，比如'500x'、'master'（原图尺寸）
• 新增的cm_collection_imgs、cm_collection_product_img两个类名可以自行编写CSS，控制图片排列、大小、间距样式
• Shopify默认单次遍历collection.products最多返回50个商品，如果你的集合商品数超过50，需要额外添加分页逻辑处理
• 代码加了loading="lazy"做图片懒加载，能优化页面加载速度
• 如果需要匹配其他指定集合，直接修改{% if collection.title == "OMBRONE COLLECTION" %}里的集合标题字符串即可

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