The Shopify RTL checklist: 8 things that must actually be right-to-left
Tarz guides · Published 9 August 2026
Real RTL support on Shopify means eight things: direction set from the locale, layout in logical CSS rather than an override file, prices and codes bidi-isolated, Arabic typography rules, correct icon mirroring, motion that follows the reading direction, the right numerals, and mixed Arabic–Latin content that survives in both directions.
Every check runs in a normal browser on your own store today — no code required. A failed check shows where your Shopify RTL support is not working, and usually why the Arabic layout looks broken.
No Arabic on your store yet? Shopify supports it as a storefront language: add it under Settings → Languages and translate a few strings with Shopify’s free Translate & Adapt app. Checkout is translated by Shopify itself; everything before it is your theme’s job.
The checklist
- Direction comes from the locale — the whole document flips, not just the text.
- The layout was built right-to-left, not patched — no straggler components.
- Prices, codes and phone numbers read correctly.
- Arabic letters stay connected.
- Icons mirror only when they should.
- Motion follows the reading direction.
- Numerals follow the regional convention.
- Mixed Arabic–Latin content survives in both directions.
1. Switch to Arabic — does the whole page flip, or just the text?
Some themes flip direction in CSS alone. The boxes move, but the browser’s bidirectional text engine never switches on, because dir was never set on the document. The symptoms: punctuation landing at the wrong end of sentences, mixed Arabic–Latin strings resolving in the wrong order, the cursor starting on the wrong side of the search box.
Check on a desktop browser, storefront in Arabic. Two tells: a genuinely right-to-left document moves the vertical scrollbar to the left edge on most desktops, and the cursor in the search field starts at the right. Right-aligned text that fails both tells is cosmetic direction.
In Tarz: dir is set on the document from the storefront locale, so direction follows the active language — there is no RTL switch to configure.
2. Click through every template — did anything stay left-to-right?
The common approach to RTL is an override stylesheet that reverses physical CSS after the fact: margin-left becomes margin-right, hundreds of rules deep. A missed rule throws no error — it just leaves that component left-to-right forever. The result is stragglers: a sale badge pinned to the wrong corner, a dropdown opening off-screen, one section stubbornly left-aligned while everything around it flipped.
Walk home → collection → product → cart → search in Arabic, hunting for the element that did not move. A mostly-mirrored layout with stragglers is an override stylesheet at work. Repeat after every theme update — each one can add a new unmirrored rule.
In Tarz: every rule is authored in CSS logical properties (margin-inline-start, inset-inline-end); no rtl.css file exists, and the build fails if a physical property is committed.
3. Look at a price — does it read backwards?
Digits, currency symbols and punctuation have no direction of their own; inside Arabic text the browser rearranges them by context. Without deliberate isolation, prices read backwards or the currency jumps to the wrong side, phone numbers scramble, and discount codes garble exactly where trust matters most.
Open any product page in Arabic and read the price aloud — rendered correctly it looks like 349.00 ر.س, digits intact, currency where the region expects it. Then your footer phone number, an SKU, and a discount code in the cart.
In Tarz: every inherently left-to-right string — prices, SKUs, coupon codes, phone numbers, countdown digits — sits in its own bidi isolation island and reads correctly wherever it lands.
4. Do the Arabic letters connect?
Arabic is a connected script. Latin letter-spacing pulls the joins apart — the single most visible tell of a Latin-first theme. Arabic has no italic — an italicised element is just skewed glyphs — and line-heights tuned for Latin x-heights clip the dots and marks around the letters.
Check your headings, buttons and product cards in Arabic: the letters should join, nothing should slant, and nothing around the letterforms should be clipped. A heading that looks like beads on a string is Latin tracking applied to Arabic script.
In Tarz: an Arabic type system — letter-spacing locked to zero in Arabic contexts, no faux italics, script-aware base size, and a library of 53 licence-audited Arabic families of which only the ones you select ever load.
5. Check the arrows — then check the search icon
Icons fail in two opposite ways. Under-mirroring leaves arrows pointing the Latin way: a “next” arrow pointing against the reading flow, a back arrow pointing forward. Over-mirroring is a blanket flip — a mirrored search magnifier or a backwards tick reads as a glitch, not a translation.
In Arabic, carousel and next/back arrows should point with the reading flow; search, tick, star and cart icons should look exactly as they do in English.
In Tarz: one icon component carries the policy — directional icons (arrows, carets, back, send) mirror in RTL; symmetric and semantic icons (search, check, star, cart) never do.
6. Open the cart drawer — which side does it come from?
A layout can be right-to-left while every animation still moves left-to-right. The symptoms: a carousel advancing against the reading direction, an announcement ticker scrolling the wrong way, a free-shipping progress bar filling from the left, a cart drawer sliding in from its English side.
In Arabic, click the carousel’s next arrow, watch the announcement bar, add a product to the cart and note which side the drawer enters from. Everything should move as if the page were being read right to left — because it is.
In Tarz: motion is keyed to the logical direction — carousels, tickers, progress fills and drawer slides are authored once, correct in both directions.
7. Are your prices in Western numerals?
The regional convention, followed by large Arabic storefronts, is prices in Western numerals (123) with Eastern Arabic-Indic numerals (٠١٢٣) at home in decorative contexts — delivery windows, item counts, badges. Themes get this wrong in both directions: converting prices to Arabic-Indic digits, or hard-coding Western digits everywhere with no choice.
Check your product price against the storefronts your customers already shop: Western digits, kept intact. Then decide whether you want the decorative touches in Arabic-Indic — your call, not the theme’s.
In Tarz: prices are always Western numerals and bidi-isolated; Eastern Arabic-Indic numerals are a merchant toggle for decorative contexts only.
8. Give a product a mixed-language title — does it survive?
Real catalogues are bilingual: Latin brand names inside Arabic titles, size-and-colour variants, addresses. This is where fragile RTL breaks last and loudest — a title like عباية كلاسيك من Noir Studio with its word order scrambled, or a variant label like XL — أحمر flipping into nonsense.
A five-minute experiment: rename one product to an Arabic title containing a Latin brand name, add a variant mixing a Latin size with an Arabic colour, then view the product card and product page in Arabic and English, desktop and mobile. Revert when done.
In Tarz: mixed Arabic–Latin content — titles, variants, addresses, brand names — is part of the theme’s own test standard, exercised in both directions.
How Tarz handles this
Tarz passes this checklist by construction: direction from the locale, logical CSS with no rtl.css, isolation islands for every left-to-right string, an Arabic type system, one icon policy, logical motion, conventional numerals, and mixed-content testing in both directions. Arabic is the default locale — including the theme editor’s own schema strings — with English alongside for bilingual stores, across 52 sections, 41 theme blocks and 16 templates.
Tarz is in final development and going through the Shopify Theme Store review. We are not publishing a date we cannot hold; the planned launch price is $300, one time.