Adding Whatsapp icon footer list publisher theme

Technical Q&A
1

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 ?

2

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 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
      list, add a
    • element like so:
    - {%- render 'icon-whatsapp' -%}

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

    Here’s how mine looked.

    footer-with-whatsapp.jpg
    footer-with-whatsapp.jpg1214×459 14.4 KB

3

Hey,

I have the Previous Post method on my Shopify store but it is not working for me. Can someone please check it and guide me. I want to integrate it in my Shopify website.

https://community.shopify.com/c/technical-q-a/how-to-add-a-whatsapp-icon-to-a-november-theme-footer/

I want to add it in footer.

Thanks & Regards

4

It worked for me, thank you!, Do you know how to edit the size of the icon?, because is a little bigger than my other social media icons, thank you!

5

Hi there, I don’t quite understand how to add the code in the SVG tag, can you show me your code or how to do it?

lyenterprise 6
7

To add a WhatsApp icon with a redirect link in the Publisher theme, first upload a WhatsApp icon image or use a font icon library like Font Awesome. Then, insert it in your header, footer, or widget area using a text/HTML widget. Wrap the icon in an anchor tag with your WhatsApp chat link (https://wa.me/your-number). Save changes, and the icon will now redirect users to your WhatsApp chat. I have also read your previous post here: https://community.shopify.com/t/how-to-add-a-whatsapp-icon-to-a-november-theme-footer/30664-[d](https://deltaexecutor.mx/)