Do you see those shapes at the top and bottom of that section? Pretty cool, right? If you want that same functionality in your Shopify store follow the instructions below.
This is completely free to use, no apps needed, no monthly fees. It adds a "Shape Divider" section to your theme that creates cool visual transitions between sections. Waves, zigzags, bumps and more. Customize the colors, height, and even animate it, all from the theme editor. No coding knowledge required after you've added it once.
How to install it:
⚠️ If you ever update your theme, you'll need to re-add this file. That's why we named it custom- so you can easily spot all your custom files before updating. Enjoy! 🎉
↓ Copy the code below ↓
{% comment %}
Shape Divider Section
Free to use - drop this file into your theme's /sections folder
Then add it between any two sections in the theme editor
{% endcomment %}
{%- assign shape = section.settings.shape -%}
{%- assign color = section.settings.divider_color -%}
{%- assign flip_h = section.settings.flip_horizontal -%}
{%- assign flip_v = section.settings.flip_vertical -%}
{%- assign height = section.settings.height -%}
{%- assign animate = section.settings.animate -%}
{%- assign speed = section.settings.animation_speed -%}
<div
class="shape-divider shape-divider--{{ section.id }}"
style="
height: {{ height }}px;
background-color: {{ section.settings.bg_color }};
"
>
<div
class="shape-divider__shape{% if animate %} shape-divider__shape--animated{% endif %}"
style="
color: {{ color }};
{% unless animate %}transform: {% if flip_h %}scaleX(-1){% else %}scaleX(1){% endif %} {% if flip_v %}scaleY(-1){% else %}scaleY(1){% endif %};{% endunless %}
animation-duration: {{ speed }}s;
"
>
{%- capture svg_shape -%}
{%- case shape -%}
{%- when 'waves1' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height | divided_by: 2 }} C360,{{ height }},1080,0,1440,{{ height | divided_by: 2 }} L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- when 'waves2' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} C240,{{ height | divided_by: 4 }},480,{{ height }},720,{{ height | divided_by: 2 }} C960,0,1200,{{ height }},1440,{{ height | divided_by: 4 }} L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- when 'zigzag' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} L60,0 L120,{{ height }} L180,0 L240,{{ height }} L300,0 L360,{{ height }} L420,0 L480,{{ height }} L540,0 L600,{{ height }} L660,0 L720,{{ height }} L780,0 L840,{{ height }} L900,0 L960,{{ height }} L1020,0 L1080,{{ height }} L1140,0 L1200,{{ height }} L1260,0 L1320,{{ height }} L1380,0 L1440,{{ height }} Z"/>
</svg>
{%- when 'bumps' -%}
{%- assign bump_peak = height | times: 0.3 | round -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} C0,{{ height }} 30,{{ height | minus: bump_peak }} 60,{{ height | minus: bump_peak }} C90,{{ height | minus: bump_peak }} 90,{{ height }} 120,{{ height }} C120,{{ height }} 150,{{ height | minus: bump_peak }} 180,{{ height | minus: bump_peak }} C210,{{ height | minus: bump_peak }} 210,{{ height }} 240,{{ height }} C240,{{ height }} 270,{{ height | minus: bump_peak }} 300,{{ height | minus: bump_peak }} C330,{{ height | minus: bump_peak }} 330,{{ height }} 360,{{ height }} C360,{{ height }} 390,{{ height | minus: bump_peak }} 420,{{ height | minus: bump_peak }} C450,{{ height | minus: bump_peak }} 450,{{ height }} 480,{{ height }} C480,{{ height }} 510,{{ height | minus: bump_peak }} 540,{{ height | minus: bump_peak }} C570,{{ height | minus: bump_peak }} 570,{{ height }} 600,{{ height }} C600,{{ height }} 630,{{ height | minus: bump_peak }} 660,{{ height | minus: bump_peak }} C690,{{ height | minus: bump_peak }} 690,{{ height }} 720,{{ height }} C720,{{ height }} 750,{{ height | minus: bump_peak }} 780,{{ height | minus: bump_peak }} C810,{{ height | minus: bump_peak }} 810,{{ height }} 840,{{ height }} C840,{{ height }} 870,{{ height | minus: bump_peak }} 900,{{ height | minus: bump_peak }} C930,{{ height | minus: bump_peak }} 930,{{ height }} 960,{{ height }} C960,{{ height }} 990,{{ height | minus: bump_peak }} 1020,{{ height | minus: bump_peak }} C1050,{{ height | minus: bump_peak }} 1050,{{ height }} 1080,{{ height }} C1080,{{ height }} 1110,{{ height | minus: bump_peak }} 1140,{{ height | minus: bump_peak }} C1170,{{ height | minus: bump_peak }} 1170,{{ height }} 1200,{{ height }} C1200,{{ height }} 1230,{{ height | minus: bump_peak }} 1260,{{ height | minus: bump_peak }} C1290,{{ height | minus: bump_peak }} 1290,{{ height }} 1320,{{ height }} C1320,{{ height }} 1350,{{ height | minus: bump_peak }} 1380,{{ height | minus: bump_peak }} C1410,{{ height | minus: bump_peak }} 1440,{{ height }} 1440,{{ height }} Z"/>
</svg>
{%- when 'slant' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} L1440,0 L1440,{{ height }} Z"/>
</svg>
{%- when 'slant_double' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} L720,0 L1440,{{ height }} Z"/>
</svg>
{%- when 'curve' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} Q720,0,1440,{{ height }} L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- when 'curve_asymmetric' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} Q300,0,1440,{{ height | divided_by: 2 }} L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- when 'scallop' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} C90,{{ height | divided_by: 2 }},90,{{ height }},180,{{ height | divided_by: 2 }} C270,0,270,{{ height | divided_by: 2 }},360,{{ height | divided_by: 2 }} C450,{{ height | divided_by: 2 }},450,0,540,{{ height | divided_by: 2 }} C630,{{ height }},630,{{ height | divided_by: 2 }},720,{{ height | divided_by: 2 }} C810,{{ height | divided_by: 2 }},810,0,900,{{ height | divided_by: 2 }} C990,{{ height }},990,{{ height | divided_by: 2 }},1080,{{ height | divided_by: 2 }} C1170,{{ height | divided_by: 2 }},1170,0,1260,{{ height | divided_by: 2 }} C1350,{{ height }},1350,{{ height | divided_by: 2 }},1440,{{ height | divided_by: 2 }} L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- when 'torn' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height }} L0,{{ height | divided_by: 3 }} L80,{{ height | times: 2 | divided_by: 3 }} L160,{{ height | divided_by: 4 }} L240,{{ height | divided_by: 2 }} L320,{{ height | divided_by: 5 }} L400,{{ height | divided_by: 3 }} L480,{{ height | divided_by: 2 }} L560,{{ height | divided_by: 6 }} L640,{{ height | divided_by: 3 }} L720,{{ height | divided_by: 2 }} L800,{{ height | divided_by: 4 }} L880,{{ height | times: 2 | divided_by: 3 }} L960,{{ height | divided_by: 3 }} L1040,{{ height | divided_by: 2 }} L1120,{{ height | divided_by: 5 }} L1200,{{ height | divided_by: 3 }} L1280,{{ height | divided_by: 2 }} L1360,{{ height | divided_by: 4 }} L1440,{{ height | divided_by: 3 }} L1440,{{ height }} Z"/>
</svg>
{%- when 'arrow' -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,0 L720,{{ height }} L1440,0 L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- else -%}
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 {{ height }}" preserveAspectRatio="none" style="width:50%;height:100%;display:inline-block;flex-shrink:0;">
<path fill="currentColor" d="M0,{{ height | divided_by: 2 }} C360,{{ height }},1080,0,1440,{{ height | divided_by: 2 }} L1440,{{ height }} L0,{{ height }} Z"/>
</svg>
{%- endcase -%}
{%- endcapture -%}
<div style="display:flex;width:100%;height:100%;">
{{ svg_shape }}
{{ svg_shape }}
</div>
</div>
</div>
<style>
.shape-divider--{{ section.id }} {
position: relative;
overflow: hidden;
line-height: 0;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.shape-divider--{{ section.id }} .shape-divider__shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.shape-divider--{{ section.id }} svg {
display: block;
width: 100%;
height: 100%;
}
@keyframes shape-divider-scroll-ltr-{{ section.id }} {
0% { transform: {% if flip_v %}scaleY(-1) {% endif %}translateX(0); }
100% { transform: {% if flip_v %}scaleY(-1) {% endif %}translateX(-50%); }
}
@keyframes shape-divider-scroll-rtl-{{ section.id }} {
0% { transform: {% if flip_v %}scaleY(-1) {% endif %}translateX(-50%); }
100% { transform: {% if flip_v %}scaleY(-1) {% endif %}translateX(0); }
}
.shape-divider--{{ section.id }} .shape-divider__shape--animated {
animation: shape-divider-scroll-{% if section.settings.direction == 'rtl' %}rtl{% else %}ltr{% endif %}-{{ section.id }} {{ speed }}s linear infinite;
width: 200%;
left: 0;
}
</style>
{% schema %}
{
"name": "Shape Divider",
"tag": "div",
"settings": [
{
"type": "select",
"id": "shape",
"label": "Shape style",
"default": "waves1",
"options": [
{ "value": "waves1", "label": "Waves 1" },
{ "value": "waves2", "label": "Waves 2" },
{ "value": "zigzag", "label": "Zigzag" },
{ "value": "bumps", "label": "Bumps" },
{ "value": "slant", "label": "Slant" },
{ "value": "slant_double", "label": "Slant Double" },
{ "value": "curve", "label": "Curve" },
{ "value": "curve_asymmetric", "label": "Curve Asymmetric" },
{ "value": "scallop", "label": "Scallop" },
{ "value": "torn", "label": "Torn Edge" },
{ "value": "arrow", "label": "Arrow" }
]
},
{
"type": "range",
"id": "height",
"label": "Divider height",
"min": 20,
"max": 200,
"step": 5,
"default": 80,
"unit": "px"
},
{
"type": "color",
"id": "divider_color",
"label": "Shape color",
"info": "Match this to the background color of the section below",
"default": "#ffffff"
},
{
"type": "color",
"id": "bg_color",
"label": "Background color",
"info": "Match this to the background color of the section above",
"default": "#000000"
},
{
"type": "checkbox",
"id": "flip_horizontal",
"label": "Flip horizontal",
"default": false
},
{
"type": "checkbox",
"id": "flip_vertical",
"label": "Flip vertical",
"default": false
},
{
"type": "header",
"content": "Animation"
},
{
"type": "checkbox",
"id": "animate",
"label": "Enable animation",
"default": false
},
{
"type": "select",
"id": "direction",
"label": "Direction",
"default": "ltr",
"options": [
{ "value": "ltr", "label": "Left to right" },
{ "value": "rtl", "label": "Right to left" }
]
},
{
"type": "range",
"id": "animation_speed",
"label": "Animation speed",
"min": 2,
"max": 30,
"step": 1,
"default": 8,
"unit": "s",
"info": "Lower = faster"
}
],
"presets": [
{
"name": "Shape Divider"
}
]
}
{% endschema %}