Shopify themes, liquid, logos, and UX
I want to have the same full underline under Most Popular and New Arrivals in my store. please help
Hi @Harshal54,
We have this section divider on one of our free tutorials. You can use this as a section. This is just a simple code. 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' }};"> </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 should be able to add a Section divider in your theme editor.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025