RTL on arabic language doesn't affect Titles

Store Design
, , ,

Topic summary

A user is experiencing an issue with RTL (right-to-left) text alignment for Arabic language content on their Shopify store. While they successfully applied CSS code to align Arabic text to the right, two titles on the page are not aligning properly.

Proposed Solutions:

  • One suggestion is to paste specific CSS code at the bottom of the theme.liquid file, wrapped in a conditional statement that checks if the shop locale is Arabic.

  • Another recommendation is to add custom CSS targeting the .rich-text__heading h2 class with text-align: right !important; through Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS.

Both solutions aim to force RTL alignment for headings that aren’t responding to the initial CSS implementation. The discussion includes code snippets and screenshot references to guide the implementation.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

so i was able to use the below code to make the arabic translation align to the right but for some reason 2 titles on the page didnt align, im not sure if there is something that is overriding it?

https://zfaqaf-zt.myshopify.com/ar

[lang="ar"] {
  direction: rtl;
  text-align: right;
}
2

@virtualjohar Paste code in theme.liquid at the bottom

{%- if shop.locale == 'ar' -%}
      
{% endif % }
3

Hi @virtualjohar

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
h2.rich-text__heading {
    text-align: right !important;
}

Here is the result: https://prnt.sc/qNyGE0d56JLQ

I hope this helps

Best,

Daisy