Skip to main content
The WhatsApp button on the product page lets a shopper start a chat about the product they are viewing. Shopify merchants can add the button with no code, directly in the theme editor. Merchants on other platforms, and merchants who already installed the code snippet, can use the code install below instead.

Add the button with no code

This method needs a Shopify store on an Online Store 2.0 theme. App blocks work only on this theme type.
1

Open the theme editor

In TextYess, click on “Growth Tool Kit” in the menu. On the “WhatsApp button on product page” card, click “Set up the button”. This opens the “Product page button” screen. Click the “Open Shopify Theme Editor” button. This opens Shopify’s theme editor on your product template, so you do not need to find it by hand.
2

Add the WhatsApp Button block

Shopify opens your product template with the “TextYess WhatsApp Button” block already in the main section. The block is not saved yet. Drag it under the “Add to cart” button. If the block is not there, find the “Apps” section on the product template and drag “TextYess WhatsApp Button” into the section.
The block name “TextYess WhatsApp Button” stays in English. Shopify never translates it. An Italian or French theme editor still shows this exact name.
3

Save your changes

Click “Save”.

What the theme editor controls

The theme editor controls only the position of the button on the page. TextYess controls the button label, the colors, the message, and the language. To change these, go to “Growth Tool Kit” in TextYess. Click “Set up the button” on the “WhatsApp button on product page” card. The default message already names the product a shopper is viewing. If you write your own message, click “Insert product name” to add it. TextYess fills in the correct product name on every product page. TextYess translates the message into 34 supported languages. When a store publishes a language outside this list, the button shows the merchant’s original wording in that language instead of a translation. You write one message and review no translations.
The button does not show on a page with no product. It does not show when no WhatsApp number is connected to TextYess. It does not show before TextYess sends the button setup to your store.

Install with a code snippet

Use this method if your store is not on Shopify, or if you already installed the button with a code snippet.
1

Customize your widget appearance

In TextYess, click on “Growth Tool Kit” in the menu. On the “WhatsApp button on product page” card, click “Set up the button”. This opens the “Product page button” screen. Set the colors, the “Button label” and the “Default message”, then click “Save”.
2

Get the code snippet

Click “Save” or “Install with code”. In the window that opens, click “Copy snippet”.
The snippet does not know which product a page shows. If your message uses “Insert product name”, the snippet writes a general phrase instead, for example “this product”.
The code will look something like this:
3

Go to the Online store section

Once inside your store click on “Sales channels” from the menu on the left.
A pop-up will appear at the top. From there click on “Online store”
4

Open the Theme editor

Opening the theme editor is very simple. Just click on the three dots of the theme you want to update. Then click on “Edit code”.
Before proceeding we strongly recommend that you make backups of your current theme. To do this, click on the three dots, then click on “Duplicate” and/or “Download theme file.”
5

Edit the file with call to actions on the product page

This may be the most complex part. In fact, each theme handles the product page and related CTAs differently. Here are some of the possible files where you will find the CTAs where to insert your widget:
  • main-product.liquid
  • buy-buttons.liquid
If you have difficulty finding the CTAs in the files, press cmd + F on Mac or ctrl + F on Windows. Then type cart or buy to find the CTAs within the search.
Once you find the code related to the CTAs, paste the code snippet you generated from TextYess (see step “Get the code snippet”). Remember that if necessary you can create new lines by pressing the enter key in order to put space between the TextYess’s code snippet and the CTAs.
We are almost finished!
Now click the “Save” button in the upper right corner, then click the “Preview store” button to make sure the widget is displayed correctly.
Congratulations, we are live! 🥳