Brooklyn Theme: Add Instagram Icon on Top Right Next To Search and Cart

Solved
adthai
Explorer
63 0 25

Hi, my URL is https://a-lineage-story.myshopify.com/. Password is 'beckew'. I want to add an instagram button icon on the red circle where I have attached a photo. Does anyone know how to do this?

76.png

 

Accepted Solution (1)

Accepted Solutions
Nazmulhasan
Excursionist
10 3 3

This is an accepted solution.

@adthai 

 

1. Go to Actions -> Edit Code -> Sections -> header.liquid file.

2. Search for </nav>, and above that you'll find a </ul>.

Nazmulhasan_1-1634452588807.png

 

3. Above that </ul> paste this code snippet.

<li class="site-nav__item site-nav__item--compressed">
  <a href="{{ settings.social_instagram_link | escape }}" class="site-nav__link site-nav__link--icon">
    <span class="icon-fallback-text">
      <span class="icon icon-instagram" aria-hidden="true"></span>
    </span>
  </a>
</li>  

It should look like this:

Nazmulhasan_2-1634452720840.png

4. Save the file and reload your site. It should add the instagram icon at the top right of your cart.

 

Let me know if you face any problem doing that.

If found helpful Like & Mark as Accepted solution
~ Email: nazmulhasankazal@gmail.com
~ Skype: live:nazmulhasankazal

View solution in original post

Replies 2 (2)
Nazmulhasan
Excursionist
10 3 3

This is an accepted solution.

@adthai 

 

1. Go to Actions -> Edit Code -> Sections -> header.liquid file.

2. Search for </nav>, and above that you'll find a </ul>.

Nazmulhasan_1-1634452588807.png

 

3. Above that </ul> paste this code snippet.

<li class="site-nav__item site-nav__item--compressed">
  <a href="{{ settings.social_instagram_link | escape }}" class="site-nav__link site-nav__link--icon">
    <span class="icon-fallback-text">
      <span class="icon icon-instagram" aria-hidden="true"></span>
    </span>
  </a>
</li>  

It should look like this:

Nazmulhasan_2-1634452720840.png

4. Save the file and reload your site. It should add the instagram icon at the top right of your cart.

 

Let me know if you face any problem doing that.

If found helpful Like & Mark as Accepted solution
~ Email: nazmulhasankazal@gmail.com
~ Skype: live:nazmulhasankazal

View solution in original post