如何在Shopify区块设置中实现Padding/Margin动态控制？

1. 正确实现方案：使用show属性 #

Shopify区块schema中的hidden属性不支持通过动态Liquid表达式控制显示/隐藏，正确的做法是使用show属性——它接受布尔类型的Liquid条件，当条件为true时展示设置项，为false时隐藏。

以下是修正后的完整schema配置（包含padding和margin的完整逻辑）：

{
  "type": "number",
  "id": "global_padding",
  "label": "全局内边距（上、下、左、右）",
  "min": 0,
  "max": 100,
  "step": 5,
  "default": 20
},
{
  "type": "checkbox",
  "id": "enable_individual_padding",
  "label": "启用单独内边距控制（上、下、左、右）",
  "default": false
},
{
  "type": "number",
  "id": "top_padding",
  "label": "顶部内边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_padding }}"
},
{
  "type": "number",
  "id": "bottom_padding",
  "label": "底部内边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_padding }}"
},
{
  "type": "number",
  "id": "left_padding",
  "label": "左侧内边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_padding }}"
},
{
  "type": "number",
  "id": "right_padding",
  "label": "右侧内边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_padding }}"
},
{
  "type": "number",
  "id": "global_margin",
  "label": "全局外边距（上、下、左、右）",
  "min": 0,
  "max": 100,
  "step": 5,
  "default": 20
},
{
  "type": "checkbox",
  "id": "enable_individual_margin",
  "label": "启用单独外边距控制（上、下、左、右）",
  "default": false
},
{
  "type": "number",
  "id": "top_margin",
  "label": "顶部外边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_margin }}"
},
{
  "type": "number",
  "id": "bottom_margin",
  "label": "底部外边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_margin }}"
},
{
  "type": "number",
  "id": "left_margin",
  "label": "左侧外边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_margin }}"
},
{
  "type": "number",
  "id": "right_margin",
  "label": "右侧外边距",
  "default": 20,
  "show": "{{ section.settings.enable_individual_margin }}"
}

2. 前端Liquid模板逻辑适配 #

在区块的Liquid文件中，需要根据商家的选择应用对应的样式值：

<div class="custom-block" style="
  {% if section.settings.enable_individual_padding %}
    padding: {{ section.settings.top_padding }}px {{ section.settings.right_padding }}px {{ section.settings.bottom_padding }}px {{ section.settings.left_padding }}px;
  {% else %}
    padding: {{ section.settings.global_padding }}px;
  {% endif %}
  {% if section.settings.enable_individual_margin %}
    margin: {{ section.settings.top_margin }}px {{ section.settings.right_margin }}px {{ section.settings.bottom_margin }}px {{ section.settings.left_margin }}px;
  {% else %}
    margin: {{ section.settings.global_margin }}px;
  {% endif %}
">
  <!-- 区块内容 -->
</div>

3. 条件可见性的官方参考说明 #

Shopify官方主题开发文档明确规定：区块schema的show属性接受布尔类型的Liquid表达式，用于控制设置项的条件显示。当表达式结果为true时，设置项在主题编辑器中展示；为false时自动隐藏。

内容的提问来源于stack exchange，提问作者MD.Foysal ahmed