How To Use ShapeDividers.com

How To Use ShapeDividers.com with Shopify

1. Install this APP to be able to easily add custom CSS https://apps.shopify.com/css-editor/ .

2. Go on the front end and right click > inspect the section where you want the shape divider.

3. Find the shopify-section-id. ( shopify-section-eg123 )

4. Replace all instances of the generated class name in the code from shapedividers.com with #shopify-section-eg123.

For example, this code from shapedividers.com:

.shapedividers_com-1{
overflow:hidden;
position:relative;
}
.shapedividers_com-1::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% 0%; background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 76.2" preserveAspectRatio="none"><g fill="%23fbd8c2"><path d="M381 76.2l-12.7-8.47c-12.7-8.46-38.1-25.4-63.5-28.23-25.4-2.72-50.8 8.39-76.2 5.66-25.4-2.83-50.8-19.76-76.2-18.36-25.4 1.51-50.8 21.09-76.2 28.23-25.4 7.15-50.8 1.33-63.5-1.4L0 50.8V0h381z"/><path d="M381 67.73l-12.7-4.23c-12.7-4.23-38.1-12.7-63.5-12.7s-50.8 8.47-76.2 7.06c-25.4-1.5-50.8-12.62-76.2-11.3-25.4 1.33-50.8 15.62-76.2 21.17-25.4 5.56-50.8 2.91-63.5 1.4L0 67.74V0h381z" opacity=".66"/></g></svg>');
}

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

Becomes

#shopify-section-eg123{
overflow:hidden;
position:relative;
}
#shopify-section-eg123::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% 0%; background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 76.2" preserveAspectRatio="none"><g fill="%23fbd8c2"><path d="M381 76.2l-12.7-8.47c-12.7-8.46-38.1-25.4-63.5-28.23-25.4-2.72-50.8 8.39-76.2 5.66-25.4-2.83-50.8-19.76-76.2-18.36-25.4 1.51-50.8 21.09-76.2 28.23-25.4 7.15-50.8 1.33-63.5-1.4L0 50.8V0h381z"/><path d="M381 67.73l-12.7-4.23c-12.7-4.23-38.1-12.7-63.5-12.7s-50.8 8.47-76.2 7.06c-25.4-1.5-50.8-12.62-76.2-11.3-25.4 1.33-50.8 15.62-76.2 21.17-25.4 5.56-50.8 2.91-63.5 1.4L0 67.74V0h381z" opacity=".66"/></g></svg>');
}

@media (min-width:2100px){
#shopify-section-eg123::before{
background-size: 100% calc(2vw + 90px);
}
}
 

5. Add the newly updated code to your site using the app installed on step 1.