Solved

Sense Theme - RTL for Arabic Translation

Gaiar
Shopify Partner
79 2 15

Hello Shopify Community.

 

I installed the Translate & adapt app for my store, and added Arabic as a second language. Is there a way to make the theme direction RTL when Arabic language is selected and LTR direction when English is selected?

I use sense theme.

 

Store URL: nefertari-eg.myshopify.com

Password: ohldah

 

Thank you in advance.

 

Stay authentic,
Accepted Solutions (2)

michaelivanov
Shopify Partner
35 5 10

This is an accepted solution.

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:

 

rtl code translate and adapt.png

 

 

View solution in original post

michaelivanov
Shopify Partner
35 5 10

This is an accepted solution.

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

 

nefertari rtl.png

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

how to revert your theme liquid file to the previous version.png

 

View solution in original post

Replies 9 (9)

michaelivanov
Shopify Partner
35 5 10

This is an accepted solution.

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:

 

rtl code translate and adapt.png

 

 

Gaiar
Shopify Partner
79 2 15

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

Gaiar_0-1716122719116.png

 

The English version:

 

Gaiar_1-1716122769355.png

 

Stay authentic,
Gaiar
Shopify Partner
79 2 15

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`.

 

Gaiar_0-1716124436690.png

 

Stay authentic,
Gaiar
Shopify Partner
79 2 15

@Marvelpro_ 
That is so kind of you, and I hope that I am not abusing your kindness  🙂
Honestly, I got lost in the code section.

I sent you an invitation. Thank you so much.

Stay authentic,
Gaiar
Shopify Partner
79 2 15

Thanks again @michaelivanov 
It is working on the entire shop except for the footer. Any recommendations please?

Gaiar_0-1716705147986.png

 

Stay authentic,
michaelivanov
Shopify Partner
35 5 10

This is an accepted solution.

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

 

nefertari rtl.png

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

how to revert your theme liquid file to the previous version.png

 

Gaiar
Shopify Partner
79 2 15

Works like charm!

Thank you so much @michaelivanov  for your help. I really appreciate it.

Stay authentic,
Gaiar
Shopify Partner
79 2 15

@michaelivanov 

 

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.

 

Gaiar_0-1716925467126.png

 

Gaiar_1-1716925487750.png

 

Stay authentic,
Ahmedsalah89
Shopify Partner
12 0 4

i want translate sorting in my theme from english to arabic