Setting up RTL direction in the theme code
Yes. LangShop supports RTL (right-to-left) languages.
Here is the list of supported RTL languages:
Arabic (ar) ๐ฆ๐ช
Hausa (ha) ๐ณ๐ช
Hebrew (he) ๐ฎ๐ฑ
Kashmiri (ks) ๐ต๐ฐ
Kurdish (ku) ๐ฎ๐ถ
Pashto (ps) ๐ฆ๐ซ
Persian (fa) ๐ฎ๐ท
Urdu (ur) ๐ฎ๐ณ
Yiddish (yi) ๐ฎ๐ฑ
Make sure to add the direction in the theme code after you translate your store into RTL languages.
Steps:
From your LangShop admin, go to Translations > Themes.
Select a theme, click on Actions > Customize.
... > Edit code.
In your template engine, searัh for the theme.liquid template.
Find the html tag >
<html class="no-js" lang="#{{ shop.locale }}">, add the direction for the right-to-left languages you've added to your online store >
<html class="no-js" lang="#{{ shop.locale }}" dir="rtl">.
Click Save.
In case the previous method does not work, please try to add the following instead:
{% if shop.locale == 'ar'%}
<html class="no-js" lang="{{ shop.locale }}" dir="rtl">
{% else %}
<html class="no-js" lang="{{ shop.locale }}">
{%- endif -%}|
NOTE
Some themes don't support RTL languages as they require additional scripts to make themes compatible with the right to left direction and not break the original layout and custom CSS styles.
Here is the list of supported RTL languages:
Arabic (ar) ๐ฆ๐ช
Hausa (ha) ๐ณ๐ช
Hebrew (he) ๐ฎ๐ฑ
Kashmiri (ks) ๐ต๐ฐ
Kurdish (ku) ๐ฎ๐ถ
Pashto (ps) ๐ฆ๐ซ
Persian (fa) ๐ฎ๐ท
Urdu (ur) ๐ฎ๐ณ
Yiddish (yi) ๐ฎ๐ฑ
Make sure to add the direction in the theme code after you translate your store into RTL languages.
Steps:
From your LangShop admin, go to Translations > Themes.
Select a theme, click on Actions > Customize.
... > Edit code.
In your template engine, searัh for the theme.liquid template.
Find the html tag >
<html class="no-js" lang="#{{ shop.locale }}">, add the direction for the right-to-left languages you've added to your online store >
<html class="no-js" lang="#{{ shop.locale }}" dir="rtl">.
Click Save.
In case the previous method does not work, please try to add the following instead:
{% if shop.locale == 'ar'%}
<html class="no-js" lang="{{ shop.locale }}" dir="rtl">
{% else %}
<html class="no-js" lang="{{ shop.locale }}">
{%- endif -%}|
NOTE
Some themes don't support RTL languages as they require additional scripts to make themes compatible with the right to left direction and not break the original layout and custom CSS styles.
Updated on: 09/08/2024
Thank you!