Selling in Arabic: right-to-left layout on Shopify
Gencer KarakayaFounder & Shopify Engineer
Published · 6 min read
Short answer
Shopify can publish Arabic as a storefront language. The latest Horizon family themes support right-to-left languages; for any other theme, Shopify advises confirming right-to-left support so the layout is correct. In any theme, Liquid exposes the current language’s direction as rtl or ltr, which sets the page’s dir attribute. Translations come from the Translate & Adapt app, imports or your own translator.
- For themes outside the Horizon family, Shopify advises confirming that the theme supports right-to-left languages so the layout is correct.
- Shopify says the latest versions of themes in the Horizon family support right-to-left languages, such as Arabic, Hebrew and Urdu.
- The Liquid
shop_localeobject has adirectionproperty that returnsrtlfor right-to-left locales, used to set thedirattribute on the html element. - Stores on Basic to Advanced plans can publish up to 20 languages; Plus and Enterprise stores up to 30.
- Translate & Adapt can automatically translate a maximum of 2 languages; policies can only be translated manually.
Adding Arabic to a Shopify store has two halves that are easy to confuse. Publishing the language is a setting: Shopify creates the Arabic URLs and serves the translations you add. Reading right to left is the theme’s job: the whole layout has to mirror, not just the text. A store can have perfect Arabic translations and still show them in a left-to-right layout that feels wrong to every Arabic reader.
What Shopify handles
- The language itself. Under Settings > Languages you add Arabic, choose the domains it is published on, add translations and publish it. Stores on Basic to Advanced plans can publish up to 20 languages; Plus and Enterprise stores up to 30.
- URLs. A published language gets a subfolder, such as
example.com/ar, or a subdomain. The wordproductsin product URLs can’t be translated, but each product’s own handle can be. - Translated content. Product titles and descriptions, collections, pages, menus, theme sections and notification emails can all be translated. Product, article and blog tags can’t.
- Search signals. When Arabic sits on its own subfolder or domain in a market, Shopify generates the hreflang tags and sitemap entries for it.
Shopify says the latest versions of themes in its Horizon family support right-to-left languages, including Arabic, Hebrew and Urdu. For any other theme, its guidance is direct: confirm that the theme supports right-to-left languages so the layout is correct. Ask the theme developer, or test the theme with Arabic before the language goes live.
What the theme has to do
Liquid tells the theme which direction the current language uses. The shop_locale object has a direction property that returns rtl for right-to-left locales and ltr for the rest, and Shopify documents it for setting the dir attribute on the html element. request.locale returns the current shop_locale, so the layout file can do this:
<html lang="{{ request.locale.iso_code }}" dir="{{ request.locale.direction }}">Setting lang as well tells browsers and screen readers which language the page is in. The dir attribute alone makes the browser flow text right to left, and on a store with English and Arabic each page gets the direction of its own language, with no separate Arabic theme to maintain. Everything the theme’s CSS positions by hand still needs work:
- Spacing and alignment. Margins, padding and text alignment written as left and right stay put when the direction flips. CSS logical properties (start and end instead of left and right) follow the direction automatically.
- Directional icons. Arrows on sliders, breadcrumbs and “next” buttons usually need to mirror. Icons with no direction, such as a cart or a search glass, don’t.
- Carousels and drawers. Sliders should advance in the reading direction, and a cart drawer that opens from the right in English usually opens from the left in Arabic.
- Mixed content. Product codes, prices, phone numbers and English brand names inside Arabic text need testing, because numbers and Latin words still run left to right within the line.
- Fonts. The theme’s Latin typeface may have no Arabic glyphs, so the browser falls back to a default one. Choose an Arabic typeface deliberately and set it for the Arabic locale.
- Apps. Reviews widgets, pop-ups and other app blocks bring their own markup and styles; check each one on Arabic pages.
This is why RTL is scoped per theme. A theme built with logical properties from the start needs little; an older theme with hundreds of left and right rules needs a careful pass. It is theme engineering, and it belongs in the estimate before translation starts.
Getting the Arabic content in
Shopify’s Translate & Adapt app adds translations for products, collections, blog posts, policies and pages, and can adapt content per market. Its automatic translation covers a maximum of 2 languages, and policies can only be translated manually. It can’t translate collection filters, Shopify Forms, manual payment method instructions, product images or tags, and some app content is out of its reach.
Theme text, such as button labels and cart messages, lives in the theme’s locale files and is edited through Shopify’s language editor, Translate & Adapt or a CSV import. Each locale file can hold up to 3,400 translations, and any string without a translation shows in the default language. On Arabic pages, that fallback is the most common visible bug: an English “Add to cart” inside an otherwise Arabic page. Checkout needs the same attention: Arabic isn’t among the languages for which Shopify provides checkout and system message translations, so those have to be entered manually through the language editor.
Machine translation is a starting point. For product copy that sells, Arabic text should be written or reviewed by a fluent speaker. Lintel’s part is making the store handle Arabic; the Arabic copy itself comes from you or your translator.
Arabic URLs and search
An Arabic version should have its own URLs. Shopify generates hreflang tags only for markets with a distinct domain, subdomain or subfolder, so Arabic published on a UAE subfolder such as /ar-ae gets its own tags and sitemap entries, and search engines can tell it from the English pages. The sitemap is updated automatically when a market is added.
If you turn on Shopify’s automatic redirection, customers can be sent to another market version, but known search engine crawlers are excluded: they get the URL they asked for, so both the English and Arabic versions can be indexed. Product handles can be translated too. Whether Arabic pages use Arabic handles or keep the English ones is a choice to make once, before launch, because changing URLs later means redirects.
What to test on Arabic pages
| Area | What to check |
|---|---|
| Header and menus | Logo, menu and icons mirror; mega menus open in the right direction |
| Collection pages | Grid order, filters and sorting read right to left; filter labels are translated |
| Product pages | Gallery arrows, variant pickers, prices with AED and quantities read correctly |
| Cart and drawer | Drawer side, line items, discounts and totals; no English strings left |
| Forms | Input alignment, error messages and phone or email fields that stay left to right |
| Apps | Every app block and pop-up, on a phone and on a desktop |
Putting it together for a UAE market
- Create a UAE market in Shopify Markets with AED as its currency.
- Add Arabic under Settings > Languages and publish it on the UAE market’s subfolder, alongside English.
- Make the theme direction-aware:
dirfromrequest.locale.direction, logical CSS, mirrored icons, an Arabic typeface. - Translate content with Translate & Adapt, an import or your translator, then fill any gaps in the theme’s default content.
- Test every template in Arabic on a phone: home, collection, product, cart, search, account and the pages your apps add.
Currency, payment and the rest of a UAE build are covered on our page on Shopify for UAE stores, along with how we work with UAE businesses remotely from Ankara.
Questions
- Does Shopify support Arabic?
- Yes. Arabic can be published as a storefront language. The latest Horizon family themes support right-to-left; for other themes, Shopify advises confirming right-to-left support so the layout is correct.
- Which Shopify themes support right-to-left?
- Shopify says the latest versions of themes in the Horizon family support right-to-left languages such as Arabic, Hebrew and Urdu. For other themes, check with the developer or test the theme with Arabic published.
- Can one store show English left to right and Arabic right to left?
- Yes. The theme reads the current language’s direction from Liquid (
request.locale.direction) and sets the page’sdirattribute, so each language gets its own direction. - Will Shopify translate my store into Arabic automatically?
- Translate & Adapt can auto-translate up to 2 languages, but policies need manual translation and some content, such as images and tags, isn’t covered. Product copy should be reviewed by a fluent speaker.