Custom Liquid Extended
Theme > Edit Code > Sections > Create section (name.liquid) > Add the code below:
—————————————————————————————————————————
{% schema %}
{
"name": "Custom Liquid Extended",
"tag": "section",
"class": "custom-liquid-extended",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid Code"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top (px)",
"min": 0,
"max": 100,
"step": 4,
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom (px)",
"min": 0,
"max": 100,
"step": 4,
"default": 40
},
{
"type": "range",
"id": "margin_top",
"label": "Margin Top (px)",
"min": 0,
"max": 100,
"step": 4,
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"label": "Margin Bottom (px)",
"min": 0,
"max": 100,
"step": 4,
"default": 0
}
],
"presets": [
{
"name": "Custom Liquid Extended",
"category": "Custom"
}
]
}
{% endschema %}
{% style %}
.custom-liquid-extended {
background-color: {{ section.settings.background_color }};
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
margin-top: {{ section.settings.margin_top }}px;
margin-bottom: {{ section.settings.margin_bottom }}px;
}
{% endstyle %}
<div class="custom-liquid-extended">
{{ section.settings.custom_liquid }}
</div>