SHOPIFY THEME DEVELOPMENT

An Arabic Shopify store is not a translated English theme — RTL layout, Arabic fonts, and mirrored navigation require theme development, not an app

We develop and customise Shopify themes for UAE brands that need to serve Arabic-language customers correctly — right-to-left layout, Arabic typography, mirrored UI, and language detection built into the theme, not bolted on through a translation plugin.

Request your Theme Development Brief View the evidence

We are proudly featured on

  • Search Engine Journal
  • Shopify
  • SEO Fomo

Trusted by businesses we have shipped growth for

  • Global IME
  • IME Remit
  • Chandragiri Hills
  • Sublime Trails
  • VEVS
  • Kangaroo
  • Ishan

/ This is for you if

Who This Is For

You installed Shopify's Translate and Adapt app and added Arabic translations for your products and pages. Arabic text now appears on your store. But the layout is still left-to-right: the navigation is on the left, text aligns left, directional icons point the wrong way, and the reading flow is broken for native Arabic readers. The translation is done. The layout work is not.

You are building or relaunching a Shopify store that needs to serve both Arabic and English-speaking customers in the UAE. You want Arabic visitors to get a proper RTL experience — not English layout with Arabic text — and English visitors to get a clean LTR layout. You need language detection in the theme, a language switcher in the header, and conditional CSS that flips the layout direction based on the active language.

Your store has Arabic content but the font rendering is inconsistent. Some pages render Arabic in a clean Arabic typeface; others fall back to a system font that looks different in weight, spacing, and character forms. The inconsistency comes from your theme not specifying an Arabic-compatible web font for the sections that carry Arabic text. The fix is a web font implementation in the theme CSS, not a content change.

/ What's broken

What's Broken

Translation app adding Arabic text without RTL layout — Arabic reads right-to-left and a left-to-right theme with Arabic text creates a broken reading flow immediately obvious to native Arabic readers

Arabic is read right-to-left. When Arabic text is placed inside a left-to-right HTML document without the correct `direction: rtl` CSS declarations and `dir="rtl"` HTML attributes, lines begin on the wrong side, punctuation appears in the wrong position, and the visual flow contradicts what Arabic readers expect. This is not a minor visual inconsistency — it signals to Arabic-speaking customers that the store was not built for them. A translation app that adds Arabic content without changing the page direction addresses the language but not the layout, and the result is worse than an English-only store for Arabic-speaking visitors who notice the mismatch immediately.

Default Arabic font rendering — Shopify's default sans-serif font does not include Arabic glyph support, causing Arabic text to render in a system fallback font that looks inconsistent with the English version of the store

Arabic script requires a font with full Arabic Unicode coverage — not just the Extended Latin characters that most web fonts include. Shopify themes load Google Fonts or custom web fonts defined in `theme.liquid`, and these fonts typically do not include Arabic glyphs. When a browser encounters Arabic characters it cannot render in the specified font, it falls back to the system's default Arabic font — which varies by operating system (Windows, iOS, and Android each use different defaults) and rarely matches the weight, style, or character proportions of the theme's English font. The result is visually inconsistent pages where headings and product titles look cohesive in English and mismatched in Arabic.

Navigation and UI elements not mirrored for RTL — icons, arrows, and navigation menus that are directional for LTR layouts need to point in the opposite direction for Arabic readers, and this requires Liquid template changes, not just CSS text-direction

In an LTR layout, a "next" arrow points right. A back chevron in a breadcrumb points left. A shopping cart icon placed in the top-right corner sits at the natural endpoint of left-to-right visual scanning. In an RTL layout, all of these need to be mirrored: the "next" arrow points left, the breadcrumb chevron points right, the cart sits in the top-left corner. CSS `direction: rtl` and `transform: scaleX(-1)` handle some of this automatically, but icon assets, SVG graphics, and navigation layout elements require targeted Liquid template changes to flip correctly. A theme that only applies `direction: rtl` to text will have text flowing correctly while icons and navigation remain oriented for LTR — an immediately visible inconsistency.

Language switcher not integrated into the theme — Arabic/English toggle not present in the navigation or header, so users who want to switch language have no visible path to do so

A bilingual UAE Shopify store needs a language switcher that is visible, accessible, and present on every page. Shopify's Translate and Adapt app provides language switching functionality, but the language selector only appears on the storefront if it is explicitly added to the theme's header section as a Liquid-rendered component. On many themes, the app is installed, the translations are live, and the language switcher is not displayed anywhere because it was never added to the header template. Arabic-speaking visitors who arrive on the English version of the store — through a Google search result, a paid ad, or a direct link — cannot find a way to switch to Arabic. The switcher needs to be built into the header section as a visible, persistent control.

/ What we engineer

What We Do

Each workstream is built by the team that audits it, and wired into the rest of your growth system.

Full RTL Liquid and CSS Development

We implement RTL layout for your Arabic Shopify store at the theme level: `dir="rtl"` attributes on the HTML document, conditional `direction: rtl` CSS declarations that activate for Arabic-language sessions, and targeted overrides for layout elements that need explicit positioning adjustments. We test the RTL layout across all major page templates — home, collection, product, cart, and static pages.

Arabic Web Font Integration

We integrate an Arabic-compatible web font into your theme's CSS — Noto Naskh Arabic, Tajawal, or Cairo are common choices depending on the brand's typographic style — and apply it to all text elements that carry Arabic content. We ensure the font loads efficiently (subset to Arabic Unicode range + Latin for the English version) without adding significant page weight.

Navigation and UI Element Mirroring

We audit every directional UI element in your theme: navigation layout, icon direction, breadcrumb arrows, carousel controls, form field alignment, and CTA button placement. We apply the appropriate CSS transforms and Liquid conditional logic to ensure each element mirrors correctly for RTL without breaking the LTR English version of the store.

Language Switcher Development

We build a language toggle section for your theme header: a Shopify 2.0 header block that renders the Shopify language selector with Arabic and English options, styled to match your brand, and accessible on every page of the store. We implement language detection logic so returning visitors are served their previously selected language, and test the switcher across mobile and desktop.

Conditional Layout Logic (LTR/RTL)

For stores serving both Arabic and English, we implement conditional CSS classes that apply `direction: rtl` and RTL-specific layout adjustments only when Arabic is the active language. The English layout remains LTR with no visual changes. The Arabic layout gets full RTL treatment. No separate theme is required — both languages are served by the same theme with conditional logic.

Arabic Product and Collection Page Sections

We build or customise product page and collection page sections that handle Arabic content correctly: right-aligned text fields, Arabic-compatible font sizing (Arabic characters are typically taller than Latin equivalents at the same em size), correct spacing for Arabic diacritical marks, and RTL-compatible accordion and FAQ components.

Performance for UAE Mobile Traffic

UAE mobile penetration is among the highest in the world. We optimise theme performance for mobile-first delivery: responsive image srcsets, deferred non-critical scripts, and efficient CSS loading. We target LCP under three seconds on mobile for the standard UAE mobile network speeds.

Request your Theme Development Brief

/ What changes

What Changes

Before
After
BeforeArabic is read right-to-left. When Arabic text is placed inside a left-to-right HTML document without the correct `direction: rtl` CSS declarations and `dir="rtl"` HTML attributes, lines begin on the wrong side, punctuation appears in the wrong position, and the visual flow contradicts what Arabic readers expect. This is not a minor visual inconsistency — it signals to Arabic-speaking customers that the store was not built for them. A translation app that adds Arabic content without changing the page direction addresses the language but not the layout, and the result is worse than an English-only store for Arabic-speaking visitors who notice the mismatch immediately.
AfterWhen the theme handles RTL layout properly, Arabic-speaking visitors experience a store built for how they read. The layout credibility gap — the signal that the store was designed for someone else — closes. Conversion rates for Arabic-language sessions reflect a store that serves that audience, not one that tolerated a translation.
BeforeArabic script requires a font with full Arabic Unicode coverage — not just the Extended Latin characters that most web fonts include. Shopify themes load Google Fonts or custom web fonts defined in `theme.liquid`, and these fonts typically do not include Arabic glyphs. When a browser encounters Arabic characters it cannot render in the specified font, it falls back to the system's default Arabic font — which varies by operating system (Windows, iOS, and Android each use different defaults) and rarely matches the weight, style, or character proportions of the theme's English font. The result is visually inconsistent pages where headings and product titles look cohesive in English and mismatched in Arabic.
AfterWith a specified Arabic web font loaded across all templates, Arabic text looks cohesive regardless of which device or operating system the visitor is using. Product titles, descriptions, navigation labels, and CTAs carry the same typographic quality in Arabic as in English.
BeforeIn an LTR layout, a "next" arrow points right. A back chevron in a breadcrumb points left. A shopping cart icon placed in the top-right corner sits at the natural endpoint of left-to-right visual scanning. In an RTL layout, all of these need to be mirrored: the "next" arrow points left, the breadcrumb chevron points right, the cart sits in the top-left corner. CSS `direction: rtl` and `transform: scaleX(-1)` handle some of this automatically, but icon assets, SVG graphics, and navigation layout elements require targeted Liquid template changes to flip correctly. A theme that only applies `direction: rtl` to text will have text flowing correctly while icons and navigation remain oriented for LTR — an immediately visible inconsistency.
AfterWith the language toggle in the header, Arabic and English-speaking visitors can self-select their language on arrival and switch at any point. This reduces bounce rate from Arabic visitors who arrive via an English-language entry point, and gives English-speaking visitors in the UAE the option to explore the English version from an Arabic landing page.
BeforeA bilingual UAE Shopify store needs a language switcher that is visible, accessible, and present on every page. Shopify's Translate and Adapt app provides language switching functionality, but the language selector only appears on the storefront if it is explicitly added to the theme's header section as a Liquid-rendered component. On many themes, the app is installed, the translations are live, and the language switcher is not displayed anywhere because it was never added to the header template. Arabic-speaking visitors who arrive on the English version of the store — through a Google search result, a paid ad, or a direct link — cannot find a way to switch to Arabic. The switcher needs to be built into the header section as a visible, persistent control.
AfterConditional CSS and Liquid logic mean you maintain one theme, not two. Shopify theme updates apply to both language versions simultaneously. There is no risk of the Arabic and English versions of the store diverging over time through separate maintenance.

/ How it works

Process

  1. RTL Audit and Scope Week 1

    We audit your current Shopify theme against Arabic RTL requirements: document direction declarations, font coverage for Arabic glyphs, directional UI elements, language switcher presence, and mobile layout. We document every RTL gap and produce a prioritised scope. You review and confirm priorities before development starts.

  2. RTL Development Specification Week 1-2

    We define the CSS strategy (conditional RTL classes vs. separate stylesheets), the font selection and loading approach, the language switcher build, and the Liquid template changes required for navigation mirroring. You approve the specification before code work begins.

  3. Development on Theme Duplicate Week 2-4

    All work is done on a duplicate theme. We implement RTL CSS, integrate Arabic web fonts, mirror navigation and UI elements, build the language switcher, and complete mobile-responsive adjustments. We test across Chrome and Safari on desktop and mobile, switching between Arabic and English at each stage.

  4. Arabic-Language Review Week 4-5

    We produce a staged preview of the Arabic layout for your review — we recommend involving a native Arabic speaker in your team for this review. We check reading flow, font rendering, icon direction, form usability, and checkout behaviour in both languages. We incorporate feedback and publish the theme.

  5. Handover

    We document the RTL implementation: how the conditional CSS works, how to add new Arabic-compatible sections, and how to configure the language switcher. We stay available for two weeks post-launch for edge cases surfaced by real Arabic-language visitor sessions.

Request your Theme Development Brief

/ Common questions

FAQ

Straight answers on scope, timelines and cost. Anything else, ask us directly.

Ask us directly
What does a proper Arabic RTL Shopify theme require — why is a translation app not enough?

A translation app translates content — it converts English product titles, descriptions, and page text into Arabic. It does not change the direction of the page layout, the positioning of UI elements, the orientation of icons, or the font used to render Arabic characters. A proper Arabic RTL Shopify theme requires: CSS `direction: rtl` declarations on the correct elements, `dir="rtl"` HTML attributes on the document, CSS transforms or Liquid conditionals to mirror directional UI elements, an Arabic-compatible web font specified in the theme CSS, and a language switcher built into the theme header. These are theme development tasks — none of them are achievable through a translation app's settings.

What Arabic fonts work best for a UAE Shopify theme?

Tajawal and Cairo are the most commonly used Arabic web fonts for UAE e-commerce because they are available on Google Fonts, load efficiently, and have a modern sans-serif appearance that pairs well with the contemporary aesthetics of most fashion, lifestyle, and consumer goods brands. Noto Naskh Arabic is a good choice for brands that want a more traditional Arabic typeface with naskh calligraphic proportions — it suits luxury and heritage brand positioning. All three support the full Arabic Unicode range. The choice depends on your brand's visual identity: Tajawal and Cairo read as modern and geometric; Noto Naskh Arabic reads as more classical and authoritative.

How do I mirror navigation and icons for an Arabic RTL Shopify theme?

Mirroring navigation and icons for RTL requires a combination of CSS and Liquid template changes. For text-based navigation, `direction: rtl` in CSS handles the right-alignment and right-to-left reading order automatically. For icon assets — SVG arrows, carousel controls, breadcrumb chevrons, and any directional graphic — you need to either use `transform: scaleX(-1)` in CSS to flip them horizontally, or load separate RTL versions of the icon assets. Navigation layout (header structure, menu alignment) requires Liquid template changes where the element order in the HTML needs to change, not just the CSS direction. A CSS-only RTL implementation handles most text layout but will leave icons and structural layout elements in their LTR orientation unless Liquid-level changes are also made.

How do I add an Arabic/English language toggle to a Shopify theme?

Adding a language toggle to a Shopify theme requires building a custom header section or modifying the existing header section to include a Shopify language selector component. In Shopify 2.0, this is done by adding a `{% form 'localization' %}` block in the header section's Liquid code, including a `<select>` element that lists the available languages from `shop.published_locales`, and adding a submit trigger (either a form submit or JavaScript-driven auto-submit on change). The selector needs to be styled to match the header design and positioned accessibly in both LTR and RTL header layouts. Shopify's Translate and Adapt app must be installed and the Arabic locale must be published for the selector to show Arabic as an option.

Which commercial Shopify themes have the best Arabic RTL support?

Among commercial Shopify themes, Turbo by Out of the Sandbox has the most documented RTL support, including built-in RTL CSS that can be activated through theme settings. Prestige has partial RTL support in its newer versions but requires additional CSS work for full layout mirroring. Dawn (Shopify's free official 2.0 theme) does not have built-in RTL support but its clean, minimal CSS makes it one of the more straightforward bases for custom RTL development. Impulse and most other paid themes require custom RTL development regardless of what their documentation claims — the built-in RTL support in commercial themes typically handles text direction but not icon mirroring, navigation restructuring, or Arabic font specification.

/ Our team

The people behind the work.

Not a black box. Real specialists you can call, with their names on the work.

About us
Hawrry Bhattarai

Hawrry Bhattarai

Google Ads Expert

LinkedIn

Start here

Arabic-speaking customers in the UAE know immediately whether a Shopify store was built for them or translated for them. The difference is in the theme.

Ignited Nepal develops RTL Shopify themes and customises existing themes for UAE brands that need to serve Arabic-speaking customers properly — right-to-left layout, correct Arabic typography, mirrored navigation, and a language switcher that works. We do this in your existing theme where possible, without a full rebuild.

Request your Theme Development Brief View the evidence