Integrations / Localisation & RTL

How to Set Up a Bilingual Arabic (RTL) Shopify Store

Every Shopify store we build for this region ships bilingual. Translating the words is maybe a third of the work — the rest is layout, typography, and the parts of the funnel that stay stubbornly English.

  • Steps9
  • Time8 hrs
  • DifficultyTheme code changes likely
Have us check your setup All integration guides

WHY THIS MATTERS

A store that offers Arabic but renders it in a left-to-right layout with a Latin font reads as an afterthought, and customers treat it accordingly. Doing this properly means mirroring the entire interface, loading a typeface designed for Arabic, translating the transactional emails and the checkout, and telling search engines which version is which. It is detailed work, but it is finite work — and it is the difference between an Arabic store and an English store with Arabic text in it.

Before you start

  • A Shopify store
  • Human-quality Arabic copy (not machine output)
  • An Arabic-capable webfont
  • Theme editor and code access

Step by step

The same sequence we follow on client stores. Do them in order — several of the later steps depend on decisions made in the earlier ones.

  1. Choose one translation approach and commit

    Shopify Markets with a translation app, or a dedicated app like Weglot or Langify. Pick one. Running two translation layers over the same theme produces conflicts that are genuinely difficult to debug later.

  2. Set the direction attribute properly

    The document needs dir="rtl" when Arabic is active, not a stylesheet that flips a few elements. Getting this at the document level means most of the layout mirrors correctly for free.

  3. Mirror the layout, not just the text

    Navigation, breadcrumbs, carousel arrows, progress bars, icon positions, and form labels all need to flip. Use CSS logical properties where the theme allows, and walk every template — the ones that break are always the ones nobody checked.

  4. Load a real Arabic typeface

    Latin webfonts fall back to a system Arabic font that will not match your brand and often sits badly on the baseline. Load a proper Arabic face, and set line-height separately — Arabic generally needs more leading than the same size in Latin.

  5. Translate product data, not just theme strings

    Titles, descriptions, variant option names, collection descriptions, size guides, and policy pages. A store where the interface is Arabic and every product description is English is the most common half-finished version of this.

  6. Translate the transactional emails and checkout

    Order confirmation, shipping notification, and the checkout itself. This is where customers are most anxious and least forgiving, and it is the step most often skipped because it lives outside the theme.

  7. Add hreflang and keep URLs distinct

    Emit hreflang alternates for each language plus x-default, and make sure each language has its own crawlable URL. Without this, search engines pick one version and the other never ranks.

  8. Put the language switcher where people expect it

    Top right on desktop, in the mobile menu, visible without scrolling. A switcher buried in the footer means customers who need Arabic will never find the Arabic.

  9. Have a native speaker walk the whole funnel

    Homepage to delivered order, on a phone, in Arabic. Machine translation reads plausibly and lands wrong in ways only a native speaker catches — particularly in CTAs and error messages.

What we do differently

The three things that separate a working setup from a default one — drawn from the stores we ship, not from the documentation.

Direction at the document level

Flipping individual components is how you end up with a store that is 90% mirrored forever.

Arabic needs its own line-height

Reuse the Latin value and the text will look cramped at every size.

Translate the emails

They live outside the theme, so they are the step that gets forgotten.

Next in the stack

These are the integrations that most often go in alongside this one.

Paymob How to Integrate Paymob with Shopify (Egypt & MENA Payments) 8 steps · Some account setup required Read the guide → SearchPie How to Set Up SearchPie SEO on Shopify (Without Breaking Your Schema) 8 steps · No code required Read the guide → DECO How to Add Custom Sections to a Shopify Theme with DECO 8 steps · No code required Read the guide →

Would rather we just did it?

We set this up on every store we build, and we do it as standalone work too. Start with a free audit — we will tell you what is worth changing before you spend anything.

Get a free audit Start a project

Frequently Asked
Questions

What clients ask us about this integration before we set it up.

Weglot or Langify?

Both are in our stack. Weglot is faster to launch and handles the translation workflow for you; Langify gives more granular control and keeps translations in your store. Volume of content and how much you want to manage in-house usually decides it.

Can I just use machine translation?

As a first draft, yes. As a shipped storefront, no — machine Arabic reads as machine Arabic to a native speaker, and it does the most damage exactly where it matters, in your calls to action.

Does bilingual hurt SEO?

Not when each language has distinct URLs and correct hreflang. It hurts when both languages share one URL, because search engines then have one page with two languages in it.

Do you build bilingual stores?

Yes — full EN/AR with RTL is standard scope on our regional builds. See services or start with a store audit.