Order on whatsapp Button at product page bellow add to cart button using Booster Theme

Store Design
,
1

I want to use “Order At WhatsApp” button at my product page to increase order ratio, I tried to add the snipped code in product.liqued section but useless. I’m using Booster theme, please help me in this case!
I attached the image of that button which i want at my store.
Thanks

1 Like
2

@sufyanecommerce Hello please Following Steps

Create a WhatsApp Button Image : First, create an image for your “Order At WhatsApp” button if you haven’t already. You can use graphic design software or online tools to create a button image that includes your WhatsApp number or a WhatsApp logo.

Upload the Button Image : Upload the button image to your Shopify store. You can do this by going to your Shopify admin dashboard:

  1. Go to “Settings.”
  2. Click on “Files.”
  3. Click on “Upload files” and upload your button image.

Remember the URL of the uploaded image as you’ll need it in the next step.

Edit the Product.liquid Template :

Now, you need to edit the product.liquid template in your Booster theme to add the “Order At WhatsApp” button. Follow these steps:

  1. In your Shopify admin, go to “Online Store” and then click on “Themes.”

  2. Find the Booster theme and click on “Actions” > “Edit code.”

  3. In the left-hand sidebar, under “Sections,” click on “product.liquid.”

  4. Look for the code that represents your product details and description. You can typically find this code within an HTML

    element.

  5. Add the following HTML code where you want the “Order At WhatsApp” button to appear:

[
  
](https://api.whatsapp.com/send?phone=YOUR_PHONE_NUMBER)

Replace YOUR_PHONE_NUMBER with your WhatsApp number (including the country code but without any spaces or special characters) and replace URL_TO_YOUR_BUTTON_IMAGE with the URL of the button image you uploaded in Step 2.

Save the changes.

3

Sure in customization of product page template, you can paste this code on custom.liquid section

Code for product page:

{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %} {% capture product_name %}{{ product.title | url_escape }}{% endcapture %} Order on WhatsApp

Note: change phone no on above code and adjust section according to your adjustment

For styling the above button, paste this below code on theme settings css options block and save it .

Code for Theme Settings page:

.btn--buy-on-whatsapp { display: block; margin-top: 20px; padding: 12px 30px; font-size: 16px; line-height: 1.5; color: #fff; background-color: #25d366; border: 1px solid #4e4e4e; border-radius: 0px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; } .btn--buy-on-whatsapp:hover { background-color: #fff; color: #4e4e4e; border-radius: 10px; }