How to add an "order on whatsapp" button on product card?

Technical Q&A
, ,

Topic summary

A Shopify store owner seeks help adding an “order on WhatsApp” button to product cards on their homepage and collection pages. They already have this button working on individual product pages but want to extend it to collection listings.

Current Status:

  • The user successfully added a button to product cards using provided code
  • However, the button doesn’t properly open WhatsApp—it redirects to the product page instead
  • The working product page implementation was found via YouTube tutorials

Proposed Solution:
A community member shared custom code that:

  • Creates a WhatsApp link with pre-filled message text
  • Includes product title and URL in the inquiry
  • Uses Shopify Liquid variables ({{product.title}}, {{product.url}})

Outstanding Issue:
The implementation isn’t functioning correctly on collection pages—the WhatsApp link fails to trigger, suggesting possible JavaScript integration or code placement problems that need troubleshooting.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Dear Members, if anyone could help me learn how to add an “order on whatsapp” button on product card. I already have order on whatsapp button on product page. But I want to show it on home & Collection page in product card. My shopify store is LuxeLivngs

Kind Regards!!!

2

You have to put the JavaScript code on the collection listing page to enable “order on whatsapp” button.

3

Hi @Luxe_Livings

How did you add order on whatsapp on your product page?

4

If you could share the code, that would be of great help

5

Just search on youtube.

6

Hello @Luxe_Livings

The current WhatsApp button is coming from the APP?

You can add below custom code.


    [
        
        Order On WhatsApp](https://web.whatsapp . com/send?phone=+923245832938&&text=Hey, I like enquiry about the Product : {{ product.title }}. The product link is https://www.luxelivings.pk/{{ product.url }})

Thank you

7

I have added the button on product card, but it doesn’t open the whatsapp/ link provided in the code; rather it opens the product page.

Please check it here. https://luxelivings.pk/