Re: How to add plain text under specific menu item in Drawer Menu

Solved

How to add plain text under specific menu item in Drawer Menu

BlankStudio
Explorer
56 1 22

Hello,

How can i add extra line of text to separate each group in Drawer Menu as shown below?

xaxaxa.PNG

Accepted Solution (1)
BlankStudio
Explorer
56 1 22

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.

View solution in original post

Replies 3 (3)

Sweans
Shopify Partner
420 85 125

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

BlankStudio
Explorer
56 1 22

This just made sub-menus.

I just want unclickable, plain text above the menu link

BlankStudio
Explorer
56 1 22

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.