Shopify产品页添加可选关联产品的自定义区块开发问题

问题说明 #

• 做Shopify主题自定义开发时，最初计划新建自定义Section、添加不同类型Block，一开始找错了方向，搜索原生block.type的完整清单，后续确认实际要查询的是专用输入设置（specialized input settings）的可用类型
• 目标效果：给产品实体添加元字段（meta field），支持管理员在产品后台选择一组关联产品，将该元字段和自定义Section里的products类型Block绑定，最终在产品页展示配置好的关联产品

实现步骤 #

1. 新建产品元字段 #

进入Shopify后台，走「设置-自定义数据-产品」路径，新建元字段：

• 名称填「关联产品」
• 命名空间和键设为custom.related_products
• 类型选「产品」，勾选支持多选产品
• 保存配置后，打开任意产品的编辑页，拉到元字段区域即可选择要关联的产品

2. 编写自定义Section代码 #

到主题代码的sections目录下，新建related-products.liquid文件，代码做了双配置兼容：既支持单产品单独配置关联产品，也支持Section全局配置默认关联产品：

<section class="related-products-wrap">
  <h2 class="related-title">{{ section.settings.heading | default: "猜你喜欢" }}</h2>
  <div class="related-grid">
    {% comment %} 优先读取当前产品配置的关联产品元字段 {% endcomment %}
    {% assign related_list = product.metafields.custom.related_products.value %}
    {% comment %} 元字段未配置时，读取Section里手动选择的默认产品 {% endcomment %}
    {% if related_list == blank %}
      {% assign related_list = section.blocks | where: "type", "products" | map: "settings.product_picker" | first %}
    {% endif %}

    {% for item in related_list %}
      <div class="related-card">
        <a href="{{ item.url }}" class="related-card-link">
          <img src="{{ item.featured_image | image_url: width: 320 }}" alt="{{ item.featured_image.alt | default: item.title }}" loading="lazy">
          <p class="related-card-title">{{ item.title }}</p>
          <p class="related-card-price">{{ item.price | money }}</p>
        </a>
      </div>
    {% endfor %}

    {% comment %} 管理员预览时的空状态提示，前台访客不可见 {% endcomment %}
    {% if related_list == blank and section.draft_mode %}
      <p class="empty-tip">请在产品编辑页配置关联产品元字段，或在当前区块选择要展示的关联产品</p>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "关联产品模块",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "模块标题",
      "default": "猜你喜欢"
    }
  ],
  "blocks": [
    {
      "type": "products",
      "name": "关联产品选择",
      "settings": [
        {
          "type": "product",
          "id": "product_picker",
          "label": "选择默认关联产品",
          "multiple": true
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "关联产品模块",
      "blocks": [{"type": "products"}]
    }
  ]
}
{% endschema %}

<style>
.related-products-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.related-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 30px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.related-card img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.related-card-title {
  margin: 12px 0 6px;
  font-size: 15px;
  color: #111;
}
.related-card-price {
  color: #333;
  font-weight: 500;
  margin: 0;
}
.empty-tip {
  grid-column: 1/-1;
  padding: 40px;
  text-align: center;
  background: #f5f5f5;
  border-radius: 8px;
  color: #666;
}
</style>

3. 挂载并配置模块 #

1. 进入主题编辑器，打开产品详情页模板
2. 在需要展示关联产品的位置，添加「关联产品模块」
3. 配置规则：如果要给不同产品展示不同的关联产品，去对应产品的编辑页填写元字段即可；如果全店用统一的关联产品，直接在模块的区块里选产品就行，元字段的优先级更高，会覆盖模块里选的默认产品

补充说明 #

• 刚创建的元字段可能存在1-2分钟缓存，主题编辑器里读不到数据时刷新等待即可
• 需要控制关联产品展示数量的话，在循环前加一行{% assign related_list = related_list | slice: 0, 4 %}，数字4即为最多展示4个产品，可按需调整
• 上述样式为通用基础样式，可直接根据自身主题的设计规范修改CSS，不影响功能逻辑

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