> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# 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.
###### In this article :
1. [Add a new "Contact Us" button on product page (Whatsapp)](#1-1-add-a-new-quotcontact-usquot-button-on-product-page-whatsapp)
2. [Add a new "Contact Us" button on product page (Contact Form/Contact Form Plus)](#1-2-add-a-new-quotcontact-usquot-button-on-product-page-contact-form-contact-form-plus)
3. [Remove Add To Cart button and replace it with "Contact Us" button](#1-3-remove-add-to-cart-button-and-replace-it-with-quotcontact-usquot-button)
4. [Apply different color and hover effect on "Contact Us" button (Whatsapp)](#1-4-apply-different-color-and-hover-effect-on-quotcontact-usquot-button-whatsapp)
---
# 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
```html
Whatsapp us
```
| **π‘ 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
```
Contact us
```
**π‘ 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](/en/article/contact-form-1wnaavq/) OR [Contact Form Plus](/en/article/contact-form-plus-5agd9h/) 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 :**
```
Whatsapp us
```
**For Contact Form code :**
```
Contact us
```
**π‘ 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](/en/article/contact-form-1wnaavq/) OR [Contact Form Plus](/en/article/contact-form-plus-5agd9h/) link
* For better experience, disable ** [BUY NOW](/en/article/install-buy-now-button-app-1pxsb6x/)** 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:
```html
.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](https://htmlcolors.com/google-color-picker))|||