Replacing a Whatsapp icon with a phone number

Shopify Discussion
1

Hi there, I have had some custom coding work done on my site, and I would like to make a small change to this. Is it possible to replace a WhatsApp icon in the header with a phone number instead? I want it to be in the same position, and only show on the desktop version. My theme is Showcase.

This is the code that is currently being used for the Whatsapp icon:

{% render ‘icon-watsapp’ %}

2

replace {% render ‘icon-watsapp’ %} with the number you want to display

number you want to display

3

Yes, it’s possible to replace the WhatsApp icon in the header with a phone number in the same position and have it only show on the desktop version of your website. To do this, you’ll need to make some changes to the HTML and CSS code in your theme. Here are the steps to achieve this:

Remove the WhatsApp Icon Code and Add Add the Phone Number Link like

Call Us:XXXXXXXX

Apply Desktop-Only Display:

@media screen and (min-width: 768px) {
.phoneIcon {
display: inline-block; /* Show on desktop */
}
}

@media screen and (max-width: 767px) {
.phoneIcon {
display: none; /* Hide on mobile */
}
}

Adjust Styling and Save and Test

4

I would 100 per cent not recommend you using plain text for phone numbers and emails as you would get bombarded with spam messages.

5

Thank you for this. The first part worked perfectly, however, the second part didn’t work for me, the number shows on the mobile view. I’m not very proficient in code, so I’m sure this is my error

6

I’ve replaced the href attribute with tel:+xxxxxxxxxxxxx, where xxxxxxxxxxxxx should be replaced with your actual phone number. This change will make the icon link to a phone number instead of the WhatsApp API.

Make sure to update the class name as well to something like phoneIcon to reflect the change. If your theme has a specific icon for a phone, you can replace ‘icon-phone’ with the appropriate code for that icon.