Shopify主题开发：如何在产品模板中引入自定义CTA区块？

核心问题分析 #

你遇到的两个错误本质是混淆了Shopify的Section和Snippet的使用规则：

• 用{% render %}/{% include %}调用Sections文件夹里的文件，会触发「找不到snippets/cta.liquid」错误，因为这两个指令仅用于调用Snippets文件夹的文件
• 把带{% schema %}标签的Section文件移到Snippets文件夹，会触发schema错误，因为Snippets不支持主题编辑器配置的schema标签

分场景解决方案 #

场景1：做可在主题编辑器配置的产品CTA区块（用Section） #

1. 文件位置与内容
   保持cta.liquid在Sections文件夹，文件内容需包含HTML结构和可选的schema配置（用于主题编辑器可视化设置），示例：

   <div class="product-custom-cta">
     {% comment %} 优先读取产品专属元字段，无内容则用Section默认配置 {% endcomment %}
     {% assign cta_text = product.metafields.custom.cta_text | default: section.settings.default_text %}
     {% assign cta_link = product.metafields.custom.cta_link | default: section.settings.default_link %}
     
     <a href="{{ cta_link }}" class="button cta-button">{{ cta_text }}</a>
   </div>
   
   {% schema %}
   {
     "name": "产品专属CTA",
     "settings": [
       {
         "type": "text",
         "id": "default_text",
         "label": "默认CTA文本",
         "default": "立即购买"
       },
       {
         "type": "url",
         "id": "default_link",
         "label": "默认CTA链接",
         "default": "/"
       }
     ]
   }
   {% endschema %}
   

2. 正确调用方式
   在Sections文件夹的product-template.liquid中，使用Section专属指令调用：

   {% section 'cta' %}
   

场景2：做纯代码复用的产品CTA片段（用Snippet） #

1. 文件位置与内容
   将cta.liquid移到Snippets文件夹，删除所有{% schema %}相关代码，示例：

   <div class="product-custom-cta">
     {% if product.metafields.custom.cta_text %}
       <a href="{{ product.metafields.custom.cta_link }}" class="button cta-button">
         {{ product.metafields.custom.cta_text }}
       </a>
     {% else %}
       <a href="/collections/all" class="button cta-button">浏览更多产品</a>
     {% endif %}
   </div>
   

2. 正确调用方式
   在product-template.liquid中用Snippet指令调用（Shopify 2.0+推荐用render，旧版本用include）：

   {% render 'cta' %}
   

产品专属CTA的个性化设置 #

如果需要每个产品显示不同的CTA，需在Shopify后台配置产品元字段：

1. 进入「设置」→「元字段」→「产品」
2. 添加两个元字段：
   • 字段1：名称cta_text，类型「单行文本」，用于存储CTA按钮文字
   • 字段2：名称cta_link，类型「URL」，用于存储CTA跳转链接
3. 在产品编辑页的「元字段」区域，为每个产品填写专属的CTA内容

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