How add whatsapp button that add URL of product page in chat

Shopify Discussion
1

Question: How to add whatsapp button that add URL of product page in chat.

theme: sense

URL: https://theaairascloset.com/

2

Hi @rzwahmed

To add a WhatsApp chat button on your Shopify product pages that includes the product title and URL in the message, follow these steps:

  1. In your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit, click the “Actions” dropdown, and select “Edit code”.

  3. In the theme code editor, open the product-template.liquid file located in the Sections folder.

  4. Find a good spot to insert the WhatsApp button code, like below the add to cart button. Paste this code:

Here’s what each part does:

  • The <a> tag creates a link that opens WhatsApp with a pre-filled message.

  • You have to replace url-to-whatsapp with the real url (like in your actual button)

  • You have to put your phone number

  • {{ product.title | url_encode }} inserts the product name and encodes it properly for a URL.

  • {{ shop.url }}{{ product.url }} adds the full URL to that specific product page.[1]

  1. Replace whatsapp-icon.png with the path to your own WhatsApp button image.

  2. Click “Save” and the WhatsApp button will now show up on your product pages!

When a customer clicks it, WhatsApp will open with a message like:

“I’m interested in the product: Awesome T-Shirt - https://yourstore.com/products/awesome-tshirt”

The product title and URL are pulled in dynamically for each product.[1]

Some tips:

  • Style the button by adding a CSS class to the <a> tag.
  • Upload the icon to your Shopify Files and copy the path.
  • Test it to make sure the button looks good and the link works.

Let me know if you have any other questions.

3

Hello @rzwahmed ,

It looks like you are using the WhatsApp Chat & Abandoned Cart app and are trying to pass the product URL to the WhatsApp chat widget. The app provides this feature where you can add the page link in the default message. For that, you would need to follow these steps:

  1. Open the WATI App: WhatsApp Chat app from the Shopify admin panel. You can check the screenshot below for more reference.

    swym_0-1711968003283.png
    swym_0-1711968003283.png1600×870 122 KB

  2. The app dashboard will open, From the tabs on the left select the Whatsapp chat option, as shown in the screenshot below:

    swym_1-1711968003346.png
    swym_1-1711968003346.png1600×789 148 KB

  3. Scroll down to Chat Widget settings. In the ‘Prefilled Message’ field you can enter your desired message and add the link using the Page Link button. You can check the message I added in the screenshot below:

    swym_2-1711968003311.png
    swym_2-1711968003311.png1600×845 110 KB

In case you’re still unable to add the product page link, I suggest you kindly reach out to the WATI app support by clicking on the chatbot icon on the bottom-right corner of the screen.

Hope this helps!

Regards,
Abhishek from Swym

4

there in NO file named “product-template.liquid” in code

1.png
1.png954×518 40.2 KB

5

Sorry, I’ve made a mistake. The Sense theme for Shopify does not have a file named product-template.liquid. Instead, it uses main-product.liquid located in the Sections folder to render the product page.

To find and edit the code for the product page in the Sense theme, you need to follow these steps:

  1. Log in to your Shopify admin dashboard.
  2. Go to Online Store > Themes.
  3. Find the Sense theme and click Actions > Edit code.
  4. In the code editor sidebar, navigate to the Sections folder.
  5. Open the main-product.liquid file.

This main-product.liquid file contains the Liquid code that generates the product page layout and functionality. You can modify this file to customize the product page with your whatsapp button.

1 Like
6

Yes, I have used WATI to create whatapp widget, but not by using WhatsApp Chat & Abandoned Cart app, but i used online code creation tool from here

And also used option to include page title and URL

“messageText”:“Hello, %0A I have a question about {{page_title}}{{page_link}}”,

2.png
2.png1110×704 39.1 KB

But this code in not adding page title and page link in chat.

Here is code that I pated in theme.liquid

3.png
3.png1195×923 73.8 KB

7

Hello @rzwahmed ,

Thank you for sharing your approach. It seems like you’ve followed the correct steps in setting up your WhatsApp widget using WATI. However, if you’re encountering issues despite following the recommended approach, it’s best to reach out to the WATI team directly for further assistance.

Given that you’ve utilized WATI’s custom code creation tool and included specific options, the WATI team would be in the best position to provide you with tailored support and troubleshooting for your setup. They can offer insights and solutions specific to their platform, ensuring a more effective resolution to any issues you’re facing.

Hope this helps!

Regards,
Abhishek from Swym