Shopify自定义产品滑块：如何通过区块设置获取产品完整信息？

嘿，这问题我太熟了！你遇到的核心问题是：{{ section.settings.product-1 }}返回的只是产品的handle字符串，不是完整的Shopify产品对象，所以直接用{{ product.title }}这类标签系统根本不知道你指的是哪个产品～

你只需要把拿到的handle转换成真正的产品对象，用Shopify的all_products全局对象结合Liquid的赋值标签就能搞定，下面给你两种实用写法：

1. 单个产品的基础处理 #

针对你选的第一个产品，先通过handle赋值得到产品对象：

{% assign product_1 = all_products[section.settings.product-1] %}

之后你就能用product_1调用所有产品属性了，比如：

{% if product_1 %}
  <div class="product-card">
    <!-- 产品图片 -->
    <img src="{{ product_1.featured_image | img_url: '300x300' }}" alt="{{ product_1.title }}">
    <!-- 产品名称 -->
    <h3>{{ product_1.title }}</h3>
    <!-- 产品价格 -->
    <p class="price">{{ product_1.price | money }}</p>
    <!-- 产品ID -->
    <span class="product-id">ID: {{ product_1.id }}</span>
    <!-- 产品详情链接 -->
    <a href="{{ product_1.url }}" class="btn">查看详情</a>
  </div>
{% endif %}

加{% if product_1 %}是为了防止用户没选产品或者handle无效时出现报错。

2. 批量处理5个产品（更高效的写法） #

因为你要处理5个产品，重复写5次上面的代码太麻烦，用循环来简化：

<div class="wrapper">
  <div class="section-header text-center">
    <!-- 你的区块标题内容 -->
  </div>
  <div class="product-slider-container">
    {% for i in (1..5) %}
      {% assign product_handle = section.settings['product-' | append: i] %}
      {% assign current_product = all_products[product_handle] %}
      {% if current_product %}
        <div class="slider-slide">
          <img src="{{ current_product.featured_image | img_url: '400x400' }}" alt="{{ current_product.title }}">
          <h4>{{ current_product.title }}</h4>
          <div class="product-price">{{ current_product.price | money }}</div>
          <span>产品ID：{{ current_product.id }}</span>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

这个循环会自动从product-1到product-5读取你在后台设置的产品handle，转换成产品对象后输出内容，非常灵活。

除了你需要的ID、名称、价格、图片，这些属性也很实用：

• current_product.url：产品详情页链接
• current_product.variants.first.price：多规格产品取第一个规格的价格
• current_product.description | truncate: 100：截断显示产品描述（保留100字符）
• current_product.tags：产品标签列表

注意：all_products对象最多支持调用20个产品，你的5个完全在限制内，不用担心问题。

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