Hello.
How can I add custom icons next to collection titles in the Mega Menu like in the example in the image below?
Thanks!!
www.studioblank.store
PASS: macaroni&cheese
Topic summary
A user seeks to add custom icons next to collection titles in their Shopify store’s Mega Menu.
Initial Solutions Offered:
- CSS approach using
background-imageproperties on.mega-menu__link--level-2elements, targeting specific menu items via generated IDs - Alternative CSS method adding arrow symbols (“>”) on hover using
::afterpseudo-elements
Final Solution (Marked as Resolved):
The original poster found a preferred method involving Liquid template editing:
- Upload SVG icons to the Snippets folder
- Locate
{%- for childlink in link.links -%}in theme files (Ctrl+F) - Insert a
{% case childlink.title %}statement to conditionally render SVG icons based on collection titles - Match collection titles by inspecting the menu element in browser DevTools
Key Considerations:
- Always backup theme files before editing
- Using collection handles instead of titles recommended for better future-proofing, as titles can change more easily
- The Liquid method allows precise control over which icons appear for specific menu items
1 Like
@StudioBlank roughly in a custom css setting try something like the following which will not account for any advanced customization for the knock on domino effects in the layout that may need to be adjusted.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
.mega-menu__link--level-2 {
background-position: 0px;
background-size: contain;
background-repeat: no-repeat;
padding-left: 32px;
}
.mega-menu__link--level-2 + ul {
padding-left: 32px;
}
/* set each subitems icon using the elements generated id which is the parent menu name + submenu-name */
#HeaderMenu-new-arrivals-clothing {
background-image: url(https://studioblank.store/cdn/shop/files/fav-icon.svg?crop=center&height=32&v=1737570492&width=32);
}
For deeper customization contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
1 Like
HI @StudioBlank
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- Paste the code provided into the Custom CSS section.
ul.mega-menu__list.page-width > li > ul > li:hover a::after {
content: ">";
}
Here is the result:
I hope this helps
Best,
Daisy
1 Like
Thank you but I found a better solution.
For anyone wondering how, this is the solution:
Step 1: Import your SVG icons in the Snippets folder
Step 2: Press Ctrl+F and search for this code {%- for childlink in link.links -%}
Step 3: Place this code below it
{% case childlink.title %}
{% when 'add-your-collection-title-here' %}
{% render 'add-your-svg-icon-name-here' %}
{% endcase %}
Step 3: Change ‘add-your-collection-title-here’ with your collection title. You can find it by Right-clicking on the title and click Inspect and you will see it in white.
Step 4: Change ‘add-your-svg-icon-name-here’ with the SVG icon you imported earlier
Step 5: Eat macaroni & cheese
This method works to any title in the mega menu!
1 Like
:warning: 
Always backup themes before changing files 
In case of issues some folder/file types in themes allow rollbacks:
Using handles as it’s is a bit more future proof , collection titles can be changed more easily making this fragile.
Good work, remember you can mark you own posts as a solution.
1 Like