Use the widget generator below to create your WhatsApp Chat widget or button for Shopify in just 5 minutes or less. Select a template and click the “Continue with this template” button to get started.
Want to add your WhatsApp Chat widget in Shopify and others? No problem.
How to use the Shopify WhatsApp Chat widget generator
- Choose a template from 10 WhatsApp chat widget designs. These are responsive, and you can customize the widget without coding. Once you have selected a preferred design, click the “Continue with this template” button.
- Add your WhatsApp phone number (Make sure to remove [+] or [00] before your phone number and add your country code) or the shortlink (if you use a WhatsApp Business Account)
- You can customize the WhatsApp Chat widget for your Shopify store by editing the chat bubble, chat header, and welcome message (you can add links and custom styles).
- You can set the WhatsApp Live Chat widget’s display conditions and open chat triggers. You can also set the chat widget’s schedule (open and closed days and hours).
- You can specify whether you want a WhatsApp button for your Shopify website or display the WhatsApp chat widget as a floating widget. It is under the ‘Position’ section of Settings. Select Embed Bubble for the WhatsApp chat button, which is embedded inline, and floating bubble for a floating WhatsApp chat widget.
- Under the ‘Appearance’ section, you can change the appearance of your WhatsApp chat widget to align with your website’s theme and color palette.
- Once you have finished designing the WhatsApp Chat widget, click on the “Add to website for free” button and sign up on the following page to save your widget.
- Get the embed code and use it on your Shopify store.
How to add WhatsApp Chat widget to Shopify
You can easily embed the WhatsApp Chat widget into your Shopify website. The steps vary depending on the type of widget. Here’s how:
Embedding WhatsApp Chat Button on a specific page
The following steps outline how to add a WhatsApp chat button to your Shopify website using the “Custom Liquid” section in the Shopify Editor.
- Open your website’s visual editor: Log in to your Shopify admin panel and go to Sales Channels → Online Store:
Click the Customize button:
- Add Custom Liquid section to the target page: When you go to visual editor, the home page is opened by default. To select another page where you want to embed WhatsApp button on Shopify, find it in the dropdown list at the top of the page.
To install the widget, click Add Section:
Then choose Custom Liquid from the list:
- Paste the installation code: Paste the widget installation code to the Custom Liquid field. You can also change the Color scheme and set Top/Bottom paddings if needed. After this, Save the changes:
- Save your changes and preview the widget on your Shopify page.
Adding a floating WhatsApp Chat widget to entire Shopify website
To add the WhatsApp Chat widget to your entire Shopify website, you need to place the code before the closing body tag (</body>) or footer of your store. It can be through a Shopify app or by manually editing theme code.
Following is how to add WhatsApp widget code to Shopify by editing code.
In your Online Store, go to your theme and select Actions.
Click Edit code to access the theme files.
Open the Layout folder, then theme.liquid.
In this file, look for the closing body tag: </body>
Once you find it, insert the embed code just before it.
In the WhatsApp widget generator’s ‘Chat Display Settings,’ you can manage the widget’s visibility by specifying the pages, times, and devices on which the HTML WhatsApp widget should appear on your website.
The best part is you can display your WhatsApp widget on multiple websites regardless of whether they are made on Shopify.
How to Manage Your WhatsApp Chat Widget
Once you have created your embeddable WhatsApp Chat button for Shopify, you can easily manage it on your account. In your dashboard, search for “WhatsApp Chat” app under list of apps. As you can see from the following screenshot, you can create more WhatsApp Chat widgets, edit existing ones, and get HTML embed code.
