Shopify Supporting Right-to-Left Languages (RTL)

rybiwir
New Member
1 0 1

I have just started using Shopify on a Hebrew store website.

 

There any way to support to RTL for the Hebrew language?

 

Replies 43 (43)
Ann
Shopify Staff
Shopify Staff
516 0 106

Hey there, 

I'm Ann, from the team here at Shopify 🙂

That can be customized into your store's theme, but it does take a bit of coding in order to make it happen. To get to that section of your theme, from your Shopify admin, click on Online Store>Themes>Actions>Edit Code. Once there, follow these steps: 

  1. From the menu you'll see on the left, open theme.liquid
  2. Near the top of the file, usually in the first 2-5 lines, you'll see text like this
     <html class="no-js" lang="{{ shop.locale }}">
    The code will vary with different themes, just make sure it's the tag that starts with <html 
  3. Before the closing > just add a space followed by the text dir="rtl" to tell the browser to flip everything. This will re-arrange elements like the logo and how text inputs work too. The end result will look like
    <html class="no-js" lang="{{ shop.locale }}" dir="rtl">

     

  4. Then just hit Save

It's worth noting some themes are designed so that cart and search icons may not move automatically. If it's a theme created by Shopify you can reach out to us directly and we'll look into fixing it for you. If your theme is created by a third party company, reach out to your theme's developers and they can help!

Finally, to change the checkout to right to left, the language should be set to a right to left language like Hebrew - In the admin, go to Online Store>Themes>Actions>Edit Languages and click to Change theme language. Then just remember to hit Save as well! 

I hope this helps! If you have any more questions or concerns feel free to reach out to us here 🙂 

Have a great one,
Ann

Ann | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ARYE_SHALVI
New Member
3 0 0

I don't seem to be able to align the text (in pages editor) to RTL.

the editor offers an option to align text RTL but it doesn't really work...

Ant advice? I just want this one page aling RTL so editing the theme is not an option. 

Ammar3
Shopify Partner
3 0 1

that is right.

but  slide show go hidden and not see it or photo at home page

 

help us

avidshopperguid
Shopify Partner
10 0 2

Hi 

I'm using venture theme . for a Hebrew store.

i have installed the code as described .the site  alignment  has changed the menu bar is RTL as i wanted . but suddenly the slides doesn't show the images 

just black background .

{when i returned to  the original code without the RTL -the slides work fine- meanthis is the issue} can you assist to solve that ?

Regards 

David

Praveennair
Shopify Expert
13 0 0

Go to theme.liquid and place the below code above the <head>

 

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}" dir="rtl"> <!--<![endif]-->

 

And save

 

Praveen - Shopify expert

Thriftizer Solutions LLP
avidshopperguid
Shopify Partner
10 0 2

Thank you

Should i place  this code with the RTL Code ?{listed at Ann reply}


@Praveennair wrote:

Go to theme.liquid and place the below code above the <head>

 

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}" dir="rtl"> <!--<![endif]-->

 

And save

 

Praveen - Shopify expert


 

avidshopperguid
Shopify Partner
10 0 2

I have tried it with and without the RTL code .the text and menu change to RTL  but still ,the slide show  images doesn't show
@avidshopperguid wrote:

Thank you

Should i place  this code with the RTL Code ?{listed at Ann reply}


@Praveennair wrote:

Go to theme.liquid and place the below code above the <head>

 

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}" dir="rtl"> <!--<![endif]-->

 

And save

 

Praveen - Shopify expert


 




Praveennair
Shopify Expert
13 0 0

Just place this code that's it 

Thriftizer Solutions LLP
avidshopperguid
Shopify Partner
10 0 2

Thank you 

I placed  the code only.  unfortunately the slides disappeared again {all the rest is fine} 


@Praveennair wrote:

Just place this code that's it 


 

Praveennair
Shopify Expert
13 0 0

If you need i can get this done


@avidshopperguid wrote:

Thank you 

I placed  the code only.  unfortunately the slides disappeared again {all the rest is fine} 


@Praveennair wrote:

Just place this code that's it 


 


 

Thriftizer Solutions LLP
avidshopperguid
Shopify Partner
10 0 2

what you need to do it?

Lotjog
New Member
1 0 1

How to make all Notifications in the Settings<Notifications  from right to left? This code is invalid.

11.png

chanarivkin
Tourist
4 0 0

hi,
i am in doubts which theme to purchase for my own shop
does your shopify works well rtl?

thank you in advance

chanarivkin
Tourist
4 0 0

hi,
i am in doubts which theme to purchase for my own shop
does your shopify works well rtl?

thank you so much!

chanarivkin
Tourist
4 0 0

hi,
i am in doubts which theme to purchase for my own shop
does your shopify works well rtl?

thank you in advance!

avidshopperguid
Shopify Partner
10 0 2

Hi

I am using  Shopify free Themes and i also use a 180$ purchased Theme .

with regard to RTL support and problem solving, I recommend using shopify free  themes .

especially if your site is  Bi\Multi lingual .

1. you'll need  support from the moment you switch to RTL .the slideshows stops and any App you install 

might cause changes. with Shopify support they take responsibility and solves most of the issues .

with Purchased Theme they ask for payment right after 2/3 free support they give you.

FOR EXAMPLE; Ours theme developer request extra 125$ for switching the menu order when switching to English 

{ even he declared they support RTL }

 

 

 

 

 

David_T8
Tourist
3 0 2

Hi David,

Same issue here, did you solve this problem?

 

TungDao
Shopify Partner
257 10 35

Maybe considering using a language translation app?

Avada is an e-commerce solution provider based in the heart of Vietnam where the best developers unite. Founded in 2017 by Mageplaza, Avada is responsible to complete the mission to help 1 million online businesses grow revenues.
Cryptorshy
Tourist
4 0 2

Dear Ann,
Sorry for reviving and old topic, but I've tried your code and it works perfectly, but I want to add something a bit more, I want to switch the website from LTR to RTL only when the Language selected by the customer/user is RTL. IF not it should remain LTR. I am a designer not a coder but I was thinking out loud for something that would this equation " if lang=En dir=ltr" / "if lang=ar dir=rtl" . 

I hope am making any sense.