第 103 期店铺装修之模块间距调节器拖拽即可调整无需修改代码

更新于 Dec 2, 2024

Shopify 主题自带的间距并不完美？觉得不满意却不知道怎么改代码？

本期内容我将教你如何添加一个拖动就能轻松调整各个模块之间间距的功能。

此为免费版本，可在页面中添加一个调节器。如需在同一页面添加多个不同的调节器，详见 SVIP 视频也可单项购买

margin-adjuster.liquid

<style>
.section-margin {
height: 1px;
margin-top: {{section.settings.margin_top}}rem;
}
</style>
<div class="section-margin" style="display: block;"></div>

{% schema %}
{
"name": "上下间距调节器",
"settings":[
{
"type": "range",
"id": "margin_top",
"label": "左右拖动调节间距",
"info": "[使用参考](https://shopify2006.com/add-a-shopify-section-margin-adjuster/)",
"max": 30,
"min": -30,
"step": 1,
"default": 0
}
],
"presets":[
{
"name": "上下间距调节器",
"category": "Advanced"
}
]
}
{% endschema %}