Add "Contact Us" button on product page (2020 themes)

⚠️ 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 theme come before Candy theme, example: X-force, Prisme, DOUX, & etc. For 2022 themes, may refer this link

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

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

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 > 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

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 > product.liquid > look for AddToCartText around line 127

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

Step 4 : Remove the code for mobile button on line 147

Step 5 : and paste the code from Step 3

Step 6 : Save

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
If you manually added background color coding in product.liquid. Kindly proceed to Admin Panel > Channels > Online Store > Edit Source > Look for product.liquid > Search "AddToCartText" using Ctrl + F > Remove "style="background-color: #000000;"

Step 1: Go to Edit Source > look for theme.scss > Scroll to the bottom and paste these code.

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

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: 04/11/2022

Was this article helpful?