Horizontal Lines As Divider On specific pages

[insecurefitness]

I'm searching for a solution to add horizontal lines between the sections on the main page (like on this site http://sundaysomewhere.com). I'm using the Streamline Theme. My store password is password1234.

For example, in this page of my website. https://insecure-fitness-inc.myshopify.com/pages/services

Thank you in advance!

[made4Uo]

Hi @insecurefitness,

You can use the code I've written to add a section divider. Please follow the instructions below

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 %}

[insecurefitness]

Hello,

I duplicated my website and followed the steps but it did not work.

[insecurefitness]

I tried as a liquid file and did not get any errors, it just did not work. When I tried as a json, here is the mistake that read.

[made4Uo]

Hi @insecurefitness,

Please use the liquid when creating a section. Thank you

[insecurefitness]

Hello,

It did not work. I tried that before using the other option.

[made4Uo]

Hi @insecurefitness,

Can you explain on what you mean by "it didn't work"? Did you get errors?

[insecurefitness]

Hello,

I copied and pasted the code as mentioned above. By it didn't work, I mean the horizontal lines did not appear when I saved and previewed.

[made4Uo]

@insecurefitness 

Oh, you have to add the section using the Theme editor. Section name is "Section divider." Make sure you change the settings

[insecurefitness]

Yes, I added a new section on a duplicate of my website. Named it "horizontalline", deleted everything that was in the section and pasted the code above. Then press saved.

[insecurefitness]

The horizontal lines do not appear. Here is my website: https://insecure-fitness-inc.myshopify.com/pages/services

[made4Uo]

Hi @insecurefitness,

Please add the section in your theme editor. 

1. From your Admin page, go to Online store > Themes > Customize
2. Scroll down until you see the "Add section", then click it
3. Add the section name "Section divider"

4. Change the settings

5. Click SAVE

[insecurefitness]

Please see attached.

[insecurefitness]

Hi,

Can you please advise?

[made4Uo]

Oh @insecurefitness,

You got it totally wrong. Please follow the instructions in my website here. Once you are done creating the section, please add the section in the theme editor by following the instructions below.

1. From your Admin page, go to Online store > Themes > Customize
2. Scroll down until you see the "Add section", then click it
3. Add the section name "Section divider"

4. Change the settings

5. Click SAVE

[insecurefitness]

I believe I was misunderstanding you. If I want products to be separated not only horizontally but also vertically like on this website https://sundaysomewhere.com/collections/all-collections, what do I do please? Both a vertical and horizontal line.

[insecurefitness]

Hey there, 

I've replied please

[made4Uo]

Hi @insecurefitness,

I think you mean the borders. Please provide the password of your website. Thank you

[insecurefitness]

Yes, sorry for the confusion. my password is password1234.

[jmerrill]

disregard this post - sent to wrong person

[jmerrill]

@made4Uo Thanks for the section divider copde above - works great!  Wondering if there is a way to add left/right mading with a media query so it doesn't continue to expand beyond a certain breakpoint (somewhere around 1840px).

You can see the divider line I added here in between the two product blocks: https://artdomain.co/

If you scale the browser winder out large you can see what I mean by wanting to limit it's width at 1840px:

[jmerrill]

@made4Uo Thanks for the section divider copde above - works great!  Wondering if there is a way to add left/right mading with a media query so it doesn't continue to expand beyond a certain breakpoint (somewhere around 1840px).

You can see the divider line I added here in between the two product blocks: https://artdomain.co/

If you scale the browser winder out large you can see what I mean by wanting to limit it's width at 1840px:

[Made4uo-Ribe]

Hi @jmerrill 

Which browser are you using? It's not visible on my end.

[Bob_Meyer]

Hey, it worked first try!  Thanks!