Shopify： 可以自由调节间距的调节器（不懂代码也能添加！！！适用于任何店铺模板）

演示：

视频教程 www.bilibili.com/video/BV1zR…

步骤：

1、在scetion(分区)文件夹下新建一个liquid文件，命名为custom-margin-adjust.liquid

2、将以下内容复制到文件里面即可

{% style %}
  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.margin_top_pc }}px;
    width: 100%;
  }
  @media screen and (max-width: 768px) {
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.margin_top_mobile }}px;
    }
  
  }
{% endstyle %}

<div class="section-{{ section.id }}-margin" style="display:block;"></div>

{% schema %}
  {
    "name": "自定义间距",
    "settings": [
      {
        "type": "range",
        "id": "margin_top_pc",
        "min": -100,
        "max": 100,
        "step": 2,
        "default": 0,
        "unit": "px",
        "label": "左右拖动调节间距(pc端)"
      },
      {
        "type": "range",
        "id": "margin_top_mobile",
        "min": -100,
        "max": 100,
        "step": 2,
        "default": 0,
        "unit": "px",
        "label": "左右拖动调节间距(移动端)"
      }
    ],
    "presets": [
      {
        "name": "自定义间距"
      }
    ]
  }
{% endschema %}

3、来到自定义后台添加分区，搜索“自定义间距”即可找到该组件

甚至可以为负值，缩小组件之间的距离