How To Add Shape Divider in Shopify Theme Sections

Shape Divider in Shopify Theme Sections

If you’re a Shopify merchant, and you want to add some spice to your theme sections, you can do so by adding shape dividers. In this tutorial, we’ll show you how to add a shape divider in Shopify Theme Sections. Let’s get started!

CSS Code for Shape Divider Style 1:

shape divider style 1
.websenseprodivider{
overflow:hidden;
position:relative;
}
.websenseprodivider::before{ 
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>'); 
}

@media (min-width:2100px){
.websenseprodivider::before{
background-size: 100% calc(2vw + 90px);
}
}
 

CSS Code for Shape Divider Style 2:

.websenseprodivider{
overflow:hidden;
position:relative;
}
.websenseprodivider::before{ 
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000.4 78.7"><g fill="%23ffffff"><path d="M2000 20v59H0V18c12 0 23 6 33 12 10 7 19 15 29 21 28 15 65 14 91-4 10-7 19-15 29-21a80 80 0 0168-8 80 80 0 0168 8c10 6 18 14 28 21 27 18 63 19 91 4 11-6 20-14 30-21s21-12 33-12a33 33 0 014 0c12 0 23 6 33 12 10 7 19 15 29 21 28 15 65 14 92-4 9-7 18-15 28-21a80 80 0 0168-8 80 80 0 0168 8c10 6 18 14 28 21 27 18 63 19 91 4 11-6 20-14 30-21s21-12 33-12a33 33 0 015 0c11 0 22 6 32 12 10 7 19 15 30 21 28 15 64 14 91-4 10-7 18-15 28-21a80 80 0 0168-8 80 80 0 0168 8c10 6 19 14 29 21 26 18 63 19 91 4 10-6 19-14 29-21l6-3c8-5 18-9 28-9a33 33 0 014 0c12 0 23 6 32 12l30 21 3 1a87 87 0 0035 9 90 90 0 0043-8 81 81 0 0010-6l9-6c6-5 12-11 19-15a80 80 0 0168-8 80 80 0 0169 8l20 15 8 6a82 82 0 0011 6 90 90 0 0043 8 87 87 0 0035-9l2-1 30-21a79 79 0 0120-10z" opacity=".75"/><path d="M478 79H23a33 33 0 0117-20l1-1a33 33 0 0122-1 22 22 0 0117-15 15 15 0 015-6 22 22 0 0114-2 52 52 0 0113 4l11 5c12 6 24 12 36 16 14 6 31 8 45 4l5-2a157 157 0 0041-26 151 151 0 0046 28c15 4 31 2 46-4 12-4 24-10 35-16l11-5a52 52 0 0114-4 22 22 0 0113 2 15 15 0 016 6 22 22 0 0117 15 33 33 0 0122 1l1 1a33 33 0 0117 20z" opacity=".5"/><path d="M504 79H0V65c6-10 20-16 32-12a37 37 0 019 5c8 6 15 13 24 16 12 3 25-4 35-12 7-7 15-14 23-19a43 43 0 017-3c14-5 29-1 42 5 11 5 22 12 32 18l5 2c13 7 27 11 41 8 14 3 29-1 42-8l4-2c11-6 21-13 33-18 13-6 28-10 41-5a43 43 0 017 3c9 5 16 12 24 19 10 8 22 15 35 12 9-3 16-10 24-16a37 37 0 019-5c14-5 31 5 35 19v7z"/><circle cx="59.8" cy="29.3" r="8.5"/><circle cx="159.2" cy="32.6" r="5.2"/><circle cx="375.8" cy="32.6" r="5.2"/><circle cx="435.9" cy="36.6" r="7.3"/><circle cx="106.4" cy="5.8" r="5.8" opacity=".5"/><circle cx="321.2" cy="5.8" r="5.8" opacity=".5"/><circle cx="250.3" cy="5.8" r="2.8" opacity=".75"/><path d="M982 79H527a33 33 0 0117-20l1-1a33 33 0 0122-1 22 22 0 0117-15 15 15 0 016-6 22 22 0 0113-2 52 52 0 0113 4l12 5c11 6 23 12 35 16 15 6 31 8 46 4l4-2a157 157 0 0041-26 151 151 0 0046 28c15 4 31 2 46-4 12-4 24-10 36-16l11-5a52 52 0 0113-4 22 22 0 0114 2 15 15 0 015 6 22 22 0 0117 15 33 33 0 0122 1l1 1a33 33 0 0117 20z" opacity=".5"/><path d="M1009 79H504V65c7-10 20-16 32-12a37 37 0 019 5c8 6 15 13 24 16 12 3 25-4 35-12 8-7 15-14 24-19a43 43 0 017-3c13-5 28-1 41 5 12 5 22 12 33 18l4 2c13 7 28 11 42 8 13 3 28-1 41-8l5-2c10-6 21-13 32-18 13-6 28-10 42-5a43 43 0 017 3c8 5 16 12 23 19 10 8 23 15 35 12 9-3 16-10 24-16a37 37 0 019-5c14-4 31 5 35 19l1 7z"/><circle cx="564" cy="29.3" r="8.5"/><circle cx="663.5" cy="32.6" r="5.2"/><circle cx="880.1" cy="32.6" r="5.2"/><circle cx="940.2" cy="36.6" r="7.3"/><circle cx="610.6" cy="5.8" r="5.8" opacity=".5"/><circle cx="825.5" cy="5.8" r="5.8" opacity=".5"/><circle cx="754.6" cy="5.8" r="2.8" opacity=".75"/><path d="M1486 79h-454a33 33 0 0116-20l2-1a33 33 0 0122-1 22 22 0 0116-15 15 15 0 016-6 22 22 0 0113-2 52 52 0 0114 4l11 5c12 6 23 12 35 16 15 6 31 8 46 4l5-2a157 157 0 0041-27 151 151 0 0046 29c15 4 31 2 45-4 13-4 24-10 36-16l11-5a52 52 0 0113-4 22 22 0 0114 2 15 15 0 016 6 22 22 0 0116 15 33 33 0 0122 1l1 1a33 33 0 0117 20z" opacity=".5"/><path d="M1513 79h-504V65c6-10 20-16 31-12a37 37 0 0110 5c7 6 14 13 24 16 12 3 24-4 34-12 8-7 15-14 24-19a43 43 0 017-3c14-5 29-1 42 5 11 5 21 12 32 18l5 2c13 7 27 11 41 8 14 3 28-1 41-8l5-2c11-6 21-13 32-18 13-6 28-10 42-5a43 43 0 017 3c9 5 16 12 24 19 10 8 22 15 34 12 10-3 16-10 24-16a37 37 0 0110-5c14-4 31 5 34 19l1 7z"/><circle cx="1068.3" cy="29.3" r="8.5"/><circle cx="1167.8" cy="32.6" r="5.2"/><circle cx="1384.4" cy="32.6" r="5.2"/><circle cx="1444.5" cy="36.6" r="7.3"/><circle cx="1114.9" cy="5.8" r="5.8" opacity=".5"/><circle cx="1329.8" cy="5.8" r="5.8" opacity=".5"/><circle cx="1258.9" cy="5.8" r="2.8" opacity=".75"/><path d="M1990 79h-454a33 33 0 0117-20l1-1a33 33 0 0122-1 22 22 0 0117-15 15 15 0 015-6 22 22 0 0114-2 52 52 0 0113 4l11 5c12 6 23 12 36 16 14 6 31 8 45 4l5-2a157 157 0 0041-27 151 151 0 0046 29c15 4 31 2 46-4 12-4 23-10 35-16l11-5a52 52 0 0114-4 22 22 0 0113 2 15 15 0 016 6 22 22 0 0117 15 33 33 0 0122 1l1 1a33 33 0 0116 20z" opacity=".5"/><path d="M2000 54v25h-487V65c6-10 20-16 31-12a37 37 0 0110 5c8 6 15 13 24 16 12 3 25-4 34-12l1-1 23-18a43 43 0 017-3c10-3 21-2 32 1a84 84 0 0110 4c11 5 21 12 32 18l5 2c13 7 27 11 41 8 14 3 29-1 41-8l5-2c11-6 21-13 33-18a83 83 0 019-4c10-3 22-5 32-1a43 43 0 017 3c9 5 16 12 23 18l1 1c10 8 22 15 35 12 9-3 16-10 24-16a37 37 0 019-5 26 26 0 0118 1z"/><circle cx="1572.6" cy="29.3" r="8.5"/><circle cx="1672.1" cy="32.6" r="5.2"/><circle cx="1888.7" cy="32.6" r="5.2"/><circle cx="1948.8" cy="36.6" r="7.3"/><circle cx="1619.2" cy="5.8" r="5.8" opacity=".5"/><circle cx="1834.1" cy="5.8" r="5.8" opacity=".5"/><circle cx="1763.2" cy="5.8" r="2.8" opacity=".75"/></g></svg>'); 
}

@media (min-width:2100px){
.websenseprodivider::before{
background-size: 100% calc(2vw + 90px);
}
}
 

CSS Code for Shape Divider Style 3:

.websenseprodivider{
overflow:hidden;
position:relative;
}
.websenseprodivider::before{ 
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000.4 78.7"><g fill="%23ffffff"><path d="M2000 20v59H0V18c12 0 23 6 33 12 10 7 19 15 29 21 28 15 65 14 91-4 10-7 19-15 29-21a80 80 0 0168-8 80 80 0 0168 8c10 6 18 14 28 21 27 18 63 19 91 4 11-6 20-14 30-21s21-12 33-12a33 33 0 014 0c12 0 23 6 33 12 10 7 19 15 29 21 28 15 65 14 92-4 9-7 18-15 28-21a80 80 0 0168-8 80 80 0 0168 8c10 6 18 14 28 21 27 18 63 19 91 4 11-6 20-14 30-21s21-12 33-12a33 33 0 015 0c11 0 22 6 32 12 10 7 19 15 30 21 28 15 64 14 91-4 10-7 18-15 28-21a80 80 0 0168-8 80 80 0 0168 8c10 6 19 14 29 21 26 18 63 19 91 4 10-6 19-14 29-21l6-3c8-5 18-9 28-9a33 33 0 014 0c12 0 23 6 32 12l30 21 3 1a87 87 0 0035 9 90 90 0 0043-8 81 81 0 0010-6l9-6c6-5 12-11 19-15a80 80 0 0168-8 80 80 0 0169 8l20 15 8 6a82 82 0 0011 6 90 90 0 0043 8 87 87 0 0035-9l2-1 30-21a79 79 0 0120-10z" opacity=".75"/><path d="M478 79H23a33 33 0 0117-20l1-1a33 33 0 0122-1 22 22 0 0117-15 15 15 0 015-6 22 22 0 0114-2 52 52 0 0113 4l11 5c12 6 24 12 36 16 14 6 31 8 45 4l5-2a157 157 0 0041-26 151 151 0 0046 28c15 4 31 2 46-4 12-4 24-10 35-16l11-5a52 52 0 0114-4 22 22 0 0113 2 15 15 0 016 6 22 22 0 0117 15 33 33 0 0122 1l1 1a33 33 0 0117 20z" opacity=".5"/><path d="M504 79H0V65c6-10 20-16 32-12a37 37 0 019 5c8 6 15 13 24 16 12 3 25-4 35-12 7-7 15-14 23-19a43 43 0 017-3c14-5 29-1 42 5 11 5 22 12 32 18l5 2c13 7 27 11 41 8 14 3 29-1 42-8l4-2c11-6 21-13 33-18 13-6 28-10 41-5a43 43 0 017 3c9 5 16 12 24 19 10 8 22 15 35 12 9-3 16-10 24-16a37 37 0 019-5c14-5 31 5 35 19v7z"/><circle cx="59.8" cy="29.3" r="8.5"/><circle cx="159.2" cy="32.6" r="5.2"/><circle cx="375.8" cy="32.6" r="5.2"/><circle cx="435.9" cy="36.6" r="7.3"/><circle cx="106.4" cy="5.8" r="5.8" opacity=".5"/><circle cx="321.2" cy="5.8" r="5.8" opacity=".5"/><circle cx="250.3" cy="5.8" r="2.8" opacity=".75"/><path d="M982 79H527a33 33 0 0117-20l1-1a33 33 0 0122-1 22 22 0 0117-15 15 15 0 016-6 22 22 0 0113-2 52 52 0 0113 4l12 5c11 6 23 12 35 16 15 6 31 8 46 4l4-2a157 157 0 0041-26 151 151 0 0046 28c15 4 31 2 46-4 12-4 24-10 36-16l11-5a52 52 0 0113-4 22 22 0 0114 2 15 15 0 015 6 22 22 0 0117 15 33 33 0 0122 1l1 1a33 33 0 0117 20z" opacity=".5"/><path d="M1009 79H504V65c7-10 20-16 32-12a37 37 0 019 5c8 6 15 13 24 16 12 3 25-4 35-12 8-7 15-14 24-19a43 43 0 017-3c13-5 28-1 41 5 12 5 22 12 33 18l4 2c13 7 28 11 42 8 13 3 28-1 41-8l5-2c10-6 21-13 32-18 13-6 28-10 42-5a43 43 0 017 3c8 5 16 12 23 19 10 8 23 15 35 12 9-3 16-10 24-16a37 37 0 019-5c14-4 31 5 35 19l1 7z"/><circle cx="564" cy="29.3" r="8.5"/><circle cx="663.5" cy="32.6" r="5.2"/><circle cx="880.1" cy="32.6" r="5.2"/><circle cx="940.2" cy="36.6" r="7.3"/><circle cx="610.6" cy="5.8" r="5.8" opacity=".5"/><circle cx="825.5" cy="5.8" r="5.8" opacity=".5"/><circle cx="754.6" cy="5.8" r="2.8" opacity=".75"/><path d="M1486 79h-454a33 33 0 0116-20l2-1a33 33 0 0122-1 22 22 0 0116-15 15 15 0 016-6 22 22 0 0113-2 52 52 0 0114 4l11 5c12 6 23 12 35 16 15 6 31 8 46 4l5-2a157 157 0 0041-27 151 151 0 0046 29c15 4 31 2 45-4 13-4 24-10 36-16l11-5a52 52 0 0113-4 22 22 0 0114 2 15 15 0 016 6 22 22 0 0116 15 33 33 0 0122 1l1 1a33 33 0 0117 20z" opacity=".5"/><path d="M1513 79h-504V65c6-10 20-16 31-12a37 37 0 0110 5c7 6 14 13 24 16 12 3 24-4 34-12 8-7 15-14 24-19a43 43 0 017-3c14-5 29-1 42 5 11 5 21 12 32 18l5 2c13 7 27 11 41 8 14 3 28-1 41-8l5-2c11-6 21-13 32-18 13-6 28-10 42-5a43 43 0 017 3c9 5 16 12 24 19 10 8 22 15 34 12 10-3 16-10 24-16a37 37 0 0110-5c14-4 31 5 34 19l1 7z"/><circle cx="1068.3" cy="29.3" r="8.5"/><circle cx="1167.8" cy="32.6" r="5.2"/><circle cx="1384.4" cy="32.6" r="5.2"/><circle cx="1444.5" cy="36.6" r="7.3"/><circle cx="1114.9" cy="5.8" r="5.8" opacity=".5"/><circle cx="1329.8" cy="5.8" r="5.8" opacity=".5"/><circle cx="1258.9" cy="5.8" r="2.8" opacity=".75"/><path d="M1990 79h-454a33 33 0 0117-20l1-1a33 33 0 0122-1 22 22 0 0117-15 15 15 0 015-6 22 22 0 0114-2 52 52 0 0113 4l11 5c12 6 23 12 36 16 14 6 31 8 45 4l5-2a157 157 0 0041-27 151 151 0 0046 29c15 4 31 2 46-4 12-4 23-10 35-16l11-5a52 52 0 0114-4 22 22 0 0113 2 15 15 0 016 6 22 22 0 0117 15 33 33 0 0122 1l1 1a33 33 0 0116 20z" opacity=".5"/><path d="M2000 54v25h-487V65c6-10 20-16 31-12a37 37 0 0110 5c8 6 15 13 24 16 12 3 25-4 34-12l1-1 23-18a43 43 0 017-3c10-3 21-2 32 1a84 84 0 0110 4c11 5 21 12 32 18l5 2c13 7 27 11 41 8 14 3 29-1 41-8l5-2c11-6 21-13 33-18a83 83 0 019-4c10-3 22-5 32-1a43 43 0 017 3c9 5 16 12 23 18l1 1c10 8 22 15 35 12 9-3 16-10 24-16a37 37 0 019-5 26 26 0 0118 1z"/><circle cx="1572.6" cy="29.3" r="8.5"/><circle cx="1672.1" cy="32.6" r="5.2"/><circle cx="1888.7" cy="32.6" r="5.2"/><circle cx="1948.8" cy="36.6" r="7.3"/><circle cx="1619.2" cy="5.8" r="5.8" opacity=".5"/><circle cx="1834.1" cy="5.8" r="5.8" opacity=".5"/><circle cx="1763.2" cy="5.8" r="2.8" opacity=".75"/></g></svg>'); 
}

@media (min-width:2100px){
.websenseprodivider::before{
background-size: 100% calc(2vw + 90px);
}
}
 

Update Coded for Theme Section – For Horizon and Dawn Theme

Create a new section file called advanced-shape-divider.liquid and add the following code:

{% schema %}
{
  "name": "Advanced Shape Divider",
  "settings": [
    {
      "type": "select",
      "id": "divider_shape",
      "label": "Divider Shape",
      "options": [
        { "value": "waves", "label": "Waves" },
        { "value": "clouds", "label": "Clouds" },
        { "value": "zigzag", "label": "Zigzag" },
        { "value": "mountains", "label": "Mountains" },
        { "value": "arc", "label": "Arc" },
        { "value": "triangle_top", "label": "Triangle Top" },
        { "value": "triangle_bottom", "label": "Triangle Bottom" }
      ],
      "default": "waves"
    },
    {
      "type": "color",
      "id": "divider_fill_color",
      "label": "Divider Shape Color",
      "default": "#f8f8f8"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "transparent"
    },
    {
      "type": "checkbox",
      "id": "reverse_shape",
      "label": "Reverse Shape (Flip Vertically)",
      "default": false
    },
    {
      "type": "range",
      "id": "divider_height",
      "min": 30,
      "max": 400,
      "step": 5,
      "unit": "px",
      "label": "Divider Height",
      "default": 160
    },
    {
      "type": "range",
      "id": "divider_width_multiplier",
      "min": 1,
      "max": 3,
      "step": 0.1,
      "unit": "x",
      "label": "Divider Width Multiplier",
      "default": 1.2
    }
  ],
  "presets": [
    {
      "name": "Advanced Shape Divider"
    }
  ]
}
{% endschema %}
<div class="custom-shape-divider-{{ section.id }}">
  {% case section.settings.divider_shape %}
    {% when 'waves' %}
      <!-- Premium smooth waves -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,58.7C672,64,768,96,864,117.3C960,139,1056,149,1152,144C1248,139,1344,117,1392,106.7L1440,96V0H0Z" class="shape-fill"></path>
      </svg>
    {% when 'clouds' %}
      <!-- Fluffy clouds -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,60 C150,120 350,0 600,80 C850,160 1050,40 1200,100 L1200,0 L0,0Z" class="shape-fill"></path>
      </svg>
    {% when 'zigzag' %}
      <!-- Sharp zigzag -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,0 60,120 120,0 180,120 240,0 300,120 360,0 420,120 480,0 540,120 600,0 660,120 720,0 780,120 840,0 900,120 960,0 1020,120 1080,0 1140,120 1200,0 1200,120 0,120Z" class="shape-fill"></path>
      </svg>
    {% when 'mountains' %}
      <!-- Mountain peaks -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,120L200,20L400,100L600,10L800,100L1000,40L1200,120V0H0Z" class="shape-fill"></path>
      </svg>
    {% when 'arc' %}
      <!-- Smooth arc -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,0 C300,150 900,-30 1200,80 L1200,0 L0,0Z" class="shape-fill"></path>
      </svg>
    {% when 'triangle_top' %}
      <!-- Top triangle -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,120L600,0L1200,120H0Z" class="shape-fill"></path>
      </svg>
    {% when 'triangle_bottom' %}
      <!-- Bottom triangle -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,0L600,120L1200,0V120H0Z" class="shape-fill"></path>
      </svg>
    {% else %}
      <!-- Default = waves -->
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,58.7C672,64,768,96,864,117.3C960,139,1056,149,1152,144C1248,139,1344,117,1392,106.7L1440,96V0H0Z" class="shape-fill"></path>
      </svg>
  {% endcase %}
</div>
<style>
  .custom-shape-divider-{{ section.id }} {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    background-color: {{ section.settings.background_color }};
  }
  .custom-shape-divider-{{ section.id }} svg {
    display: block;
    width: calc({{ section.settings.divider_width_multiplier }} * 100%);
    height: {{ section.settings.divider_height }}px;
    transform: {% if section.settings.reverse_shape %}scaleY(-1){% else %}none{% endif %};
  }
  .custom-shape-divider-{{ section.id }} .shape-fill {
    fill: {{ section.settings.divider_fill_color }};
  }
</style>
4.9/5 - (13 votes)

About

2 thoughts on “How To Add Shape Divider in Shopify Theme Sections”

Leave a Comment

Your email address will not be published. Required fields are marked *