how to add section divider (line) dawn theme 5.0.0

[Galya25]

I would be happy for the help of community members,
is it possible to add a section divider (line) to the online store 2.0 - dawn theme?

I want to create a section divider for the home page and for the collection pages\ products \ blogs and more..
In fact, is it possible to create a DIVIDER (line) for all the pages?

website link

@katek

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

.shopify-section{
border-top: 2px solid #bbb;
}

[Mr_RaviRaj]

@Galya25 

.shopify-section{
border-top: 2px solid black;
}

by this code you can add the border line.

[made4Uo]

Hi @Galya25,

The easiest way possible is to create a section and it is up to you if you want to add a divider line or not.

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 the Section folder, click Add new section. You can name it whatever you want.
4. Open the newly created section and paste  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 can add this new section using your Theme editor. 

For more information about this section, you can visit the link here.  

[Fidiak]

Thanks,

great help.

[sachahcas]

Nailed it @made4Uo - customizable in every way I can think of, and compatible with my theme (Ride).

Thank you so much! 

[byClaireWebb]

Hello, thank you for this solution! I would like the line to be 80% of the full width, but when I enter 80 instead of 100 in the width areas, it justifies the line left. Is there a way to keep it in the center? Thank you!

[made4Uo]

Hi @byClaireWebb 

Add this to the <style tag

.sectionDivider span {
margin: auto;
}

[byClaireWebb]

Thank you, this worked perfectly!

[CPK100]

Thanks for this info. I'm not a coder at all. Can you tell me where this needs to be added to the style tag?  Much appreciated!

[rg1234]

hello, the px for top and bottom padding is jumping up in 4's how do i change this to 1 as the line is too thick?

[STRFTR]

best workaround I've found on one of these threads. thank you.