how to add section divider (line) dawn theme 5.0.0

Galya25
Excursionist
14 1 7

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 3 (3)
ZestardTech
Shopify Expert
3494 579 804

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
488 55 91

@Galya25 

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

by this code you can add the border line.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: raviraj@zworthkey.com
,We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
made4Uo
Shopify Partner
1386 207 315

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.  

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.