Shopify themes, liquid, logos, and UX
This is an accepted solution.
Hi, I am glad the solution works.
For the section divider, you can follow the guide here.
1. Go to your Shopify > Theme > Edit code > Open Section : https://prnt.sc/mjONC4ISqxmQ
2. Click to Add a new Section > name it as "section-divider" > Done: https://prnt.sc/hI5G9ToIrOD7
3. Select and remove the existing code on the file: https://prnt.sc/GnM-UUaDhf8k
4. Copy and Paste this liquid code below > Save
<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. Go back to Theme > Customize > click to Add section > then you will see the Section divider here :https://prnt.sc/-9LSWnmGgyF1
6. Edit and design your divider > save : https://prnt.sc/EuhIWF0SvqD8
I hope it helps
Hi @AtlasVG
Thanks for your question.
To remove the underline on the Menu header, you can follow the instruction here:
Step 1: Go to Online Store > Themes > Edit Code
Step 2: Go to Asset > Select Base.css > Paste Code Below : https://prnt.sc/E0zBzs44kiLT
.header__active-menu-item { text-decoration: none; }
.header__menu-item:hover span { text-decoration: none; }
I hope it helps.
Hana, Avada team
It works! Thank you so so much! I do have one small request, how do I make a divider like this? I'm trying to make a divider with a custom liquid, wondering if you know how to create one like this, thanks!!!
This is an accepted solution.
Hi, I am glad the solution works.
For the section divider, you can follow the guide here.
1. Go to your Shopify > Theme > Edit code > Open Section : https://prnt.sc/mjONC4ISqxmQ
2. Click to Add a new Section > name it as "section-divider" > Done: https://prnt.sc/hI5G9ToIrOD7
3. Select and remove the existing code on the file: https://prnt.sc/GnM-UUaDhf8k
4. Copy and Paste this liquid code below > Save
<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. Go back to Theme > Customize > click to Add section > then you will see the Section divider here :https://prnt.sc/-9LSWnmGgyF1
6. Edit and design your divider > save : https://prnt.sc/EuhIWF0SvqD8
I hope it helps
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025