Adding Whatsapp icon footer list publisher theme

CNB
Visitor
1 0 0

Hello,

I want to add a whatsapp icon with a link associated to it to redirect to whatsapp .
I'm having some trouble adding it on the publisher theme

Can someone explain how to do it ?

Reply 1 (1)
galaxy_k
Tourist
3 0 1

Hello, I was also wondering the same thing, and with a little trial and error, plus some help from a previous post, I worked out how to do it for the ‘Spotlight’ theme. Maybe the same method will work on another Shopify 2.0 theme.

 

  1. Go to Admin > Themes > Edit Code (from expanding the ... menu)
  2. Scroll to the Snippets folder and add a new snippet called 'icon-whatsapp.liquid'
  3. In this file, paste the svg code for any WhatsApp icon you want to use. I used one from Font Awesome.
  4. In the <svg> tag, add 

 

aria-hidden="false" focusable="true" class="icon icon-whatsapp"

 

  • Now, scroll to the 'social-icons.liquid'  file under the Snippets folder.
  • Just before the end of the <ul> list, add a <li> element like so:

 

<li class="list-social__item">

    <a href="INSERT YOUR WHATSAPP LINK HERE" class="link list-social__link">

      {%- render 'icon-whatsapp' -%}

    </a>

  </li>

 

Finally, click save and preview to see whether it worked! I hope it does - fingers crossed. 😊

 

Here's how mine looked.

 

footer-with-whatsapp.jpg