Re: Right to Left text alignment

Manager2020 · ‎04-24-2024

I am using the Translate and Adapt app with Origin theme to translate my theme to Arabic, however, The theme layout is still not adapted, and there are some parts are still not converted "Right to Left", like the "Image with Text" for example.

AnneLuo · ‎04-24-2024

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add dir='rtl' here

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me

Buy Me A Coffee ☕

Manager2020 · ‎04-24-2024

ok, but then the English version will change also.

I want to keep the LTR for English, but change to RTL for Arabic.

Alomrani · ‎10-13-2024

Did you ever find the solution ? I have the same issue.

BD-Marketing · ‎11-10-2024

Did u have any answers please?

erik_lindberg_s · ‎11-12-2024

Try something like this.

{%- 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 -%}

Arif_Shopidevs · ‎03-29-2025

@erik_lindberg_s
is their any dynamic solution you have used in dawn theme, which helps to dynamically change rtl without any app

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.

erik_lindberg_s · ‎03-30-2025

I didn't use an app. I used Shopify’s native language selector and wrote a conditional statement that added a class (.rtl) to the <body> tag if, for example, Arabic was selected. Then I went through the site and wrote CSS for all elements that weren't properly handled by the dir attribute on the <html> tag.

Arif_Shopidevs · ‎03-30-2025

Thank you it is usefull, If their any other language which used rtl in that case this condition need to changes.

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.

Re: Right to Left text alignment

Right to Left text alignment

Buy Me A Coffee ☕

Community Blog Articles