如何在Shopify页面仅显示自定义器选中的Featured Collection？

你已经通过以下代码实现了集合名称与描述的获取展示：

<h2>{{ section.settings.title }}</h2>
{%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
  <div>
    {%- if section.settings.show_description -%}
      {{ section.settings.collection.description }}
    {%- else -%}
      {{ section.settings.description -}}
    {%- endif %}
  </div>
{%- endif -%}

但当前用于展示集合产品的代码会遍历所有已创建的集合，需要修改为仅展示自定义器中选中的「Featured Collection」，修改方法如下：

修改后的代码 #

{% assign featured_collection = section.settings.collection %}
{% if featured_collection %}
  <h2>{{ featured_collection.title }}</h2>
  {% unless featured_collection.description == blank %}
    <p>{{ featured_collection.description }}</p>
  {% endunless %}

  {% for product in featured_collection.products %}
    {% if product.image %}
      <img src="{{ product | img_url }}">
    {% endif %}
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  {% else %}
    <p>There is no product in {{ featured_collection.title }}</p>
  {% endfor %}
{% else %}
  <p>Please select a collection in the theme customizer.</p>
{% endif %}

关键修改点 #

• 移除遍历所有集合的{% for collection in collections %}循环，直接通过section.settings.collection调用自定义器选中的集合
• 用{% assign %}将选中集合赋值给featured_collection变量，提升代码可读性
• 增加未选择集合时的提示逻辑，优化用户体验

这样修改后，页面就只会展示你在主题自定义器中选择的「Featured Collection」内容了。

内容的提问来源于stack exchange，提问作者Hyun Hae Park