WhatsApp button code for Shopify themes

Why the same answer works for Dawn, Sense, Refresh, Craft, Studio and Ride

Shopify's free themes are all built on the Online Store 2.0 architecture. They share one layout file, theme.liquid, that wraps every page, and they all support app embeds, the mechanism that lets an app add a floating element without touching your code. Sense, Refresh, Craft, Studio and Ride are variations of Dawn's codebase, so a button that works in Dawn works in them too.

That gives you two routes. Route A uses an app embed and needs no code. Route B is a snippet you paste once into theme.liquid, or into a Custom Liquid section if you only want it on certain templates. Both open the same wa.me chat link; the difference is what happens around it.

• Shopify Help Center: Extend your theme with apps (app embeds)
• shopify.dev: Theme layouts and theme.liquid

Route A: no code, with an app embed

This is the route we recommend for most stores, and it is the one covered step by step in our Dawn theme guide. Install WhatsApp Pilot, save your country code, number and default message in Settings, then open Online Store → Themes → Customize, click the App embeds icon and switch WhatsApp Pilot on. Save, and the button is live. The free plan shows it on the homepage; Pro shows it on product, collection, cart and other pages, with device visibility and the greeting tooltip.

The steps are identical on Sense, Refresh, Craft, Studio and Ride because the App embeds panel belongs to the theme editor, not to any particular theme. If you switch themes later, enable the embed again on the new theme; the settings in the app stay as they were.

Route B: the copy-paste snippet

Before you start, duplicate your theme from Online Store → Themes so you have a backup, as Shopify's own guide to editing theme code advises. Then open the code editor (the three-dot menu → Edit code), find layout/theme.liquid and scroll to the closing body tag near the bottom. Paste the lines below just above it, replace the example number with your own in international format (country code first, no plus sign, no spaces), and save.

Each line is kept short so it pastes cleanly. The attribute values use single quotes on purpose; Liquid and HTML accept them.

1. <a class='wa-float' href='https://wa.me/962790000000?text=Hi%2C%20I%20have%20a%20question%20about%20your%20store' target='_blank' rel='noopener'>Chat on WhatsApp</a>
2. <style>
3. .wa-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
4. .wa-float { background: #25D366; color: #fff; font: 600 15px/1 sans-serif; }
5. .wa-float { padding: 14px 18px; border-radius: 999px; text-decoration: none; }
6. .wa-float { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
7. .wa-float:hover { background: #1ebe5d; color: #fff; }
8. html[dir='rtl'] .wa-float { right: auto; left: 20px; }
9. @media (max-width: 749px) { .wa-float { bottom: 76px; right: 12px; } }
10. @media (max-width: 749px) { html[dir='rtl'] .wa-float { right: auto; left: 12px; } }
11. </style>

• Shopify Help Center: Editing theme code
• WhatsApp Help Center: How to use click to chat (wa.me links)

Setting the number, the prefilled text and the position

• Number: the digits after wa.me/ are your WhatsApp number in international format. A Jordanian mobile 079 000 0000 becomes 962790000000. Leave out the plus sign, the leading zero and any spaces.
• Prefilled text: everything after ?text= is the message the shopper sees before sending. It must be URL-encoded, so a space becomes %20 and a comma becomes %2C. The free link generator at /tools/whatsapp-link-generator on this site builds the whole URL for you, including the encoding.
• Position: bottom and right control the desktop offset. If your theme's cart drawer or a sticky add-to-cart bar overlaps the button, raise bottom or move the button to the left by swapping right for left.
• Mobile: the media query at 749px matches the breakpoint Dawn-family themes use. The larger bottom offset keeps the button above a sticky bar or a browser toolbar on phones. Adjust the number after testing on a real device.
• RTL stores: when your theme renders with dir='rtl', the html[dir='rtl'] rules mirror the button to the left. If your Arabic storefront does not set that attribute, delete the two rtl lines and set left instead of right directly.
• Only on some pages: paste the same snippet into a Custom Liquid section on the template you want (for example the product template) instead of theme.liquid. It then shows only where that section exists.

Snippet or app: what you give up with each

Theme-specific notes

• Dawn and Craft: the cart drawer opens from the right. Keep the button on the left, or raise it so it clears the checkout button.
• Sense and Refresh: both use a prominent sticky header and, on mobile, a sticky add-to-cart bar on product pages. Test a product page on a phone before you settle on the bottom offset.
• Studio and Ride: dark or high-contrast color schemes can make the default green look loud. Keep the WhatsApp green on the button itself and change only the hover shade if you must.
• Paid Online Store 2.0 themes: the same snippet works, but the mobile breakpoint may differ. Check the theme's CSS for its own media query width and match it.
• Checkout: neither route can place a button on the checkout pages. Shopify does not allow theme code or app embeds there.

Testing before you move on

1. Open the storefront on a desktop browser and confirm the button sits where you expect on the homepage, a product page and the cart.
2. Tap it on a phone. WhatsApp should open with your number and the prefilled text; if it does not, check the digits after wa.me/ first.
3. Send the test message to yourself and reply, so you know the hand-off works in both directions.
4. If you used the app, open Analytics after a day and check that taps are being counted. The snippet does not report anything, which is the main reason stores that want numbers move to the app later.