I want to have the same full underline under Most Popular and New Arrivals in my store. please help
Topic summary
Goal: add a full-width underline beneath the “Most Popular” and “New Arrivals” headings on a Shopify store (collection/header context). Screenshots provided show the desired visual style, which is central to understanding the request.
Proposed solution: create a reusable “Section divider” in the theme. Steps: go to Online store > Themes > Edit code > Sections > Add new section; replace its contents with the provided code; Save; then add the new Section divider via the theme editor.
Customization options (from the code’s schema):
- Padding top/bottom (0–100px)
- Divider height (0–100px)
- Divider color (hex color)
- Toggle for full-width section
Outcome/status: a straightforward, configurable divider is offered as a section the merchant can insert. The code shown is a schema configuration; placement under specific headings (“Most Popular”/“New Arrivals”) and any needed Liquid/HTML to render/position the line are not detailed in the thread. No confirmation yet that the solution achieves the exact underline effect, so the discussion remains open.
1 Like
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.
- In your Admin page, go to Online store > Themes
- Choose the theme you want to edit then click Actions > Edit code.
- Open Section folder, and click Add a new section. You can name it whatever you want.
- Open the newly created section and replace the existing code with the code below.
{% 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 %}
- Click SAVE. Now, you should be able to add a Section divider in your theme editor.