Adding Whatsapp icon footer list publisher theme

Technical Q&A

Topic summary

The original poster seeks guidance on adding a WhatsApp icon with a redirect link to the Publisher theme’s footer but encounters difficulties.

Solution Provided:

A community member shares a working method tested on the Spotlight theme (potentially applicable to other Shopify 2.0 themes):

  1. Navigate to Admin > Themes > Edit Code
  2. Create a new snippet: icon-whatsapp.liquid in the Snippets folder
  3. Paste SVG code for a WhatsApp icon (e.g., from Font Awesome)
  4. Add attributes to the <svg> tag: aria-hidden="false" focusable="true" class="icon icon-whatsapp"
  5. Edit social-icons.liquid and insert a <li> element before the closing </ul> tag that renders the WhatsApp icon snippet
  6. Wrap the icon in an anchor tag linking to https://wa.me/your-number

Follow-up Questions:

  • One user asks how to adjust icon size to match other social media icons
  • Another requests clarification on adding code to the SVG tag (later posts the complete SVG code example)
  • A third user mentions the method from a previous post isn’t working for their setup

Status: The discussion remains open with implementation questions ongoing.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
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

1 Like