Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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;
}
.shopify-section{
border-top: 2px solid black;
}
by this code you can add the border line.
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' }};"> </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.
Thanks,
great help.
Nailed it @made4Uo - customizable in every way I can think of, and compatible with my theme (Ride).
Thank you so much!
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!
Add this to the <style tag
.sectionDivider span {
margin: auto;
}
Thank you, this worked perfectly!
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!
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?
Hi @rg1234,
All of the steps are set to 1. I'm not sure what you mean by jumping
best workaround I've found on one of these threads. thank you.
Hey how can i make the divider appear in the product liquid
Hi @Ferismateam
You cannot use this solution inside your product section or product information. It is a section, you simply add a section to any template and find the divider.
This solution works on any theme and any version but style might be affected with default theme style.
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024