How to include small color thumbnails in the submenu?

[kay_png]

Hi,

Just want to ask help including a small color thumbnail in my submenu. I want it to appear beside each color. Here's a sample of what I want it to look like:

Here's my website for reference. https://fabricapparel.com

Thank you!

[oscprofessional]

Hello @kay_png ,

you can do this by some customization changes.

1. Goto shopify admin.

2. Edit theme code and open navigation related file(header or site-nav).

3. Find {%- for childlink in link.links -%} and add span in <li> tag, like this.

<span class="color" style="background:{{ childlink.title }};"></span>

4. add some css in same file.

<style>
 .color {
  height: 25px;
  width: 25px;
  display: block;
  border-radius: 50%;
  margin: 10px;
}
header li {
  display: flex;
}
</style>

5. Output :

[Benjamen]

Hello,
If you're open to a no-code solution, Meteor Mega Menu would be able to support your icons with ease. I'd take a look at our "Stardust" template.

Just throwing that option out there. I hope this helps 😊