Beacon Messenger

How to add a WhatsApp chat button to your Shopify store (2026)

By the Beacon Wave Studio team · Published · 7 min read

Three ways to put a WhatsApp button on a Shopify storefront, what each one costs in page speed and reliability, and how to set one up with multiple agents and business hours in about ten minutes.

A WhatsApp button is the lowest-friction way to let shoppers ask a question before they buy: they already have the app, they already trust it, and the conversation stays on their phone after they leave your site. On Shopify there are three ways to add one, and they are not equal.

Option 1: a plain wa.me link in your theme

The simplest approach is a link to https://wa.me/<number>?text=<message> added through the theme editor as a button or in the footer. It costs nothing and loads instantly. The downsides are that it is one number only, it cannot show whether anyone is online, and the prefilled message does not know which product the shopper was looking at, so your first reply is usually "which one do you mean?".

Option 2: a script-tag widget

Many chat apps inject a JavaScript file into every page through Shopify's ScriptTag API or an Asset API edit. The widget is flexible, but the button only appears after the external script downloads and runs, it adds a third-party request to every page view, and if the vendor's servers are slow or down the button disappears. Shopify has also deprecated Asset API theme edits for public apps, which is why newer apps should not work this way.

Option 3: a theme app extension (app embed)

Theme app extensions are Shopify's supported way for apps to add storefront UI. The app ships a Liquid block that your theme renders on Shopify's servers, and the merchant switches it on from the theme editor under App embeds. The button HTML arrives with the page, the settings live in your shop's metafields, and nothing depends on a third-party server at page load. This is how Beacon Messenger's chat button works.

Step by step with Beacon Messenger

  1. Install Beacon Messenger from the Shopify App Store. The Free plan includes the chat button with one agent.
  2. Open the app and go to Chat button. Add each agent: name, role (for example Sales or Order support), WhatsApp number in international format, an avatar, and the weekly hours they are available. Hours use your store's time zone.
  3. Write the greeting shoppers see when the panel opens, and each agent's prefilled message. The placeholders {page_title}, {page_url} and {shop_name} are filled in from the page the shopper is on.
  4. Save. Agents, hours and messages are written to your shop's metafields, which is what the theme reads.
  5. Click Open theme editor. Shopify opens your live theme with the Beacon Messenger app embed; toggle it on, choose position, size, colours, offsets and whether to show a label on mobile, then click Save in the theme editor.
  6. Visit your storefront. The button appears in the corner you chose; tap it to see the agent list with online or offline states.

What shoppers see

Tapping the button opens a small panel with your greeting and each agent's name, role and availability. An agent inside their business hours shows as "Available now"; outside them they show as away, and when nobody is online the panel shows your offline text instead of the greeting. Tapping an agent opens WhatsApp (the app on mobile, WhatsApp Web on desktop) with a message that already includes the page title and URL, so your team can answer with context on the first reply.

Checklist before you go live

  • Use full international numbers with country code and no spaces or dashes.
  • Set realistic hours. A button that promises "Available now" at 3 am erodes trust faster than an honest away state with a clear offline message.
  • Add a Share on WhatsApp block to product pages if you sell items people buy for each other; Beacon Messenger includes one.
  • Check the button on a real phone. Bottom-right can cover the Add to cart bar on some themes; move it or add a bottom offset.

More guides