Hello, Is it possible to add right to left language support to Savor theme? If so, how to? If you’re sharing a code just let me know how to use it because I have no idea. Thanks!
Hi @Ehrlich931
To do this you can follow step by step this:
Step 1 — Confirm Your Store Has RTL Language
Go to:
Shopify Admin → Settings → Languages
Add a RTL language like: Arabic, Hebrew, Persian
- Publish it.
Now Shopify automatically knows when a customer is browsing in RTL.
Step 2 — Tell the Theme When Language is RTL
Open:
Online Store → Themes → Edit code
Find this file:
layout/theme.liquid
Find the <html> tag at the top. It looks like this:
<html lang="{{ request.locale.iso_code }}">
Replace it with this:
<html lang="{{ request.locale.iso_code }}" dir="{% if request.locale.iso_code == 'ar' or request.locale.iso_code == 'he' %}rtl{% else %}ltr{% endif %}">
What this does:
-
If language is Arabic or Hebrew → direction becomes RTL
-
Otherwise → stays normal LTR
Click Save.
Step 3 — Add RTL CSS
Now we make the layout flip correctly.
Open:
assets/base.css
(or theme.css if Savor uses that instead)
Scroll to the bottom and paste this:
/* RTL Support */
[dir="rtl"] {
direction: rtl;
text-align: right;
}
[dir="rtl"] .header,
[dir="rtl"] .nav,
[dir="rtl"] .menu {
flex-direction: row-reverse;
}
[dir="rtl"] .header__icons {
margin-left: 0;
margin-right: 15px;
}
[dir="rtl"] .cart-drawer {
right: 0;
left: auto;
}
[dir="rtl"] input,
[dir="rtl"] textarea {
text-align: right;
}
Save.
Step 4 — Fix Icons & Arrows (Important)
Some icons might point the wrong direction.
Add this too:
[dir="rtl"] .icon-arrow {
transform: scaleX(-1);
}
This flips arrows automatically.
Hope it’s helpful to you.
You can do that by referring to those steps
- From your store admin > open Sales channels > Online Store
- In Theme, click “…” of Savor theme > Edit code
- Open theme.liquid file
- In the line of code contain
<html, add this codedir="rtl" - Save file and check.
Best regards,
Dan from Ryviu: Product Reviews App
Hello, sorry for the late reply.
I don’t understands these steps, in step 2 - I don’t understand what to replace because it looks different (image below) please tell me what to replace exactly, which lines.
And in step 3 - where am I supposed to paste this code? After how many rows?
And in step 4 I got the same question as in step 3, how many rows apart from the other code? It won’t let me post 2 images in one reply so I’ll post in the next reply
