Get a free audit

WhatsApp and chat

Last updated Theme version 1.0.0

Press / to search. Use the arrow keys and Enter to open a result.

All guides
On this page

In many markets, shoppers prefer to ask a question or place an order in a chat. Rawnaq builds this in, with no app and no monthly fee: a floating chat button, a WhatsApp order button on products, an Order on WhatsApp button in the cart, and WhatsApp links in the header, footer and mobile tab bar.

Everything starts with one setting, your WhatsApp number.

Add your WhatsApp number

  1. Open the theme editor (Online Store > Themes > Customize) and click the paintbrush for Theme settings.
  2. Select Theme settings > Chat and contact.
  3. In WhatsApp number, type your number in international format, digits only. Start with the country code, with no plus sign, spaces or dashes. For example, a UAE mobile number 050 123 4567 becomes 971501234567.
  4. Save.

Good to know

  • Remove the leading zero of the local number when you add the country code. 050 becomes 50 after 971.
  • Use the number of the WhatsApp account that your team answers. A business account on the WhatsApp Business app works well.
  • If you type a plus sign, spaces or brackets, the theme removes them for you, but digits only is the correct habit.
  • Test the link on a phone before you promote it.

Floating chat button

A round button that stays in a corner of every page and opens a chat.

  1. In Theme settings > Chat and contact, set Floating chat button to one of: None, WhatsApp, Messenger, Telegram or Phone call.
  2. Choose where it sits with Chat button position: End side (right in English, left in Arabic) or Start side.
  3. Fill in what the chosen button needs:
    • WhatsApp uses WhatsApp number.
    • Messenger uses Messenger or Telegram username. Enter your Facebook page username, the part after m.me/.
    • Telegram uses the Telegram link you pasted in Theme settings > Social media.
    • Phone call uses Phone number, in the same group.
  4. Save and check the button in the preview. If the button is missing, the field it needs is empty.

Good to know

  • The button color for WhatsApp is set in Theme settings > Colors > WhatsApp buttons.
  • On phones, the Mobile tab bar can include a WhatsApp chat tab. Use the tab bar or the floating button, not both, so the screen is not crowded. See Header and navigation.
  • Only one floating button can be active at a time. For several channels, add the others as links in the footer.

WhatsApp order buttons

On the product page

  1. Open a product in the theme editor and select the Buy buttons block.
  2. Turn on Show WhatsApp order button.
  3. Save. Shoppers see a WhatsApp button under the add to cart button. It opens a chat with a message that includes the product name, the chosen size or color, and a link to the product.

The WhatsApp button is styled in its own green so that asking about a product never looks like buying it.

In the cart

  1. Open Theme settings > Cart.
  2. Turn on Show "Order on WhatsApp" in the cart.
  3. Save. The cart shows an Order on WhatsApp button. It opens a chat with a message that lists the items in the cart.

Other places where WhatsApp appears

  • Header: turn on Show WhatsApp contact in the Header section to show a WhatsApp link with your phone number.
  • Contact page: the Contact section has Show WhatsApp link.
  • Footer: the Contact block shows the WhatsApp number from Theme settings.
  • Announcement bar: a Message block can use the WhatsApp Icon.
  • Mobile tab bar: choose the WhatsApp chat action for a tab.

Messages

The first line of each chat message is text from the theme. You can reword it for every language.

  1. In Shopify admin, go to Online Store > Themes.
  2. Select the three dot menu next to Rawnaq, then Edit default theme content.
  3. Use the search box to find the message, for example "would like to" or "question about your store". The entries are in the whatsapp and cart groups.
  4. Change the entries:
    • The default message for the floating chat button and header link, for example "Hello, I have a question about your store."
    • The product message, for example "Hello, I would like to order:". The theme adds the product name, options and link after it.
    • The cart message, for example "Hello, I would like to place this order:". The theme adds the cart items after it.
  5. Save. Repeat for Arabic or other languages if you offer them. See Languages and right-to-left.

Handling orders you receive on WhatsApp

An order started on WhatsApp is not yet an order in Shopify. A simple routine:

  1. Reply quickly and confirm the items, size, address and payment method.
  2. Create the order in Shopify admin with Orders > Create order, so stock, shipping and reports stay accurate.
  3. Send the customer a payment link from the draft order if they pay online.

Good to know

  • WhatsApp opens the app on phones and WhatsApp Web on computers.
  • Customers need WhatsApp to use the buttons. For other customers, keep your email and phone number visible too.
  • Messages are sent from the customer's own phone. Nothing is stored by the theme.
  • Use WhatsApp responsibly. Always have a customer's agreement before you send them promotions.

Still stuck? Contact support