Shopify themes, liquid, logos, and UX
Hello,
How can i add extra line of text to separate each group in Drawer Menu as shown below?
Solved! Go to the solution
This is an accepted solution.
I just found the solution.
You just need to add this code under {%- for link in section.settings.menu.links -%} in header-drawer.liquid.
{% if link.title == "Insert Collection Title here" %}
<div class="drawer-text">
<p style="margin-bottom: 0px;">Insert Text Here</p>
</div>
{% endif %}
And to customize the text, you need to add this code anywhere in component-menu-drawer.css, preferably under .menu-drawer__menu-item
.drawer-text {
font-family: "Insert Font Here";
font-size: 12px;
color: #000000;
}
But thank you for your advice.
Hi @BlankStudio ,
Please see the solution below:
To add text under a specific menu item in a Shopify Drawer Menu, you can edit the theme's code.
Step 1:
Create separate sub-menus for "TOPS," "BOTTOMS," and "MISC" under Online Store > Navigation.
Step 2:
Locate the file where the drawer menu is defined, such as header.liquid, drawer.liquid, or a specific snippet like menu-drawer.liquid.
Update the code as below:
<ul class="drawer-menu">
{% assign tops_menu = linklists['tops-menu'] %}
{% assign bottoms_menu = linklists['bottoms-menu'] %}
{% assign misc_menu = linklists['misc-menu'] %}
<!-- TOPS Section -->
{% if tops_menu.links.size > 0 %}
<li class="drawer-menu-header">TOPS</li>
{% for link in tops_menu.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
<!-- BOTTOMS Section -->
{% if bottoms_menu.links.size > 0 %}
<li class="drawer-menu-header">BOTTOMS</li>
{% for link in bottoms_menu.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
<!-- MISC Section -->
{% if misc_menu.links.size > 0 %}
<li class="drawer-menu-header">MISC</li>
{% for link in misc_menu.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
</ul>
Step3:
Locate theme.css or theme.scss.liquid or styles.css or style.scss.liquid
Add the below css code:
.drawer-menu-header {
font-size: 14px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 5px;
color: #333;
}
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
This just made sub-menus.
I just want unclickable, plain text above the menu link
This is an accepted solution.
I just found the solution.
You just need to add this code under {%- for link in section.settings.menu.links -%} in header-drawer.liquid.
{% if link.title == "Insert Collection Title here" %}
<div class="drawer-text">
<p style="margin-bottom: 0px;">Insert Text Here</p>
</div>
{% endif %}
And to customize the text, you need to add this code anywhere in component-menu-drawer.css, preferably under .menu-drawer__menu-item
.drawer-text {
font-family: "Insert Font Here";
font-size: 12px;
color: #000000;
}
But thank you for your advice.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024