Enable right-to-left (RTL) text support

Show the language selector in the Header

• From your SHOPLINE admin, open Online Store > Design.

• Locate your Maison theme and click Design.

• Open the Header section.

• Enable Show language selector.

• Click Save.

Maison requires at least two available languages before the language selector can be useful on the storefront.

When customers select an RTL language from the selector, Maison automatically reloads the storefront using the RTL direction.

How RTL works in Maison

Maison checks the active storefront language when the page loads.

The theme then applies one of two page directions:

LTR = Left to right
RTL = Right to left

For an RTL locale, Maison sets the storefront document direction to RTL and loads its dedicated RTL stylesheet.

For a normal left-to-right language, Maison uses the standard LTR layout.

This behavior is automatic and does not require a Theme Editor setting.

RTL languages recognized by Maison

This version of Maison recognizes the following locale codes as RTL:

ae
ar
arc
bcc
bqi
ckb
dv
fa
glk
ha
he
kwh
ks
ku
mzn
nqo
pnb
ps
sd
ug
ur
yi

These locale codes cover languages and regional language variants that use right-to-left writing.

Common examples include:

• Arabic
• Hebrew
• Persian
• Urdu
• Kurdish variants
• Pashto
• Sindhi
• Uyghur
• Yiddish
• Divehi

If the active storefront locale is not included in Maison's RTL list, the theme uses the normal left-to-right direction.

Arabic theme translation

Maison includes an Arabic theme translation in this version of the theme.

This translation provides Arabic text for supported built-in theme labels and interface content.

Your own store content, such as product descriptions, collection content, pages, and navigation, still needs to be translated separately through SHOPLINE's language tools.

RTL interface behavior

When RTL is active, Maison adjusts supported directional interface behavior.

This includes:

• The overall document direction changes to right to left.
• Directional arrows and chevrons are mirrored where required.
• Navigation dropdown animation is adjusted for RTL.
• Horizontal carousels detect the RTL direction.
• Carousel scrolling direction is adjusted.
• Product icon horizontal scrolling detects RTL.
• Components that rely on directional calculations use Maison's RTL configuration.

Maison automatically returns these components to their normal LTR behavior when customers switch to a left-to-right language.

Language selector behavior

Maison uses the languages that are available through SHOPLINE's localization settings.

The Header language selector:

• Can be enabled separately for desktop and mobile.
• Displays the available storefront languages.
• Changes the active locale when a customer selects a language.
• Automatically triggers Maison's RTL layout when an RTL locale becomes active.

The Footer Market selector can also provide language switching.

You do not need to create separate RTL and LTR versions of the theme.

RTL and Theme Editor settings

Most Maison section settings continue to work normally in RTL mode.

For example:

• Text alignment settings remain configurable.
• Section spacing remains configurable.
• Product card settings remain configurable.
• Desktop and mobile layouts remain configurable.

The page direction is handled globally by Maison based on the active language.

Because RTL support is automatic, you should configure your sections normally and then preview them in both RTL and LTR languages.

Text alignment and RTL

RTL page direction does not mean that every text block must always be right-aligned.

Maison sections can still provide alignment settings such as:

Left
Center
Right

Choose the alignment that best fits the content and design.

For Arabic or other RTL content, right alignment is often appropriate for paragraphs and navigation, while centered content can continue to use center alignment.

Always preview the final layout rather than assuming every section needs the same alignment.

RTL and custom code

Maison's built-in components are designed to respond to the RTL document direction.

Custom HTML, CSS, JavaScript, app blocks, or third-party applications may not automatically support RTL.

If custom content displays incorrectly in RTL mode, check whether that custom implementation uses fixed left/right positioning instead of direction-aware styling.

Issues caused by third-party applications or custom code may need to be adjusted separately from the built-in Maison RTL support.

Recommended setup

For a multilingual store that supports Arabic, a typical setup is:

Settings > Languages
English
Arabic

Settings > Markets
Assign English and Arabic to the required market

Header
Show language selector: On

Mobile Header
Show language selector: On

Customers can then switch between English and Arabic.

When English is active, Maison uses the left-to-right layout.

When Arabic is active, Maison automatically uses the right-to-left layout.

Troubleshooting

If the storefront remains left to right after selecting Arabic, make sure Arabic has been correctly added to Settings > Languages and assigned to the active market.

If the Arabic language is unavailable in the selector, make sure it has been added to the store and assigned to the required market.

If the language selector does not appear in the Header, enable Show language selector and make sure more than one language is available.

If the language selector appears on desktop but not mobile, enable the mobile Show language selector setting in the Header.

If the storefront changes to RTL but some content remains untranslated, add the missing translations in Settings > Languages. RTL layout does not automatically translate store content.

If theme interface labels remain in another language, check the translation content for the active storefront language.

If one custom section or application remains left-to-right, check whether it comes from custom code or a third-party app. External content may require its own RTL support.

If a carousel or built-in directional component appears incorrect, make sure you are testing the current Maison version and refresh the storefront after changing languages.

If text alignment does not look correct, adjust the section's text-alignment settings and preview the page again in the RTL language.

If the store uses multiple markets and RTL works in one market but not another, check that the RTL language is assigned to the affected market.

---

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.