RTL (Arabic) language support without layout breaking – Inova theme

Store Design
, , ,
1

Hello Guys,

I am using the Inova premium Shopify theme for my store.

The store is based in the United Arab Emirates (UAE), and I am using Shopify’s native language selector and translator app to support:

  • English (default – LTR)

  • Arabic (RTL)

When switching the language to Arabic, the theme applies full RTL behavior, which causes the entire layout to flip, leading to layout and design inconsistencies. This affects several sections such as:

  • Header and navigation

  • Sliders / carousels

  • Product grids

  • Content sections with mixed media

My requirement is:

  • Keep the same layout structure for both English and Arabic

  • Apply RTL direction only to text content (headings, paragraphs, form fields)

  • Prevent layout elements (containers, grids, sliders) from flipping

I would like to follow the theme’s recommended approach instead of applying unsupported overrides.

Note: Now I have turned off this feature

2

Unfortunately, this is a complex task.

Modern CSS tend to honour dir="rtl" property.
For example:
Old text-align:left; alignings text to the left no matter what dir is set.

Newer, justify-content: flex-start; aligns elements according to the dir – to the left if dir=ltr and to the right if dir=rtl (it’s a bit more complex then this, but…)

You’d need a lot of overrides to do what you want.

The closest, I believe can be to keep dir="ltr" on the <html> element, and use lots of CSS rules like:

[lang="ar"] .rte {
  direction: rtl;
}
3

To avoid layout inconsistencies when switching to Arabic, it is best to use a theme that was designed and tested with RTL support from the beginning. Themes without native RTL support often require several CSS overrides, especially when they use fixed left/right positioning instead of direction-aware properties.

I would first check whether the Inova theme has dedicated RTL settings or an official RTL stylesheet. Otherwise, you may need help from the theme developer or a Shopify developer to adjust the affected sections.

Another option is to consider a platform built with Arabic and RTL storefronts in mind, such as CartQu, which supports both Arabic and English stores. This can reduce the need for extensive theme-level modifications.

Full disclosure: I’m part of the CartQu team, but I’m mentioning it because native Arabic and RTL support appears to be a key requirement in your case.