Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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!
@BlankStudio 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.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
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!
⚠💣 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.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
HI @BlankStudio
ul.mega-menu__list.page-width > li > ul > li:hover a::after {
content: ">";
}
I hope this helps
Best,
Daisy
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025