How can I display a multilingual store from right to left for Arabic store view?

[mostafasam057d]

welcome everybody.

I'm Mostafa from Egypt, new in Magento. I installed magento 2.4.5 in localhost server, and used the default theme "Luma", and added the Arabic language pack for the system, and created two store view, one in Arabic and one in English.

The problem I'm currently facing is that I want the Arabic store view to have a right-to-left display.

How can I do that?

thank you very much everyone.

[Ankit Jasani]

Hi @mostafasam057d ,

You can create child theme by following below steps.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-create.html

Newly created theme you need to add below css:

html { direction:rtl; }

Problem Solved? Accept as Solution!

Hope it helps!
Thanks

[Bhanu Periwal]

Hello @mostafasam057d 

Create new theme for RTL (assign parent your default theme) at below path given below:

app\design\frontend\vendor\

create Store View in admin and apply created theme for that Store View given path below:

Content -> Design -> Configuration

edit your created store view and apply theme which you created for RTL.

 - php bin/magento cache:clean
 - php bin/magento setup:static-content:deploy

Now you can overwrite your default style for RTL

[mostafasam057d]

Hello @Ankit Jasani @Bhanu Periwal 

thank you for helping me.

I've followed the instructions in the article, and i've already created a custom theme.

Now I have a silly question if you will excuse me, in which file do I put this code html { direction:rtl; } ?

Custom themeArabic store viewEnglish store view

[Ankit Jasani]

Hi @mostafasam057d ,

Create and apply child theme by following this: https://www.dckap.com/blog/how-to-create-child-theme-in-magento2/

In your newly created theme create a web/css/source sub-directory.

Create a _extend.less file there.

Add your Less code in this file. (html { direction:rtl; })

Execute below commands

php bin/magento c:f

php bin/magento c:c

php bin/magento s:s:d -f

Apply specific permissions to folder if needed.

Check on front-end.

Problem Solved? Accept as Solution!

Hope it helps!

Thanks