Add "Contact Us" button on product page

⚠️ Kindly take note :

Above all code editing, you will need to re-edit the code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
These steps require to edit coding file that found in the new theme, example: Essence, Muse, Koji & etc.

1. Add a new "Contact Us" button on product page (Whatsapp)

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > main-product.liquid > look for {% app_snippet 'product/button' %} around line 178

Step 2 : Paste this code above

<a href="https://wa.me/6012345678?text={{shop.url}}{{ product.url | within: collection | escape }}" target="_blank" class="btn btn-whatsapp">
Whatsapp us 
</a>

**💡 Tips : **

Remember to change the phone number in the code given above (0123456789 is just for testing)
May remove target="_blank" if you do not want it to be redirect to a new page
You can change the "Whatsapp Us" button name to other words to your own preferences

If want to show "Contact Us button" only when product sold out, may add {% if product.selected_or_first_available_variant.available == false %} before code above and {% endif %} after code. Sample as below:

Step 3 : Save

Here is the result :

2. Add a new "Contact Us" button on product page (Contact Form/Contact Form Plus)

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > main-product.liquid > look for {% app_snippet 'product/button' %} around line 127

Step 2 : Paste this code above

<a id="contactUsBtn" href="https://yourdomainname/apps/contact-form-plus" target="_blank" class="btn btn-contactus">
Contact us 
</a>

**💡 Tips : **

You can change the "Contact Us" button name to other words to your own preferences
May remove target="_blank" if you do not want it to be redirect to a new page
Remember to change the Contact Form OR Contact Form Plus link to your own Contact Form OR Contact Form Plus link.
For yourdomainname online store URL, suggest to use easy.co domain instead of your custom domain.

For example :
Contact Form : https://yourdomainname/a/contact-form
Contact Form Plus : https://yourdomain/apps/contact-form-plus

If want to show "Contact Us button" only when product sold out, may add {% if product.selected_or_first_available_variant.available == false %} before code above and {% endif %} after code. Sample as below:

Step 3 : Save

Result :

3. Remove Add To Cart button and replace it with "Contact Us" button

📌 Note : You can follow the steps here if you only want to have the "Contact Us" button on product page.

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > main-product.liquid > look for AddToCart Text around line 154

Step 2 : Remove the whole code

Step 3 : Paste the code

For Whatsapp code :

<a href="https://wa.me/6012345678?text={{shop.url}}{{ product.url | within: collection | escape }}" target="_blank" class="btn btn-whatsapp">
Whatsapp us 
</a>

For Contact Form code :

<a id="contactUsBtn" href="https://yourdomainname/apps/contact-form-plus" target="_blank" class="btn btn-contactus">
Contact us 
</a>

💡 Tips :

You can change the "Whatsapp Us" button name to other words to your own preferences
You're able to add other links like pages, articles etc. for the button. Just change the URL will do
May remove target="_blank" if you do not want it to be redirect to a new page
Remember to change the phone number in the WhatsApp code
Remember to change the Contact Form OR Contact Form Plus link to your own Contact Form OR Contact Form Plus link
For better experience, disable BUY NOW button from apps
For example :
Contact Form : https://yourdomainname/a/contact-form
Contact Form Plus : https://yourdomainname/apps/contact-form-plus

Result (with only Whatsapp Us button)

4. Apply different color and hover effect on "Contact Us" button (Whatsapp)

**📌Note: **

This will only apply to the Contact Us button using guide No. 1
btn-whatsapp = whatsapp button
btn-whatsapp:hover = when mouse hover over the whatsapp button

Step 1: Go to Edit Source > look for section-main-product.css > Search for:

.product-form__buttons .btn{

  display: flex;

  width: 100%;
}

and then place these code below it:

.product-form__buttons .btn.btn-whatsapp {background-color: #25D366;color: #ffffff;}
.product-form__buttons .btn.btn-whatsapp:hover {background-color: black;}

Result :

Step 2: Change the color code #25D366 to change button background color > Change "Black" to the hover color code you need (Color picker)|||

Updated on: 23/10/2023

Was this article helpful?