Sense Theme - RTL for Arabic Translation
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:
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
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`.
Thanks again @michaelivanov
It is working on the entire shop except for the footer. Any recommendations please?
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
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.
Community Blog Articles
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025