How can I add brand icons to my website's navbar using code?

Store Design
1

I want to add some icons like Apple, Samsung and Any Brands icon. I want someone help me in coding how to do it with (fontawesome icons or any website that make it done).

ICON :white_check_mark:

SVG File :cross_mark: .

Navigation - Submenu

SmartSelect_20220203-081410_Chrome.jpg
SmartSelect_20220203-081410_Chrome.jpg501×316 6 KB

2

I need to code the theme, Sub menu and add font icons not svg img. Please any advice any help.

3

Hi @Mujammami ,

Please follow the steps below:

  • Step 1: Go to layout > theme.liquid file and add code here:

Screenshot.png
Screenshot.png1182×817 58.8 KB

Code:
  • Step 2: Go to sections > sidebar.liquid file, find ‘list–inline social-links’ and add code here:

Screenshot.png
Screenshot.png1114×631 49.5 KB

Ex code for apple:

- apple

Also, you can use any font awesome free icons.

Hope it helps!

4

Thanks Mr. LitExtension, see what happen!

SmartSelect_20220217-112433_Chrome.jpg
SmartSelect_20220217-112433_Chrome.jpg239×366 5.59 KB

I need to move it here

SmartSelect_20220217-112457_Chrome.jpg
SmartSelect_20220217-112457_Chrome.jpg244×420 7.91 KB

The image up there has SVG file I dont like it. I need only to use font icon before Apple and the other brands.

Thanks again for your responding and help Mr. LitExtension.

Waiting for you support and the supporters.

5

Hi @Mujammami ,

Can you send me the code where you add the svg icon? You just edit it to font awesome, it will display fine.

If you can’t find it, please send me the code of /sidebar.liquid file, I will check it.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

6

This is the full code for (Sidebar.liquid)

{{ ‘layout.navigation.menu’ | t }}

    {% for link in menus[section.settings.main_menu_link_list].links %}

    {% assign outer_index = forloop.index %}

    {% if link.links != blank %}

    {% assign has_active_link = false %}

    {% if link.active or link.child_active %}

    {% assign has_active_link = true %}

    {% endif %}

  • {{ link.title | escape }}

    {% if has_active_link %}-{% else %}+{% endif %}

      {% for childlink in link.links %}

      {% if childlink.links != blank %}

      {% assign has_active_childlink = false %}

      {% if childlink.active or childlink.child_active %}

      {% assign has_active_childlink = true %}

      {% endif %}

    • {{ childlink.title | escape }}

      {% if has_active_childlink %}-{% else %}+{% endif %}

        {% for grandchildlink in childlink.links %}

      • apple

      • <a href=“{{ grandchildlink.url }}” class=“site-nav__link”{% if grandchildlink.active %} aria-current=“page”{% endif %}>{{ grandchildlink.title | escape }}

        • {% endfor %}

      • {% else %}

    • <a href=“{{ childlink.url }}” class=“site-nav__link”{% if childlink.active %} aria-current=“page”{% endif %}>{{ childlink.title | escape }}

      • {% endif %}

      {% endfor %}

    • {% else %}

  • <a href=“{{ link.url }}” class=“site-nav__link”{% if link.active %} aria-current=“page”{% endif %}>{{ link.title | escape }}

    • {% endif %}

    {% endfor %}

    {% if shop.customer_accounts_enabled %}

    {% if customer %}

  • {{ ‘layout.customer.account’ | t }}

  • {{ ‘layout.customer.log_out’ | t }}

    • {% else %}

  • {{ ‘layout.customer.log_in’ | t }}

  • {{ ‘layout.customer.create_account’ | t }}

    • {% endif %}

    {% endif %}

{% schema %}

{

“name”: {

“cs”: “Postranní lišta”,

“da”: “Sidebjælke”,

“de”: “Seitenleiste”,

“en”: “Sidebar”,

“es”: “Barra lateral”,

“fi”: “Sivupalkki”,

“fr”: “Barre latérale”,

“it”: “Sidebar”,

“ja”: “サイドバー”,

“ko”: “사이드바”,

“nb”: “Sidefelt”,

“nl”: “Zijbalk”,

“pl”: “Pasek boczny”,

“pt-BR”: “Barra Lateral”,

“pt-PT”: “Barra lateral”,

“sv”: “Sidofält”,

“th”: “แถบด้านข้าง”,

“tr”: “Kenar çubuğu”,

“vi”: “Thanh bên”,

“zh-CN”: “侧边栏”,

“zh-TW”: “側邊欄”

},

“settings”: [

{

“type”: “link_list”,

“id”: “main_menu_link_list”,

“label”: {

“cs”: “Nabídka”,

“da”: “Menu”,

“de”: “Menü”,

“en”: “Menu”,

“es”: “Menú”,

“fi”: “Valikko”,

“fr”: “Menu”,

“it”: “Menu”,

“ja”: “メニュー”,

“ko”: “메뉴”,

“nb”: “Meny”,

“nl”: “Menu”,

“pl”: “Menu”,

“pt-BR”: “Menu”,

“pt-PT”: “Menu”,

“sv”: “Meny”,

“th”: “เมนู”,

“tr”: “Menü”,

“vi”: “Menu”,

“zh-CN”: “菜单”,

“zh-TW”: “選單”

},

“default”: “main-menu”

}

]

}

{% endschema %}

  • I made editing to (theme.scss.liquid), and there I add some edit to show SVG logo before the Brand name. If you want me to send it, I will send it to you privetly. (short code to see and edit) from your side.
7

{{ ‘layout.navigation.menu’ | t }}

    {% for link in menus[section.settings.main_menu_link_list].links %}

    {% assign outer_index = forloop.index %}

    {% if link.links != blank %}

    {% assign has_active_link = false %}

    {% if link.active or link.child_active %}

    {% assign has_active_link = true %}

    {% endif %}

  • {{ link.title | escape }}

    {% if has_active_link %}-{% else %}+{% endif %}

      {% for childlink in link.links %}

      {% if childlink.links != blank %}

      {% assign has_active_childlink = false %}

      {% if childlink.active or childlink.child_active %}

      {% assign has_active_childlink = true %}

      {% endif %}

    • {{ childlink.title | escape }}

      {% if has_active_childlink %}-{% else %}+{% endif %}

        {% for grandchildlink in childlink.links %}

      • apple

      • <a href=“{{ grandchildlink.url }}” class=“site-nav__link”{% if grandchildlink.active %} aria-current=“page”{% endif %}>{{ grandchildlink.title | escape }}

        • {% endfor %}

      • {% else %}

    • <a href=“{{ childlink.url }}” class=“site-nav__link”{% if childlink.active %} aria-current=“page”{% endif %}>{{ childlink.title | escape }}

      • {% endif %}

      {% endfor %}

    • {% else %}

  • <a href=“{{ link.url }}” class=“site-nav__link”{% if link.active %} aria-current=“page”{% endif %}>{{ link.title | escape }}

    • {% endif %}

    {% endfor %}

    {% if shop.customer_accounts_enabled %}

    {% if customer %}

  • {{ ‘layout.customer.account’ | t }}

  • {{ ‘layout.customer.log_out’ | t }}

    • {% else %}

  • {{ ‘layout.customer.log_in’ | t }}

  • {{ ‘layout.customer.create_account’ | t }}

    • {% endif %}

    {% endif %}

{% schema %}

{

“name”: {

“cs”: “Postranní lišta”,

“da”: “Sidebjælke”,

“de”: “Seitenleiste”,

“en”: “Sidebar”,

“es”: “Barra lateral”,

“fi”: “Sivupalkki”,

“fr”: “Barre latérale”,

“it”: “Sidebar”,

“ja”: “サイドバー”,

“ko”: “사이드바”,

“nb”: “Sidefelt”,

“nl”: “Zijbalk”,

“pl”: “Pasek boczny”,

“pt-BR”: “Barra Lateral”,

“pt-PT”: “Barra lateral”,

“sv”: “Sidofält”,

“th”: “แถบด้านข้าง”,

“tr”: “Kenar çubuğu”,

“vi”: “Thanh bên”,

“zh-CN”: “侧边栏”,

“zh-TW”: “側邊欄”

},

“settings”: [

{

“type”: “link_list”,

“id”: “main_menu_link_list”,

“label”: {

“cs”: “Nabídka”,

“da”: “Menu”,

“de”: “Menü”,

“en”: “Menu”,

“es”: “Menú”,

“fi”: “Valikko”,

“fr”: “Menu”,

“it”: “Menu”,

“ja”: “メニュー”,

“ko”: “메뉴”,

“nb”: “Meny”,

“nl”: “Menu”,

“pl”: “Menu”,

“pt-BR”: “Menu”,

“pt-PT”: “Menu”,

“sv”: “Meny”,

“th”: “เมนู”,

“tr”: “Menü”,

“vi”: “Menu”,

“zh-CN”: “菜单”,

“zh-TW”: “選單”

},

“default”: “main-menu”

}

]

}

{% endschema %}

8

I send it privetly.

9

Hi @Mujammami ,

You are adding it like this:

Screenshot.png
Screenshot.png1166×673 36.3 KB

You just need to add the following code, it will display separately:

Screenshot.png
Screenshot.png916×481 26.5 KB

Code:

{% if childlink.title == 'متجر الأجهزة الذكية' %}

{% endif %}

Hope it helps!