Icon Menu

[Rbk_1A]

How adding icons in items Menu/Navigation ?

[mageplaza-cs]

hi @Rbk_1A ,

I am from Mageplaza - Shopify solution expert.

To add icons to the items in the menu/navigation on your Shopify store, you’ll need to modify the theme’s code. Here’s how to do it:

1. Choose Your Icons

   You can either use an icon font like Font Awesome or upload custom images for the icons. For simplicity, we’ll use Font Awesome in this example.

2. . Add Font Awesome to Your Theme- Go to Online Store > Themes > Actions > Edit Code.

   • In the Layout folder, open theme.liquid and add the following inside the tag to include Font Awesome (optional):

​

• Modify the Menu Code- In Sections or Snippets, find the file responsible for rendering the menu. It might be named something like header.liquid or navigation.liquid.

  • Locate the code that generates the menu items. It could look something like this:

    {% for link in linklists.main_menu.links %}
        - {{ link.title }}
        
    {% endfor %}

​

• Modify it to include icons. For example:

    {% for link in linklists.main_menu.links %}
        - {% if link.title == 'Home' %}
                     
                  {% elsif link.title == 'Shop' %}
                     
                  {% elsif link.title == 'Contact' %}
                     
                  {% endif %}
                  {{ link.title }}
            
        
    {% endfor %}

3. Test the Changes- Save your changes and preview your store.

• Make sure the icons appear next to the menu items as expected.

This is an example and may not meet your requirements. Please leave a comment if you need further instructions!"

[laddisahsi]

HI @Rbk_1A

How are you?

This could be done using the custom liquid code and css.
You can Hire a shopify developer for this.

If need any help from my end Please let me know, Contact info is in signature.

With Regards,
Laddi

[DaisyVo]

Hi @Rbk_1A

Please share your store Url and where do you want to add the icon

Best,

Daisy

[DaisyVo]

To add icons to items in the menu/navigation on Shopify, you can follow these steps:

1. Choose Icons: First, decide which icons you want to add.

2. Edit the Theme’s Liquid Code:

   • From your Shopify Admin, go to Online Store > Themes.

   • Click Actions > Edit Code.

     Modify Navigation Menu:

     • In the Sections or Snippets folder, locate the file that contains the menu code (usually header.liquid or navigation.liquid).

     • Find the navigation code that lists your menu items. It might look something like this:

       ```
       <ul class="site-nav">
         <li><a href="/collections/all">All Products</a></li>
         <li><a href="/collections/new-arrivals">New Arrivals</a></li>
         <!-- More items here -->
       </ul>
       ```
       

3. Add Icon HTML Code:
   For each menu item, you can add an tag for custom icons or an tag if you’re using a font-based icon library (like Font Awesome).

   • Custom Image Icon:

     <li><a href="/collections/all"><img src="{{ 'icon1.png' | asset_url }}" alt="All Products"> All Products</a></li>
     

   • Font Awesome Icon:

     <li><a href="/collections/all"><i class="fa fa-cogs"></i> All Products</a></li>
     

     Make sure to include the Font Awesome library in your theme’s section if you’re using it. You can do that by adding this code inside your theme.liquid file:

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     

4. Style the Icons:
   Add some CSS to style the icons, such as adjusting their size, margins, or positioning. You can add this CSS to your theme.css or styles.css file:

   .site-nav li a img {
     width: 20px;
     margin-right: 8px;
   }
   
   .site-nav li a i {
     margin-right: 8px;
   }
   

5. Save and Preview:
   After adding the code and styling, save the changes and preview your store to ensure the icons appear correctly in the navigation menu.

This method allows you to personalize your store’s navigation with icons that enhance the user experience.

I hope this helps

Best,

Daisy

[askbtz]

Thanks!! this logic is work for me!

[robettinger]

Hi. Is this still applicable to Dawn 15.3.0? Can’t find the section anywhere…