I Want To Fix "Order On Whatsapp" Text

Store Design
, , , , , , , ,

Topic summary

A user is experiencing display issues with a custom “Order on WhatsApp” button added to their Shopify store via custom Liquid code. The original code appears corrupted or improperly formatted, with reversed/garbled HTML and CSS syntax.

Problem Details:

  • The WhatsApp integration button is not rendering correctly on the site
  • The provided code contains reversed text and malformed HTML tags
  • The implementation uses a custom Liquid block with inline styling and a WhatsApp API link

Solution Provided:
Another user offered corrected code that includes:

  • Properly structured HTML with correct tag syntax
  • A WhatsApp icon image reference
  • Formatted styling for the button (background color, padding, text alignment)
  • Dynamic Liquid variables for product title, URL, and handle
  • A pre-filled message template for WhatsApp

The helper expressed hope that the corrected code would resolve the display issue.

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

I Had Added Order on Whatsapp to my site but its not showing perfectfly… I Had written the below code in custom liquid.. Can Anyone Fix This?

URL : https://d-r-i-p-u-p.myshopify.com/

Pass : Drapex

Screenshot 2024-07-13 185534.png
Screenshot 2024-07-13 185534.png399×825 26.1 KB

<a href="https://api.what#app.com/send?phone=+919999999999&text=Hi,
 
%20I%20want%20to%20order%20this%20product:%20{{ product.title }}
 
%20%20{{ shop.url }}
 
%2Fproducts%2F{{ product.handle }}" style="text-decoration:none;">
 
 <div style="margin-bottom:10px;
 
padding: 9px; text-align: center; background-color: #1EA651;height:
 
44px;color:white; ">
 
 <img src="https://cdn.shopify.com/s/files/1/0839/7570/0799/files/whatsapp-6273368_640.png?v=1698295583" width="25px" style="vertical-align:middle; ">
 
Order On <span style="font-weight: bold;">WhatsApp</span>
 
 </div>
 
 </a>
2

Hi @Emiway
Please try this code

[
 
 

 
 
![whatsapp-6273368_640.png?v=1698295583|635x640](upload://hbYidlzIxsUPNNzoDx7TxKlSHYa.png)

 
Order On WhatsApp
 
 

 
 ](https://api.what#app.com/send?phone=+919999999999&text=Hi,
 
%20I%20want%20to%20order%20this%20product:%20{{ product.title }}
 
%20%20{{ shop.url }}
 
%2Fproducts%2F{{ product.handle }})

I hope, it will help you

Thanks!