How can I switch my theme to RTL when Arabic is selected?

How can I switch my theme to RTL when Arabic is selected?

maymay1994
Tourist
4 0 2

Dear Team,

My store has primary language English and second language Arabic which must be in RTL to show properly,

My theme support RTL but i want my theme to switch to RTL when Arabic language is selected with language switcher button, Kindly need support

 

Language App used (Translation Lab)

Theme Electro 5.0 From Arena commerce

Store URL qsfortech.myshopify.com

 

 

Replies 23 (23)

KetanKumar
Shopify Partner
37583 3668 12151

Hello, @maymay1994 

Thanks for post

i have checked your site but the app not working properly it can be done some custom code.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maymay1994
Tourist
4 0 2
Please check the site again and use the language switcher button at the upper right corner , need to link RTL with arabic switch.
kindly provide the location and rtl code to place with language switcher button
KetanKumar
Shopify Partner
37583 3668 12151

Thanks, 
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
girlishgram
Tourist
3 0 3

Iam facing the issue of right to left text while translating to arabic... dawn theme

KetanKumar
Shopify Partner
37583 3668 12151

@girlishgram oh sorry for that issue can you please your store url 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
girlishgram
Tourist
3 0 3

girlishgram.com

KetanKumar
Shopify Partner
37583 3668 12151

@girlishgram thanks for url 

yes i can see your translating to Arabic working perfect but doesn't change layout 

i have just attach quick mock up can you please check and confirm do you want like this

KetanKumar_0-1724219552487.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
girlishgram
Tourist
3 0 3

Yes

KetanKumar
Shopify Partner
37583 3668 12151

@girlishgram thanks for confirm i have checked code for RTL layout need more customization code about new layout if you need this please let me know to discuss about this 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Cryptorshy
Tourist
4 0 2

Dear May,
Congratulations on the beautiful website, may I know how you achieved the RTL switching thingy? I am in the same boat now but with a different theme but I want to know the approach.

maymay1994
Tourist
4 0 2
Hi Cryptoshy,
You can contact Mr Ketan Kumar Shopify expert for resolving the RTL issue same for my store.
Email: bamaniyaketan.sky@gmail.com
Skype: bamaniya.sky

Mohammed_Sadoon
Tourist
5 0 11

hi

you can use this code :

<!doctype html>

{%- if shop.locale == 'ar' -%}
<html class="no-js" lang="{{ request.locale.iso_code }}" dir="rtl">
{%- else -%}
<html class="no-js" lang="{{ request.locale.iso_code }}">
{%- endif -%}>

 

 

 

nhongskee
Visitor
1 0 0

Hello Mohamed,

 

Thanks for this. Where can we apply this code?

 

regards,

MalakOTR
Visitor
1 0 0

Hi Mohammed, I used your code, but I keep getting this characte "<" in the header of the website, can you help me on how to remove it?Screen Shot 2022-11-13 at 11.04.11 AM.png

javesti49
Excursionist
19 1 1

hello,

i have a theme that supports both arabic and english 100%, you can have the landing page in arabic and the second language as english, if you are interested reply to me.


@maymay1994 wrote:

Dear Team,

My store has primary language English and second language Arabic which must be in RTL to show properly,

My theme support RTL but i want my theme to switch to RTL when Arabic language is selected with language switcher button, Kindly need support

 

Language App used (Translation Lab)

Theme Electro 5.0 From Arena commerce

Store URL qsfortech.myshopify.com

 

 


 

 
amqqma
Visitor
2 0 0

Hi

Could you please provide the theme URL.

Thanks

dot1
Visitor
1 0 1

hi,

I am interested in a Shopify theme that has both Arabic and English support.

KetanKumar
Shopify Partner
37583 3668 12151

@dot1 

yes shopify theme work as well 

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Jessy-clothes
Explorer
48 1 8

Check Plak Theme, they have an Arabic Shopify that support multi-languages switcher

craftivaart
Shopify Partner
29 1 7

Add this code : 

{%- if shop.locale == 'ar' -%}
<html class="no-js" lang="{{ request.locale.iso_code }}" dir="rtl">
{%- else -%}
<html class="no-js" lang="{{ request.locale.iso_code }}">
{%- endif -%}    

 

to Theme. liquid under the first line : <!doctype html>

 

 

www.craftivaart.com
Ibrahem_Naser
Visitor
1 0 0

simple straight forward

Omalo_Dama
Visitor
1 0 1

Yes. This worked perfectly . Just find the main theme templage (e.g. template.liquid) and replace the <html> tag there with this one.
Be careful to keep "class" and other attributes as they are. for example, if your original html has class "js" don't remove it and but "no-js" as above, simply keep "no-js" and add the dir="rtl" attribute.

 

bests and thanks for solving.

belleofbree
Shopify Partner
3 0 0

thanks for sharing that! my site kept losing the functionality of the drawer menu on mobile - looking at the original code on my site had "js"  so I corrected the code and have no issues with the mobile drawer menu. 

Here is the updated code for anyone else finding this issue where the drawer menu doesn't open.

  {%- if shop.locale == 'ar' -%}
<html class="js" lang="{{ request.locale.iso_code }}" dir="rtl">
{%- else -%}
<html class="js" lang="{{ request.locale.iso_code }}">
{%- endif -%}