Adding Icons next to Mega Menu collections

Solved

Adding Icons next to Mega Menu collections

BlankStudio
Explorer
69 2 27

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
ddju.PNG

Accepted Solution (1)
BlankStudio
Explorer
69 2 27

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!

ddju.PNG

View solution in original post

Replies 4 (4)

PaulNewton
Shopify Partner
7721 678 1620

@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


BlankStudio
Explorer
69 2 27

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!

ddju.PNG

PaulNewton
Shopify Partner
7721 678 1620

‌‌‌‌⚠💣 Always backup themes before changing files 💣⚠‌

In case of issues some folder/file types in themes allow rollbacks:

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-b... 

 

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


DaisyVo
Shopify Partner
3794 412 499

HI @BlankStudio 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. 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: image_720.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution