Custom Divider Code

  1. Go into your Code Editor

  2. Go to “Sections”

  3. Click on “Add New Section”

  4. Name it “custom-section.liquid”

  5. Delete what’s currently there and paste the code below.


{% schema %}
{
  "name": "Custom Divider",
  "settings": [
    {
      "type": "color",
      "id": "divider_color",
      "label": "Divider Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "divider_thickness",
      "label": "Divider Thickness (px)",
      "min": 1,
      "max": 20,
      "step": 1,
      "default": 2
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top (px)",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_right",
      "label": "Padding Right (px)",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom (px)",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_left",
      "label": "Padding Left (px)",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Custom Divider",
      "category": "Layout"
    }
  ]
}
{% endschema %}

<div style="
  border-bottom: {{ section.settings.divider_thickness }}px solid {{ section.settings.divider_color }};
  padding-top: {{ section.settings.padding_top }}px;
  padding-right: {{ section.settings.padding_right }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
  padding-left: {{ section.settings.padding_left }}px;
">
</div>