Is it possible to add icons to Link List (child) like to Multi-column (Parent)?

Store Design
, , ,
1

Hi everyone,

I’m working on customizing the vertical navigation bar in my Shopify webshop theupkeep.nl

I can successfully add icons to the Multi-column (Parent) items, but I can’t find a way to add them to the Link List (Child) items.

I’ve attached a picture to illustrate it:

  • Green shows what I currently have (icons on the parent items, which works).

  • Red shows where I’d also like to have icons (on the child items), but I don’t see an option to do this.

Is there a workaround, app, or code customization that would allow icons to be added to the Link List (Child) menu items as well?

Any advice or examples would be greatly appreciated!

Thanks in advance,
Bob

Paint
Paint3372×4413 342 KB

1 Like
2

Hi @TheUpkeep

This can be done with custom code. Please send me the collaborator code, and I’ll check it and give you a proper update.

3

(post deleted by author)

4

Hey @TheUpkeep,

If you are not able to add the icon for the child menus then it means there is the limitation of the theme. So now it’s requires to do the custom code.

If you could share the header.liquid file code then I can take a look into it and can update the whole code for you so that there should be customization option to add the icon for the child menu.

5

By default, Shopify only gives you an option to add icons (or images) to the top-level menu items. For the child items, there isn’t a built-in setting, so you’d need a theme code customization.

One common workaround is:

  • Add a custom class or data-icon attribute to each child link inside Online Store > Navigation.

  • Then, in your theme’s header.liquid or navigation snippet, loop through the menu items and conditionally render an <img> or <svg> next to the link label based on that attribute.

  • Finally, adjust the CSS so the icon lines up properly with the child links.

Some themes also let you extend the menu rendering logic through linklists in Liquid, but it usually requires editing the code directly.

If you’re comfortable with Liquid + CSS, you can definitely add icons to child items this way. If not, it might be worth having a developer make the adjustments, since it’s mostly a one-time setup.

Kindly let me know if you encounter

coding
coding1536×1024 93.7 KB

issues

6

Hi @TheUpkeep,

Please go to Actions > Edit code > sections > header.liquid file. Please send me the code of the file, I will check and guide you