Section Divider with Options
WOW Shopify with AI
files/Channels_-_Growth_Social_Static_Affiliates_Affiliates-Merchants__320x480_7724dbcb-6bd4-46ed-8a59-93eb2012e8b0.png

Section Divider with Options

See Other Products

This feature will add a section divider in one click. Does not want it anymore? Do not worry, just remove the Section using the Theme editor. 

Features:

  • You can control the space between the sections, therefore, creating a white space. NOTE: You can remove the color so it will just have a white space. 
  • Change the color of the divider
  • Make the divider full width

1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code. 
3. Open Section folder, and click Add a new section. You can name it whatever you want. 
4. Open the newly created section and replace the existing code with the code below. 

<div class="{% if section.settings.full_width %} page-width {% endif %} sectionDivider" style="padding-top: {{ section.settings.padding_top | append: 'px' }}; padding-bottom: {{ section.settings.padding_bottom | append: 'px' }}">
<span style="background: {{ section.settings.color }}; height: {{ section.settings.height | append: 'px' }};">&nbsp</span>
</div>
<style>
.sectionDivider {
width: 100%
}

.sectionDivider span {
width: 100%;
display: block;
}
</style>

{% schema %}
{
"name": "Section divider",
"settings": [
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "height",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Height of the divider",
"default": 5
},
{
"type": "color",
"id": "color",
"default": "#000",
"label": "Divider color"
},
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "Section full-width"
}
],
"presets": [
{
"name": "Section divider"
}
]
}
{% endschema %}

 

5. Click SAVE. Now, you should be able to add a Section divider in your theme editor. 

That's it (",)

Copied!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Back to blog

2 comments

Hi @Gina,

You can change the code .sectionDivider width to below
.sectionDivider {
width: 80%
}

Made4Uo

Thank you so much for the code for the section divider. I only want it to be around 80% width and centralised on the page, how can I do this?

Gina

Leave a comment