Squadkin’s WhatsApp Chat Button documents an RTL layout for Arabic, Hebrew, and other right-to-left storefronts. Turn that layout on, then set the button’s corner and pixel offsets so the popup follows the same reading direction as the theme. You still write the Arabic or Hebrew greeting yourself. The catalog does not translate it.
A left-corner button and a left-aligned panel fight an RTL product page. Shoppers start at the right. A control parked on the far left, over a buy button that has also moved, is easy to miss and easy to hit by accident. The fix is the documented layout plus a test on the real theme, on a phone, not a screenshot of an LTR demo store.
What RTL changes
RTL layout support is a storefront setting for the widget. The button is still a theme app embed, drawn by a custom element in a shadow DOM. Theme CSS does not flow into that shadow DOM automatically, which is why an RTL theme can look correct everywhere except the chat panel. The app’s own RTL switch is what lines the panel up. A custom CSS field can add rules inside the shadow DOM if a spacing detail is still wrong after the switch.
The chat itself, once WhatsApp opens, is WhatsApp’s interface. This app does not restyle that thread. Your job ends at the storefront button, the popup, and the link.
The same catalog includes a round logo, a pill with text and an image, and a custom uploaded logo. On an RTL shop, prefer live text for any word on the pill. Words baked into an image will not flip or translate when you change the greeting. A custom logo that contains Arabic or Hebrew lettering has to be designed for that direction from the start.
Position and offsets
Four positions are documented: bottom left, bottom right, middle left, and middle right, with offsets, and a size of small, medium, or large. On an RTL theme the start edge is the right. Try the bottom right first, then move the button if it covers the buy bar. There is no universal corner. The phone test decides.
- Bottom right: often the first try on RTL pages, then check the buy button.
- Bottom left: use it when the right edge is already full.
- Middle positions: useful on long pages, risky next to a sticky header. Scroll the real template before you keep them.
- Offsets: move the button in pixels so it does not cover quantity, variant, or a cookie bar.
Device rules can show the button on mobile, on desktop, or both. RTL bugs show up first on a phone, where the column is narrow. Do not approve the layout from a wide desktop preview alone. Page rules can include product templates and exclude a page that should stay quiet. Those rules are about where the widget exists. They do not set the direction.
Greeting alignment
Popup mode shows a header, a canned greeting bubble, and a text area pre-filled with your default message. With RTL on, that stack should read in the same direction as the product title. Send still builds the WhatsApp link from the text in the box. Direct-link mode skips the panel. If you rely on the panel to show an Arabic or Hebrew sentence before the shopper leaves, use popup mode so they can see it.
The only documented variable in the default message is {{ current_page_url }}. A URL is a left-to-right string even on an RTL page. Put it where it will not smash the greeting into an unreadable line. Many merchants place a short local sentence first and let the URL follow. Read it on a phone. If the URL breaks the sentence, shorten the words rather than inventing a second variable. There is no product-title token.
Agent rows, if you use them, need the same care. Each agent has a number, a name, an avatar, and a greeting, optionally limited to page types. Write the names in the language shoppers scan. A Latin-only name is fine when that is the person’s public name. A role such as sales or delivery should be in the storefront language. The shopper chooses the row. The app does not assign the chat, and RTL does not add a shared inbox.
What you still translate yourself
The catalog does not document automatic translation into Arabic or Hebrew. Button label, greeting, offline text, consent checkbox, and agent names are yours. An English sentence inside an Arabic theme tells the shopper the chat was an afterthought. Have a native reader approve every string, including the offline line.
Business hours are per weekday, with one timezone. Outside those hours the popup text changes and the button dims. The button stays on the page. Translate the offline sentence, and name the timezone in words the shopper understands. The RTL switch does not change the clock. A consent checkbox disables Send and agent links until it is checked, and the tick is stored in the browser. Translate that line too. It is not a consent archive, in any language.
Custom CSS inside the shadow DOM can fix a margin. It should not be the place you paste a machine translation. Keep copy in the text fields so the next editor can find it.
A test on one product page
Pick one product on the live RTL theme. Use a phone set to the storefront language if you can.
- Confirm the product title and the popup read from the same side, and that the button does not cover add to cart.
- Read the greeting, the button label, and the consent line. If you do not read the language, wait for someone who does.
- Tap Send and confirm WhatsApp opens the correct number with that text, including the page URL if you used the variable.
- If agents are listed, tap each row and confirm the number and the greeting match the person.
- Reload outside the weekday window. The button should remain, dimmed, with the translated offline text.
Check desktop only after the phone is clean. A wide layout can hide an overlap that the phone will show every day. Analytics can tell you later whether people send. They cannot tell you whether the Arabic was grammatical. Clicks, popup opens, and send taps are the documented counts, not a language review.
Questions about RTL
Does the app translate the greeting into Arabic?
No. RTL layout changes direction. You write the Arabic or Hebrew greeting, the label, and the offline text. A native reader should check them.
Can I load a custom icon?
Yes. A custom uploaded logo is one of the three documented styles, with the round logo and the pill. If the icon contains words, design those words for right-to-left reading. Live pill text is easier to edit later.
Will theme CSS flip the button for me?
Do not rely on it. The widget renders in a shadow DOM. Turn on the app’s RTL layout and confirm the panel on the real theme.
The layout control is described on the WhatsApp Chat Button page. Install WhatsApp Chat Button when you can turn RTL on and supply the greeting in the storefront language.