User Guide

Search limit to:






WhatsApp Button

by Admin on Oct 22, 2025

WhatsApp button section lets merchants display a floating chat button, allowing customers to quickly reach out via WhatsApp.

1. Section Components

Section WhatsApp button Add a WhatsApp chat button to your store for instant customer contact.

2. Location & Setup

To add & set up the WhatsApp button section:

  • Open the Shopify Theme Editor (Online store > Themes > Customize)
  • Decide where you want to place the new section. It’s recommended to add it under the Footer or Overlay group (if supported by your theme) to display the WhatsApp button on pages with a footer.
  • Click “Add Section”.
  • Select “OT: WhatsApp button”.

3. Highlight Features

  • Quick customer communication via WhatsApp.
  • Customizable button position, icon, and colors.
  • Editable welcome message and chat label.
  • Responsive design for both desktop and mobile.

4. Common Use Cases

🤔 How to set up WhatsApp button?

Here's how to set up a WhatsApp button on your site:

STEP 1: Add the WhatsApp button section to your desired location.

STEP 2: Set up the button

Click on the WhatsApp button section to open its settings panel and:

  • Enter your WhatsApp Phone number with the country code.
  • Choose your preferred WhatsApp Icon style (e.g., Icon 1).
  • Adjust the icon size using the slider (default: 50px).

STEP 3: Set up WhatsApp welcome message

At Welcome message setting group: 

  • Enter the welcome text that appears when customers open the chat box.
  • Adjust the roundness of the message box corners (in pixels).
  • Set the label that appears on the chat button.
  • Choose a font for your chat text and adjust its size.

STEP 4: Click “Save” when done.

🤔 How to custom the Whatsapp button style? 

Want to customize the style of the WhatsApp button? Here's how:

STEP 1: Click on the WhatsApp button section to open its settings panel.

STEP 2: Customize position of the button

At Desktop/Mobile settings group, you can:

  • Choose Position whether to display the button on the Left or Right side of the screen.
  • Vertical position: Adjust how high or low the button appears (default: 2%).

STEP 3: Choose the button style

Choose the button Style: showing icon only/icon with Welcome message/icon with Chat with us label...

STEP 4: Customize colors

At Colors settings group, you can adjust colors for button elements:

  • Icon foreground
  • Icon background
  • Background
  • Text
  • Text link

STEP 5: Click “Save” when done.

5. Layout Recommendations

If you want support to set up the layouts, don't hesitate to chat with us!

📂 WhatsApp button: Icon only

Check out demo here.

📂 WhatsApp button: Included Welcome message

Check out demo here.

📂 WhatsApp button: Included Chat with us Style 1

Check out demo here.

📂 WhatsApp button: Included Chat with us Style 2

Check out demo here.

📂 WhatsApp button: Included Chat with us Style 3

Check out demo here.

📂 WhatsApp button: Included Chat with us Style 4

Check out demo here.

6. Support Information

Need help? Contact our support team at  Omni Themes Support .