Add free whatsapp share button to your product page

Highlighted
Explorer
51 1 16

How do i add a simple whatsapp button to my product page?

 

I  made a few tries on i got it work. So i wanted to share this.

 

I added it on the social share bar on my debut template. try it here

Screenshot_20191111_101144.png

That's the code:

 

 <a href="whatsapp://send?text=-------here write the text you want to send before the link------------------ https://------your domain-----{{ product.url }}{{ page.url }}{{ article.url }}" class="btn btn--small btn--share ">
    <img src="https://url_of_the_uploaded_whatsapp_icon/filename.jpg" role="presentation" class="icon" style="width:18px; height:18px" title="share with whatsapp" alt="whatsapp_icon">
    <span class="share-title" aria-hidden="true"> whatsapp</span>
    </span>
    </a>

 

Paste it in the social-sharing.liquid file at the end before the </ul> tag.

 

Hope this can help somebody searching the same solution.

 

 

Highlighted
Tourist
14 0 1

Not working on your web page. Is the code correct?

0 Likes
Highlighted
Explorer
51 1 16
Did you try it from your desktop or mobile device?
0 Likes
Highlighted
Tourist
14 0 1

I tried with desktop. Now I tried with mobiel and everything goes right, which is the most important thing. But, do you know how to fix it in desktop?

0 Likes
Highlighted
Tourist
14 0 0

This is great, thanks for sharing. I added the code using my laptop. it worked partially. the icon didn't show "?" Check it below. How can I make changes to the code via mobile? I can't find the code section anywhere.

https://www.luxoftheworld.com.au/collections/frontpage/products/unique-chanel-large-chesterfield-qui...

 

0 Likes
Highlighted
Tourist
14 0 0

What do I need to do to connect a number to the WhatsApp link so customers can send me a message?

Btw, your website and products are fantastic! love it!

0 Likes
Highlighted
Explorer
51 1 16
I don't know in desktop. I don't think it is thought to make it work on
desktop.
Maybe it should be disabled on non mobile devices
Highlighted
Tourist
14 0 1

That make sense. I would like to know how to activate this just on mobile.

0 Likes
Highlighted
Tourist
14 0 1

Kub would you mind to paste here the code of the whatsapp icon? Should be something like that:

M.215 6.814l.899 1.203q1.249-.929 1.508-.929.99 0 1.843 3.153l.746 2.826q.517 1.958.807 3.009 1.127 3.153 2.833 3.153 2.712 0 6.581-5.21 3.793-4.951 3.93-7.83v-.335q0-3.504-2.803-3.595h-.213q-3.763 0-5.179 4.616.823-.35 1.432-.35 1.295 0 1.295 1.341 0 .168-.015.35-.091 1.082-1.28 2.955-1.219 1.965-1.813 1.965-.792 0-1.401-2.986-.183-.701-.777-4.524-.259-1.645-.96-2.437-.609-.686-1.523-.701-.122 0-.259.015-.96.091-2.849 1.752-.975.914-2.803 2.559z

0 Likes
Highlighted
Explorer
51 1 16
Checkout the first post of this topic its there

I googled a bit for hiding snippets and I found this. Right now I'm out and can't try out
https://www.webdesignersacademy.com/show-and-hide-different-content-on-mobile-devices-desktops/

Maybe you find something there
0 Likes