How to create custom shape divider?

Store Design
, , , ,
1

So I have another question- I wanna create a custom shape divider for my website. I’m using the Shopify theme “Flux”, and I wanted to incorporate one of the shape dividers from this website: https://shapedividers.com/

I read their tutorial on how to do it, but I think I’m editing the CSS incorrectly. Here’s what my site looks like so far: https://0rfqxv-0i.myshopify.com/

And I’m trying to create a divider that looks similar “ripped paper”. Here’s an edit I made as an example:

Shopify Ex3
Shopify Ex33002×1224 254 KB

I tried looking for YouTube tutorials for how to do it but they’re either outdated or limited in terms of what shapes you can make your dividers. I know I need to replace “.shapedividers_com-4254” with something but I don’t know what! Any help would be greatly appreciated.

This is the sample code I was working with:

.shapedividers_com-2853{
overflow:hidden;
position:relative;
}
.shapedividers_com-2853::before{ 
content:'';
font-family:'shape divider from ShapeDividers.com';
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% 26px;
background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 73"><g fill="%23fbd8c2"><path d="M2000 0v14c-6 0-11 2-16 6a48 48 0 00-4 7 46 46 0 01-3 3c-3 4-6 6-10 6l-12-3c-4 0-6 4-8 7s-5 7-8 8c-4 1-8-1-12-3l-2-2a23 23 0 00-14-2 29 29 0 00-14 6l-3 2-12 15-12-15c-5-4-11-7-17-8a23 23 0 00-13 2c-5 3-10 7-15 5-3-1-6-5-8-8s-4-7-8-7-8 3-11 3c-5 0-8-2-11-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-6 0-13 1-17 6l-6 8-2 2c-2 4-6 6-10 6s-7-3-11-3-7 4-9 7-4 7-8 8a10 10 0 01-6-1l-8-4a23 23 0 00-13-2 29 29 0 00-13 5 38 38 0 00-4 3l-13 15-12-15c-5-4-10-7-17-8a23 23 0 00-13 2c-5 3-9 7-14 5-4-1-6-4-8-8s-5-7-9-7-7 3-11 3-8-2-11-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-6 0-13 1-17 6a52 52 0 00-5 7l-2 3c-3 4-7 6-11 6s-7-3-11-3-7 4-9 7-4 7-8 8-8-2-12-4l-2-1a23 23 0 00-13-2 30 30 0 00-15 7l-2 1-12 15-13-15c-5-4-10-7-17-8a23 23 0 00-13 2l-1 1c-4 2-8 5-13 4-4-1-6-5-8-8s-5-7-9-7-7 3-11 3-8-2-10-6l-1-1-7-9c-4-5-11-6-17-6a26 26 0 01-6-1 27 27 0 01-5 1c-7 0-13 1-18 6l-6 9-1 1c-3 4-7 6-11 6-3 0-7-3-11-3s-6 4-8 7-5 7-8 8-6 0-9-1l-6-4a23 23 0 00-13-2 29 29 0 00-14 6 41 41 0 00-3 2l-12 15-12-15h-1c-4-4-10-7-16-8a23 23 0 00-10 1 22 22 0 00-4 1c-4 3-9 7-14 5-3-1-6-5-8-8s-5-7-8-7l-11 3c-5 0-8-2-11-6l-2-2a70 70 0 00-5-8c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-7 0-13 1-18 6a62 62 0 00-5 8l-2 2c-2 4-6 6-10 6s-8-3-11-3-7 4-9 7-4 7-8 8c-5 2-10-2-14-5h-2a23 23 0 00-12-2 30 30 0 00-17 8l-12 15-12-15-2-2a30 30 0 00-15-6 23 23 0 00-13 2l-4 2c-4 2-7 4-10 3-4-1-6-5-9-8s-4-7-8-7-7 3-11 3-8-2-11-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-6 0-13 1-17 6l-6 9-2 1c-2 4-6 6-10 6s-7-3-11-3-7 4-9 7-4 7-8 8-7-1-11-3l-3-2a23 23 0 00-13-2 30 30 0 00-16 7l-1 1-12 15-13-15-1-1c-5-4-10-7-16-7a23 23 0 00-13 2c-5 3-9 7-14 5-4-1-6-4-8-8s-5-7-9-7-7 3-11 3-8-2-10-6l-3-2a58 58 0 00-5-8c-4-5-11-6-17-6a26 26 0 01-6-1 27 27 0 01-5 1c-7 0-13 1-18 6a56 56 0 00-5 7l-2 3c-3 4-7 6-11 6s-7-3-11-3-6 4-8 7-5 7-9 8-9-2-14-5a23 23 0 00-13-2 30 30 0 00-15 7l-2 1-12 15-12-15-2-1c-4-4-10-7-15-7a23 23 0 00-14 2l-2 1c-4 3-8 5-12 4s-6-5-8-8-5-7-9-7-7 3-11 3-8-2-10-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-6-1 27 27 0 01-5 1c-7 0-13 1-18 6l-6 9-1 1c-3 4-6 6-10 6l-12-3c-4 0-6 4-8 7s-4 7-8 8-7 0-10-2l-4-3a23 23 0 00-14-2 29 29 0 00-14 6l-3 2-12 15-12-15h-1c-5-4-10-7-16-8a23 23 0 00-11 1l-2 1c-5 2-10 6-15 5-3-1-6-5-8-8s-4-7-8-7-8 3-11 3c-4 0-8-2-11-6l-2-2a65 65 0 00-5-8c-5-5-11-6-18-6l-7-1V0z"/><path d="M1287 64l8-6-3-9h-10l-4 9 9 6zM1255 53l13-9-5-16h-17l-5 16 14 9zM1539 64l8-6-3-9h-10l-3 9 8 6zM1411 70l11-7-4-13h-13l-4 13 10 7zM1507 53l13-9-5-16h-16l-6 16 14 9zM1789 68l8-6-3-10h-11l-3 10 9 6zM1667 69l8-6-3-9h-10l-3 9 8 6zM1757 57l13-10-5-16h-17l-5 16 14 10zM1853 70l9-6-4-10h-10l-3 10 8 6zM1912 73l12-8-5-14h-14l-5 14 12 8zM1062 72l-8-6 3-10h10l3 10-8 6zM1005 42l-10-7 4-12h12l4 12-10 7zM955 61l-7-5 3-8h9l2 8-7 5zM1097 71l-11-9 4-13h14l5 13-12 9zM726 62l-9-6 4-9h10l3 9-8 6zM850 69l-8-6 3-10h10l3 10-8 6zM753 47l-11-9 4-13h14l5 13-12 9zM474 65l-8-6 3-10h11l3 10-9 6zM598 71l-8-6 3-10h10l3 10-8 6zM502 49l-11-8 4-13h14l5 13-12 8zM281 66l8-6-3-10h-10l-3 10 8 6zM253 50l12-8-5-14h-14l-4 14 11 8zM97 70l7-4-3-8h-8l-3 8 7 4zM49 62l9-7-3-11H43l-3 11 9 7z"/></g></svg>'); 
}

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

Thank you so much!

2

@actuallyrea ,

The problem is that .shapedividers_com-2853 is not a Shopify or Flux class its just a placeholder class generated by ShapeDividers.com. You need to replace it with the class of the section where you want the divider to appear.

For example if you want the divider under your hero banner inspect the element in your browser (F12) and find the wrapper class. It might look something like:

.banner

or

.shopify-section--slideshow

Then change:

.shapedividers_com-2853 {
    overflow: hidden;
    position: relative;
}

to

.banner {
    overflow: hidden;
    position: relative;
}

.banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: url("data:image/svg+xml,...") repeat-x;
    background-size: 100% 26px;
    z-index: 10;
}

For the Flux theme

The hero section is usually wrapped in something like

<section class="banner">

or

<div class="shopify-section">

So the easiest way is:

  1. Right click the section where you want the divider.
  2. Click Inspect.
  3. Copy the class of the outer container.
  4. Replace .shapedividers_com-2853 with that class
3

Ah, okay! Thank you so much for the explanation, I think I’m one step closer to understanding. I inspected the page like you said, and found the class called, “banner-media”. I replaced the placeholder class with “banner-media”, but I’m still getting a CSS error when I plug it in. I’ll include screencaps of the inspection and the new code I tried.

Screenshot 2026-06-29 at 10.21.47 PM
Screenshot 2026-06-29 at 10.21.47 PM1920×881 254 KB

.banner-media{

overflow:hidden;

position:relative;

}

.banner-media::before{ 

content:'';

font-family:'shape divider from ShapeDividers.com';

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% 26px;

background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 73"><g fill="%23fbd8c2"><path d="M2000 0v14c-6 0-11 2-16 6a48 48 0 00-4 7 46 46 0 01-3 3c-3 4-6 6-10 6l-12-3c-4 0-6 4-8 7s-5 7-8 8c-4 1-8-1-12-3l-2-2a23 23 0 00-14-2 29 29 0 00-14 6l-3 2-12 15-12-15c-5-4-11-7-17-8a23 23 0 00-13 2c-5 3-10 7-15 5-3-1-6-5-8-8s-4-7-8-7-8 3-11 3c-5 0-8-2-11-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-6 0-13 1-17 6l-6 8-2 2c-2 4-6 6-10 6s-7-3-11-3-7 4-9 7-4 7-8 8a10 10 0 01-6-1l-8-4a23 23 0 00-13-2 29 29 0 00-13 5 38 38 0 00-4 3l-13 15-12-15c-5-4-10-7-17-8a23 23 0 00-13 2c-5 3-9 7-14 5-4-1-6-4-8-8s-5-7-9-7-7 3-11 3-8-2-11-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-6 0-13 1-17 6a52 52 0 00-5 7l-2 3c-3 4-7 6-11 6s-7-3-11-3-7 4-9 7-4 7-8 8-8-2-12-4l-2-1a23 23 0 00-13-2 30 30 0 00-15 7l-2 1-12 15-13-15c-5-4-10-7-17-8a23 23 0 00-13 2l-1 1c-4 2-8 5-13 4-4-1-6-5-8-8s-5-7-9-7-7 3-11 3-8-2-10-6l-1-1-7-9c-4-5-11-6-17-6a26 26 0 01-6-1 27 27 0 01-5 1c-7 0-13 1-18 6l-6 9-1 1c-3 4-7 6-11 6-3 0-7-3-11-3s-6 4-8 7-5 7-8 8-6 0-9-1l-6-4a23 23 0 00-13-2 29 29 0 00-14 6 41 41 0 00-3 2l-12 15-12-15h-1c-4-4-10-7-16-8a23 23 0 00-10 1 22 22 0 00-4 1c-4 3-9 7-14 5-3-1-6-5-8-8s-5-7-8-7l-11 3c-5 0-8-2-11-6l-2-2a70 70 0 00-5-8c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-7 0-13 1-18 6a62 62 0 00-5 8l-2 2c-2 4-6 6-10 6s-8-3-11-3-7 4-9 7-4 7-8 8c-5 2-10-2-14-5h-2a23 23 0 00-12-2 30 30 0 00-17 8l-12 15-12-15-2-2a30 30 0 00-15-6 23 23 0 00-13 2l-4 2c-4 2-7 4-10 3-4-1-6-5-9-8s-4-7-8-7-7 3-11 3-8-2-11-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-5-1 27 27 0 01-6 1c-6 0-13 1-17 6l-6 9-2 1c-2 4-6 6-10 6s-7-3-11-3-7 4-9 7-4 7-8 8-7-1-11-3l-3-2a23 23 0 00-13-2 30 30 0 00-16 7l-1 1-12 15-13-15-1-1c-5-4-10-7-16-7a23 23 0 00-13 2c-5 3-9 7-14 5-4-1-6-4-8-8s-5-7-9-7-7 3-11 3-8-2-10-6l-3-2a58 58 0 00-5-8c-4-5-11-6-17-6a26 26 0 01-6-1 27 27 0 01-5 1c-7 0-13 1-18 6a56 56 0 00-5 7l-2 3c-3 4-7 6-11 6s-7-3-11-3-6 4-8 7-5 7-9 8-9-2-14-5a23 23 0 00-13-2 30 30 0 00-15 7l-2 1-12 15-12-15-2-1c-4-4-10-7-15-7a23 23 0 00-14 2l-2 1c-4 3-8 5-12 4s-6-5-8-8-5-7-9-7-7 3-11 3-8-2-10-6l-1-1-6-9c-5-5-11-6-18-6a26 26 0 01-6-1 27 27 0 01-5 1c-7 0-13 1-18 6l-6 9-1 1c-3 4-6 6-10 6l-12-3c-4 0-6 4-8 7s-4 7-8 8-7 0-10-2l-4-3a23 23 0 00-14-2 29 29 0 00-14 6l-3 2-12 15-12-15h-1c-5-4-10-7-16-8a23 23 0 00-11 1l-2 1c-5 2-10 6-15 5-3-1-6-5-8-8s-4-7-8-7-8 3-11 3c-4 0-8-2-11-6l-2-2a65 65 0 00-5-8c-5-5-11-6-18-6l-7-1V0z"/><path d="M1287 64l8-6-3-9h-10l-4 9 9 6zM1255 53l13-9-5-16h-17l-5 16 14 9zM1539 64l8-6-3-9h-10l-3 9 8 6zM1411 70l11-7-4-13h-13l-4 13 10 7zM1507 53l13-9-5-16h-16l-6 16 14 9zM1789 68l8-6-3-10h-11l-3 10 9 6zM1667 69l8-6-3-9h-10l-3 9 8 6zM1757 57l13-10-5-16h-17l-5 16 14 10zM1853 70l9-6-4-10h-10l-3 10 8 6zM1912 73l12-8-5-14h-14l-5 14 12 8zM1062 72l-8-6 3-10h10l3 10-8 6zM1005 42l-10-7 4-12h12l4 12-10 7zM955 61l-7-5 3-8h9l2 8-7 5zM1097 71l-11-9 4-13h14l5 13-12 9zM726 62l-9-6 4-9h10l3 9-8 6zM850 69l-8-6 3-10h10l3 10-8 6zM753 47l-11-9 4-13h14l5 13-12 9zM474 65l-8-6 3-10h11l3 10-9 6zM598 71l-8-6 3-10h10l3 10-8 6zM502 49l-11-8 4-13h14l5 13-12 8zM281 66l8-6-3-10h-10l-3 10 8 6zM253 50l12-8-5-14h-14l-4 14 11 8zM97 70l7-4-3-8h-8l-3 8 7 4zM49 62l9-7-3-11H43l-3 11 9 7z"/></g></svg>'); 

}



@media (min-width:2100px){

.banner-media::before{

background-size: 100% calc(2vw + 26px);

}

}

Did I input the wrong text? I also tried, “banner-media media placeholder” but it didn’t work either!

4

@actuallyrea ,

1. The SVG is breaking the CSS parser
The code from ShapeDividers.com contains a huge inline SVG inside the background-image. Shopify’s CSS editor often throws an error because of the unescaped SVG.

Instead of using the inline SVG, upload the ripped paper SVG as an asset and reference it like this

.banner-media::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:26px;
    background:url('{{ "ripped-paper.svg" | asset_url }}') repeat-x;
    background-size:100% 26px;
    z-index:10;
}

2. You may be targeting the wrong element.

The divider usually belongs on the banner wrapper not the image itself.

From your screenshot I can also see

<div class="banner">

I’d actually try

.banner{
    position:relative;
    overflow:hidden;
}

.banner::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:30px;
    background:url("ripped-paper.svg") repeat-x;
    background-size:100% 30px;
}

This is how most Shopify themes implement decorative dividers.

5

Got’cha! Okay, I still haven’t gotten there quite yet but I’m starting to understand it a little better. Our graphic designer is asleep so I don’t have the ripped paper .svg on hand, so I grabbed a simple triangle .svg from https://www.shapedivider.app/ as a placeholder.

I started by uploading the triangle .svg to my asset folder, then I copied the url and pasted it into the CSS. Didn’t work quite yet, so I tried changing the class to “banner” instead of “banner-media”. The code looks like this now:

.banner{

overflow:hidden;

position:relative;

}

.banner::before{ 

content:'';

font-family:'shape divider from ShapeDividers.com';

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% 26px;

background-position: 50% 0%;  background-image: url({{ “https://cdn.shopify.com/s/files/1/0759/2185/0517/files/triangle.svg?v=1782798339" | | asset_url }}); 

}



@media (min-width:2100px){

.banner::before{

background-size: 100% calc(2vw + 26px);

}

}

Any thoughts on where I went wrong? Thank you again for your time, I really do appreciate it!

6

@actuallyrea ,

The main issue is this line

background-image: url({{ “https://cdn.shopify.com/s/files/1/0759/2185/0517/files/triangle.svg?v=1782798339" | | asset_url }});

There are a few problems here

  1. You are mixing a full CDN URL with the asset_url filter. asset_url is only used for files in your Assets folder, and you pass it the filename, not the full URL.
  2. The quotation marks are “smart quotes” (“ ”) instead of normal quotes (").
  3. There is an extra | (| | asset_url), which makes the Liquid invalid.

If the SVG is in your Assets folder

Use

background-image: url('{{ "triangle.svg" | asset_url }}');

If you want to use the CDN URL directly

Don’t use Liquid at all. Just do

background-image: url("https://cdn.shopify.com/s/files/1/0759/2185/0517/files/triangle.svg?v=1782798339");

One more thing

Since you are using a pseudo-element Id also change

top: -0.1vw;

to

height: 26px;
top: auto;

Otherwise the ::before element stretches over the entire banner which isnt what you want for a divider.

.banner {
    position: relative;
    overflow: hidden;
}

.banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: url('{{ "triangle.svg" | asset_url }}') no-repeat center bottom;
    background-size: 100% 26px;
    pointer-events: none;
    z-index: 3;
}

One last question Where are you adding this CSS? Is it in

  • Theme Settings → Custom CSS
  • base.css
  • theme.css
  • or another stylesheet?

That matters because Liquid filters like asset_url only work in .liquid files. If you are adding this in the Theme Editors Custom CSS field or a plain .css file, {{ "triangle.svg" | asset_url }} will not work. In that case, you should use the direct CDN URL instead.

8

Unfortunately, “Custom CSS” setting in Shopify freaks out about the content: CSS property.
This is why your code is not accepted and they handle these situations poorly.
And keep in mind that “Custom CSS” is limited in size.

It’s documented – https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css#css-considerations

A workaround is to add a “Custom liquid” section (or ‘Custom HTML’ if your theme has this one) and paste your CSS code into that section, then add <style> at the top and </style> at the bottom, like this:

<style>
 ... your css code ...
</style>

You add this section inside “Template” area and it will apply only on the pages using this template, or in the “Footer” area and it will apply on all pages…

Also, you can use svg as inlined background image, but it needs to be properly escaped or base64 encoded. Years ago I’ve made a codepen for this, but it gets too big for longer SVGs – https://codepen.io/tairli/pen/YgVMpw

11

Go to online store > edit theme
Add section select custom liquid and in custom iquid section paste this code

<div class="custom-shape-divider">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,0,0,1,321.39,56.44Z" class="shape-fill"></path>
    </svg>
</div>

and in custom css paste this

.custom-shape-divider {
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider svg {
display: block;
width: calc(100% + 1.3px);
height: 60px;
}
.custom-shape-divider .shape-fill {
fill: #fbd8c2;
}

Save