Global expansion, localizing content, and selling in multiple currencies and languages
Hello Shopify Community.
I installed the Translate & adapt app for my store, and added Arabic as a second language. Is there a way to make the theme direction RTL when Arabic language is selected and LTR direction when English is selected?
I use sense theme.
Store URL: nefertari-eg.myshopify.com
Password: ohldah
Thank you in advance.
Solved! Go to the solution
This is an accepted solution.
Hi @Gaiar,
You can accomplish this by adding the following code to e.g. your theme.liquid e.g. directly after the first <body> tag
{% if request.locale.iso_code == 'ar' %}
<style>
body {
direction: rtl !important;
}
</style>
{% endif %}
It should look something like this:
This is an accepted solution.
Hi @Gaiar,
Your footer section is already right-to-left however your footer text is still left-aligned.
You can easily change that so it will look like this in Arabic
You can do so by adding
footer * {
text-align: right !important;
}
to the code that I initially provided for your theme.liquid
{% if request.locale.iso_code == 'ar' %}
<style>
body {
direction: rtl !important;
}
</style>
{% endif %}
so it will look like this (or simply copy the code below and replace the code that I initially provided inside your theme with it)
{% if request.locale.iso_code == 'ar' %}
<style>
body {
direction: rtl !important;
}
footer * {
text-align: right !important;
}
</style>
{% endif %}
Note that if anything goes wrong you can always revert your theme.liquid file to the previous version by clicking on "Current" below the "Recent changes" section in the top left corner and then selecting the previous file version
This is an accepted solution.
Hi @Gaiar,
You can accomplish this by adding the following code to e.g. your theme.liquid e.g. directly after the first <body> tag
{% if request.locale.iso_code == 'ar' %}
<style>
body {
direction: rtl !important;
}
</style>
{% endif %}
It should look something like this:
Thank you so so much.
The text direction is now RTL. It looks perfect for text aligned to the center, however for text aligned to the left (in the English version) remains aligned to the left in the Arabic version as well. Is there a way to fix this: only text aligned to the left in the English version to be aligned to the right in the Arabic version?
Please check attachments.
The Arabic version
The English version:
Thank you @Marvelpro_ .
Sorry, how/where to add this class?
Add a class to the left-aligned text elements in the English version, for example, `text-left-en`.
@Marvelpro_
That is so kind of you, and I hope that I am not abusing your kindness 🙂
Honestly, I got lost in the code section.
I sent you an invitation. Thank you so much.
Thanks again @michaelivanov
It is working on the entire shop except for the footer. Any recommendations please?
This is an accepted solution.
Hi @Gaiar,
Your footer section is already right-to-left however your footer text is still left-aligned.
You can easily change that so it will look like this in Arabic
You can do so by adding
footer * {
text-align: right !important;
}
to the code that I initially provided for your theme.liquid
{% if request.locale.iso_code == 'ar' %}
<style>
body {
direction: rtl !important;
}
</style>
{% endif %}
so it will look like this (or simply copy the code below and replace the code that I initially provided inside your theme with it)
{% if request.locale.iso_code == 'ar' %}
<style>
body {
direction: rtl !important;
}
footer * {
text-align: right !important;
}
</style>
{% endif %}
Note that if anything goes wrong you can always revert your theme.liquid file to the previous version by clicking on "Current" below the "Recent changes" section in the top left corner and then selecting the previous file version
Works like charm!
Thank you so much @michaelivanov for your help. I really appreciate it.
I am so sorry to bother you again, but more details got revealed as I go forward.
I hope you don't mind asking you for one last advise.
The cart drawer closure button and the arrows of the multicolumns section on the product page are overlapping with the text you helped me make RTL. Is it possible not to affect those icons position when shifting to RTL?
Thank you and sorry again.
i want translate sorting in my theme from english to arabic
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025