创建 “自定义代码块”,支持在 Shopify 页面中自由插入任意 HTML / CSS / JavaScript 内容

支持:

  • 🔄 编写并渲染 HTML + Liquid(如 {{ shop.name }}
  • ✅ 支持变量、条件、循环等 Liquid 模板语法
  • 🧩 可直接在 Shopify 页面编辑器中输入自定义逻辑代码

你现在可以自由组合 HTML 和 Liquid,在任何支持的模板中动态显示内容。如果需要支持多语言或 JSON 配置输入,也可以继续扩展。

{% schema %}
{
  "name": "自定义代码块 (支持 HTML + Liquid)",
  "settings": [
    {
      "type": "textarea",
      "id": "custom_code",
      "label": "自定义代码 (支持 Liquid)",
      "default": "<p style=\"text-align:center\">Hello, {{ shop.name }}!</p>",
      "info": "可插入 HTML + Liquid 代码,例如变量 {{ shop.name }}"
    }
  ],
  "presets": [
    {
      "name": "自定义代码块 (HTML + Liquid)",
      "category": "高级组件"
    }
  ]
}
{% endschema %}

<div class="custom-code-block">
  {% capture compiled_code %}{{ section.settings.custom_code }}{% endcapture %}
  {{ compiled_code | replace: '\\n', '' | strip_newlines | raw }}
</div>

By 行政