how to add section divider (line) dawn theme 5.0.0

Galya25
Excursionist
23 2 9

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

gal no mames
Replies 14 (14)

ZestardTech
Shopify Expert
5393 970 1291

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Mr_RaviRaj
Shopify Partner
505 57 108

@Galya25 

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

by this code you can add the border line.

banned

made4Uo
Shopify Partner
3804 713 1124

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.  

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Fidiak
Tourist
11 0 6

Thanks,

great help.

 

sachahcas
Explorer
54 3 5

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

Thank you so much! 

If it ain't broke, don't fix it
byClaireWebb
Tourist
9 0 1

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
Shopify Partner
3804 713 1124

Hi @byClaireWebb 

 

Add this to the <style tag

.sectionDivider span {
margin: auto;
}
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
byClaireWebb
Tourist
9 0 1

Thank you, this worked perfectly!

CPK100
Visitor
3 0 0

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!

Scrowp
Shopify Partner
32 0 1

You can follow this easy tutorial to add a divider section to your Shopify store 🙂

Shopify Web design created by Marouane RHAFLI
CPK100
Visitor
3 0 0

Thanks, I added the section and snippet code and they are working but I can't get the divider line to show across the full width. It is only on the left side as if it is in a column (but that is not the case).

Scrowp
Shopify Partner
32 0 1

Make sure to follow the tutorial step by step and everything will work fine, if it is not the case, try to screenshot the issue and the code snippet so we can help you

Shopify Web design created by Marouane RHAFLI
CPK100
Visitor
3 0 0

Thanks, I belive I have followed the instructions correctly.  Here are some screenshots of the snippet and the issue on the page.

 

Screenshot 2023-09-21 at 9.17.06 AM.png

 

Screenshot 2023-09-21 at 9.10.16 AM.png

Scrowp
Shopify Partner
32 0 1

In order to add divider / spacer between sections on Dawn theme, I invite you to follow this easy tutorial on Youtube made by Marouane RHAFLI

Shopify Web design created by Marouane RHAFLI