Horizontal Lines As Divider On specific pages

Horizontal Lines As Divider On specific pages

insecurefitness
Tourist
14 0 1

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!

Replies 19 (19)

made4Uo
Shopify Partner
3840 716 1177

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

Hello,

 

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

insecurefitness
Tourist
14 0 1

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.Capture50.JPG

made4Uo
Shopify Partner
3840 716 1177

Hi @insecurefitness,

 

Please use the liquid when creating a section. Thank you

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

Hello,

 

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

made4Uo
Shopify Partner
3840 716 1177

Hi @insecurefitness,

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

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
Shopify Partner
3840 716 1177

@insecurefitness 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

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
Tourist
14 0 1

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

made4Uo
Shopify Partner
3840 716 1177

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

Please see attached.Capturenew.JPG

insecurefitness
Tourist
14 0 1

Hi,

 

Can you please advise?

made4Uo
Shopify Partner
3840 716 1177

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

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
Tourist
14 0 1

Hey there, 

 

I've replied please

made4Uo
Shopify Partner
3840 716 1177

Hi @insecurefitness,

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
insecurefitness
Tourist
14 0 1

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

Bob_Meyer
Excursionist
14 0 6

Hey, it worked first try!  Thanks!