Table of Contents
FAQ
Yes, but a few issues need to be taken care of, as we’ll explain in this document.
Shopify’s official store does not have themes built from right to left, but you can take any existing theme and customize it.
Of course. Many Arabic stores are using Shopify and being displayed in an RTL layout.
Shopify does support Multilingual stores. In the case of two languages with different writing directions (For example, Arabic and English), you will need to use an app to display the suitable layout for the correct language.
Yes, Shopify supports different currencies such as SAR, AED KWD, MAD, and more.
Translation
Translating the theme texts
All texts can be edited through Shopify’s built-in language editing interface.
Go to the Themes page, select the theme you want to translate:
Actions > Edit Languages
You will be directed to the language editor, where you will choose the language you want to translate your theme into. Then you will need to start translating for approximately 1,200 theme texts in an average theme.
RTL Master app, which we mentioned before, provides a pre-made translation to those texts, so you won’t need to translate them all manually.
Translating your store content
Store content is the content you add to your store and is not part of the Shopify platform default or the theme you are using. For example, Your blog posts, product titles, description, collection, etc.
If your store is in Arabic only, there is no issue; You can write all your store’s content in Arabic.
In the case of a multi-lingual store, you will need to use a verified Shopify translation app.
RTL Master offers a full translation feature, with auto-translation of all of your store assets to Arabic in one click.
Theme Layout
Shopify themes
Shopify themes are professional and beautiful. The only issue is that they are all designed for LTR languages, as these are the most significant markets.
Fortunately, tweaking Shopify themes to RTL layout(right to left) is not an impossible mission.
With the right changes to your themes’ CSS and JS files, you’ll be able to make it look like it was made for Arabic.
Adjusting the theme code to RTL
Let’s start with a typical miss consumption: adding a “dir=rtl” to the HTML element will be enough to adjust your theme to RTL.
This kind of approach will move some elements to the right but will most likely cause a ‘mess’ in your theme, breaking elements and creating unwanted margins, and will leave many elements not aligned to the right.
The right professional approach is going through your CSS file and adjusting every element to the direction you would like it to appear.
This is very important as an RTL website doesn’t necessarily mean a complete opposite of the LTR version or aligned to the right. There are things you would like to be centered or aligned to the left.
Editing the theme CSS file
Let’s take a look at the LTR version of the Dawn theme:
Now, let’s start with adding the main rule to our CSS file, identifying the issues, and fixing them.
We’ll add an RTL rule to our HTML element:
html{
direction:rtl
}
Now let’s look at the result and identify the issues:
Desktop:
- The header icons margins are not equal
- The newsletter arrow is pointing in the wrong direction
- The search form and title are not aligned to the right
Mobile:
- Same issues as Desktop, besides the icon.
- The menu drawer opens in the wrong direction and creates a bug.
These are just a few of the bugs you will meet by changing the HTML direction attribute.
You will have to investigate every issue, like the ones we mentioned, and fix them with the correct CSS and JS files changes.
This isn’t a complicated thing for a web developer but could be very time-consuming.
Arabic Notifications
Translating notifications
When customers interact with your store, several notifications (emails and SMS) are sent to them automatically from your Shopify system.
For example, emails to customers who have abandoned a cart placed an order or customers who created a user.
These notifications can be edited in the Shopify admin, under Settings > Notifications.
The emails are written in “HTML”. You can change all the texts that appear in them into Arabic.
Another option is to use the RTL Master app, as mentioned earlier. The app offers ready-made templates in Arabic for those who don’t want to mess with complex changes in HTML.
Using Arabic Fonts
Default fonts
Besides the basic ones, Shopify doesn’t support Arabic fonts out of the box.
Using Google fonts for Arabic fonts
One of the easiest ways to add better-looking Arabic fonts to your Shopify store is by using Google Arabic Fonts.
After choosing the right font for your store, follow the following steps:
- import the font by copying the “@import” code provided by Google fonts and adding it to your theme’s CSS file.
- Choose the elements you like the font to appear in, and apply the font to them.
Your final code should look something like that:
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
body, p, blockquote, li, a, h1, h2, h3, h4, h5, h6{
{font-family: 'Cairo' !important;}
}
Adding custom Arabic fonts
If you are willing to use your custom fonts, not one from Google fonts, you can add them to your theme by following the next steps.
- Upload the .woff2 file of your font to Shopify files.
- Copy the file URL
- Add the following CSS code to your theme CSS file:
@font-face {
font-family: "XXXXX";
src: url("YYYY") format("woff2");
}
Make sure to replace XXXX with the font-family name and YYYY with the link you just copied.
- Now you need to choose the elements you like the font to appear in and apply the font to them. Your final code should look like that:
@font-face {
font-family: "";
src: url("YYYY") format("woff2");
}
body, p, blockquote, li, a, h1, h2, h3, h4, h5, h6{
{font-family: 'XXXXX' !important;}
}
Currency Settings
Changing the default currency
You can choose almost any existing currency to be your store’s default..
Go to Settings > General and scroll down to Store currency.
Pay attention! It is not possible to change the currency after the first sale in the store. It is possible to ask Shopify’s support to make a change.
Changing the currency symbol
Change the dollar sign ($) to the symbol you want to appear, AED for example.
Using RTL Master App
If you are not willing to go through the whole process by yourself or pay developers to do that, we recommend using an app that will save you lots of time and development hours.
RTL Master app will:
- Make your online store friendly to your local users by providing an RTL layout of your theme and checkout in your language.
- Use Arabic fonts
- Translate and RTL store notifications (order confirmation, abandoned checkout, etc..)
- Allows Multi-Lingual websites to show the correct layout (RTL/LTR) based on the current language being loaded.
