How can I add custom icons to my navigation and filter menu?

Technical Q&A
,
1

Hi,

We want to add custom icons on the left side of our navigation menu (eg. a custom cap icon next to the navigation “caps” and so on). I couldn’t find a really helpful answer so far. Furthermore, I want to display some of these icons on the filter as well (examples attached).

I am looking forward to your help. Here is our shop: https://koaa.world/

We use the DAWN theme.

Thanks a lot!

koaa_filter_examples.jpg
koaa_filter_examples.jpg1860×853 78.6 KB

koaa_icons_examples.jpg
koaa_icons_examples.jpg1910×867 97.1 KB

2

To add custom icons to your navigation menu and filters in Shopify, you’ll need to make modifications to your theme’s code. Here’s a general outline of the steps you can follow:

  1. Prepare your custom icons: Create or find the custom icons you want to use. You can design them yourself or source them from icon libraries or graphic resources.

  2. Upload the icons: Upload the custom icons to your Shopify store. You can either upload them as image files (e.g., PNG, SVG) or use an icon font library.

  3. Locate the navigation menu code: In your theme files, locate the code responsible for rendering the navigation menu. The file to edit will depend on your theme, but commonly it’s found in the theme.liquid or header.liquid file.

  4. Edit the navigation menu code: Within the navigation menu code, find the section where the navigation items are generated. Here, you’ll need to modify the code to include the custom icons next to the navigation links. You can use HTML and CSS to insert the icons and style them accordingly.

3

Hi Nomtech, Thanks for the answer. Sounds a bit like ChatGPT :slightly_smiling_face: Any chance you can give me the actual code I have to enter? Thanks

2 Likes