RTL app or RTL-native theme? What each one actually does to your store
Tarz guides · August 2026
An RTL app patches right-to-left direction onto a theme that was designed left-to-right: CSS overrides injected at runtime, for a monthly fee that never ends. An RTL-native theme needs no patch, because direction is not a mode it switches into — the layout is written direction-neutral and follows the storefront language.
That is the short answer. The longer one is worth five minutes, because the difference is not a feature tag — it is where in the stack the right-to-left decision gets made, and everything downstream follows from that. There are three common approaches, and only one of them was designed for the language your customers read.
How does an RTL app make a store right-to-left?
An RTL app runs on top of a theme designed left-to-right. When a shopper loads a page, the app's script injects CSS overrides at runtime — rules that reverse the theme's physical CSS after the fact, so every margin-left is countered by a margin-right, component by component, hundreds of rules deep. What you see is the theme's stylesheet plus a second layer of CSS undoing it.
Three things follow from that mechanism:
- Coverage is a moving target. The override only covers what the app's author has mapped. Update your theme, add a new section, install a widget from another app — each arrives unpatched until the mapping catches up. And a miss is silent: an unmirrored component simply stays left-to-right, because a CSS rule that matches nothing throws no error.
- The cost is monthly, forever. You are renting the direction of your own storefront. The theme underneath never becomes right-to-left; stop paying and the patch goes with the app.
- Two CSS layers fight. Every layout question now has two possible answers — the theme's rule or the app's override — and any debugging session starts with working out which one won. The override also has to arrive after the theme's own styles, which is why patched stores can briefly render left-to-right while loading.
There is also what an override cannot reach. CSS does not rewrite strings, so the interface stays in whatever language the theme ships — usually English — unless the app layers its own translations on top of that too. It does not fix Arabic typography either: Latin letter-spacing pulling connected letterforms apart is a type-system problem, not a direction problem.
How does a theme tagged “right-to-left” work?
Same mechanism, different delivery. A theme carrying a generic right-to-left feature tag is usually a Latin design with a bundled override stylesheet — an rtl.css shipped inside the package instead of injected by an app. You own the patch rather than renting it, which is genuine progress on the bill.
The structural problems stay. Coverage depends on what the vendor remembered to mirror in each release, and these themes typically ship no Arabic locale: the storefront right-aligns, but the buttons, the cart and the notices stay English, and the merchant translates them by hand — then again after every theme update. The typography is a Latin type system with Arabic script left to the fallback fonts.
What does RTL-native actually mean?
Direction stops being a patch and becomes a property of how the code is written. Three things are checkable on any theme claiming it:
- Direction comes from the locale. The
dirattribute is set on the document from the storefront language — not forced by a stylesheet. Arabic renders right-to-left, English left-to-right, on the same theme, and the browser's bidirectional text engine is actually switched on. - Layout uses CSS logical properties.
margin-inline-startrather thanmargin-left: every rule is direction-neutral the day it is written, so a new section is correct in both directions by construction. There is nortl.css, because there is nothing to override. - The details an override never reaches are handled. Prices, SKUs, discount codes and phone numbers sit in bidi isolation so they read correctly inside Arabic text; an Arabic locale ships with the theme; letter-spacing is locked to zero in Arabic contexts.
The full set of checks — including icon mirroring and motion direction — is in our Shopify RTL checklist.
The three approaches, side by side
| An RTL app on a Latin theme | A theme tagged “right-to-left” | An RTL-native theme | |
|---|---|---|---|
| Direction mechanism | CSS overrides injected at runtime | A bundled override stylesheet | Logical properties; direction read from the locale |
| Coverage of new sections | Whatever the app author has patched | Whatever the vendor remembered to mirror | Correct by construction |
| Interface language | App-supplied translations over English | Usually English | Arabic ships with the theme |
| Typography | A font list, no type system | Latin type system, Arabic fallback | An Arabic type system, designed for the script |
| Cost over three years | Monthly, forever | One-time, plus the app you often still need | One-time |
| Performance surface | Theme CSS, plus injected override CSS, plus the app's script on every page | Theme CSS plus an override stylesheet on every page | One CSS layer; no override, no patch script |
A version of this table also sits on the Tarz home page, with extra rows for regional payments and structured data.
How do I move from an RTL app to an RTL-native theme?
A theme change is smaller than it sounds, because your data does not live in the theme. Products, collections, customers and orders all belong to the store and are untouched.
- Install the new theme alongside your current one. Set it up in the theme editor against your real catalogue, preview it in Arabic and English, and publish when it looks right. Your current theme stays in the library as a fallback.
- Re-enter your theme settings. Colours, fonts, homepage sections and menu assignments are theme-level, so they need setting up once on the new theme. Budget an afternoon.
- Uninstall the RTL app afterwards. Both the app and the theme write direction rules; leave them running together and you have two layers of CSS fighting over the same elements. Removing the app ends that — and the monthly bill with it.
How Tarz handles this
Tarz is the third column. Every rule in the theme is authored with CSS logical properties — there is no rtl.css in the codebase, and a lint rule in CI fails the build if a physical property is committed. Direction is read from the storefront locale across all 52 sections, 41 theme blocks and 16 templates, so there is no section an update can leave behind. Arabic is the default locale, written natively and including the theme editor's own strings, with English alongside for bilingual stores; the type system draws on 53 licence-audited Arabic families, detailed in the technical specifications.
The planned launch price is $300, one time, through the Shopify Theme Store — no monthly layer, nothing to renew. Tarz is in final development and going through Shopify's theme review; we are not publishing a date we cannot hold.