Shopify themes, liquid, logos, and UX
Hi everyone,
I want to add a WhatsApp Icon to the Footer of the Shopify Prestige theme.
I already tried replacing one of the existing icons (Twitter) but wasn't successful.
Is there any solution I could try? More than thankful for your tipps!
Kind regards
Marina
Hello, how you doing ?
Hope you doing fine .
I just figured out how to this on my own store (Venture Theme) .
Maybe it works for you too :
Edit Code > Snippets > Add a new Snippet .
Name it icon-whatsapp.liquid
Open it as paste the code :
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-whatsapp"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
Then go to footer.liquid and ad this code rigth after any other social netwok :
<a href="https://wa.me/(YOUR WHATSAPP NUMBER HERE)?text=Hi%2C+I+have+a+question+about+your+store" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'WhatsApp' }}">
{% include 'icon-whatsapp' %}
<span class="icon__fallback-text">WhatsApp</span>
</a>
It show look something like this:
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
{% include 'icon-instagram' %}
<span class="icon__fallback-text">Instagram</span>
</a>
</li>
{% endif %}
<li>
<a href="https://wa.me/(YOUR NUMBER HERE)?text=Hi%2C+I+have+a+question+about+your+store" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'WhatsApp' }}">
{% include 'icon-whatsapp' %}
<span class="icon__fallback-text">WhatsApp</span>
</a>
</li>
Note that the whatsapp part isn't inside a conditional function (if else), so it will always show on the page .
Please, backup your theme before modify the code and dont forget to ad the country code before the number .
For example, in brazil is 55XXXXXXXX .
Hope it works for you too .
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024