Translations
Why Internationalization
Internationalization (often abbreviated as i18n) includes both translating your website and changing the design or style of the website based on the language chosen. Depending on your project and the programming language or framework you work with, it can be done in various ways, but there are always tools to make it easier.
Internationalization attracts more users to your website, as adding different languages caters to users of different nationalities or different parts of the world.
This is especially important with ecommerce. One way to make sure your store understands its users and is able to convert them to customers is to provide more languages, making the store available globally.
Magento 2 Structure
Before we get into how we can add a language in Magento 2, let’s go over how a Magento 2 website is structured first.
In Magento 2, you need at least one website. In that website, you can create several stores but you also need at least one. Then, inside each store you need at least one store view.
Website: is only used to organize multiple stores under the same website. Think of it as a group.
Store: is used to specify which categories are sold in the store, which ultimately means which products are sold in the store. For example, you can have one website split into two stores — one for men’s clothes and one for women’s clothes.
Store view: which belongs to a store. Store views are what a user actually sees. Store views can have their own theme, pages, products, and more.
With this structure, you are able to separate your ecommerce website into different sections or even different websites. For example, you can have all your products in the same Magento instance, but split these products into different websites, or different stores inside the website.
This separation also allows you to set different settings for different websites, stores or store views in your Magento instance. You can change settings for an entire website, which will affect all of the stores in it and subsequently all store views in these stores.
You can also change settings for a store inside a website, which will change the settings for only this store and its store views, without affecting other stores or the main website.
Alternatively, you can change settings for store views, which would not affect their parent store or parent website.
Adding Languages in Magento 2
Languages are dependent on store views. Each store view can have its own language. So, when you want to add a new language, you actually need to add a new store view having a different language.
The store view can have the same settings as its parent store or website. So there’s no need for extra configuration unless you need to have different settings for that language.
Adding a Store View
In this section, we'll see how to add a new store view in Magento 2 using the Admin panel, and how we can choose the language of that store view.
Add a New Store View
First, go to your Magento 2 admin portal. Once you've gone to the admin panel and logged in, choose Stores from the sidebar, then All Stores.
In this page, click on Create Store View.
Choose a language for the store view
Next, we’ll choose the language of the store view. To do that, on the admin panel click on Stores in the sidebar, then Configuration.
Please note that on the admin portal, you’ll see a dropdown at the top left of almost every page with the label Scope that allows you to change the website, store, or store view. You use this when you want to change settings to a specific website, store, or store view rather than the default settings that will apply to all websites, stores, and store views.
So, on the Configuration page, choose the store view you just created from the dropdown. You’ll be asked to confirm your action. Click OK in the pop up.
Then, choose General tab under the General section in the sidebar if it’s not already chosen. Open the collapsible with the title Locale Options. Under the collapsible, uncheck Use Website on the right of the first field, which should be Locale, then choose from the dropdown the language you’re adding.
Once you're done, click Save Config at the top right. This will change your website’s language. However, you’ll notice that nothing has changed when you open the store you just added. This is because we still need to add translations to the language we added, as well as change styling if necessary.
Here Are The Steps
Step 1: Install Magento 2 Language Packs
In this tutorial, we’ll install their Arabic Language pack. You can choose any language pack, the process is the same for any language pack regardless of the language.
There are 2 different methods to install this language pack.
Method #1. Composer method (Recommend)
Go to SSH on server and cd to root magento and run commandlines below:
Method #2. Copy & Paste method (Not recommended)
This method suitable for non-technical people such as merchants. Just download the package then flush cache.
Unzip pack
Unzip the language pack to Magento 2 root folder. In this guide, we extract to /var/www/html/
Rename folder language-arSA-master to ar_SA
You also can unzip locally and upload them to Magento 2 root folder.
Flush Magento 2 Cache
Step2: Magento 2 Translation of CMS Content, Categories, Products...
In Magento 2, CMS pages and blocks can be included in specific store views rather than the entire website. This means that the page can be translated into many languages based on the store it’s in.
Step3: Translate Magento 2 Using Our Theme Translation Files
First in your server, you need to find the .csv file and copy it to create the required file for the translation. Please, check the example below.
../app/design/frontend/bluesky/bluesky_umino_default/i18n/en_US.csv
This is an example of the file for German translation:
../app/design/frontend/bluesky/bluesky_umino_default/i18n/de_De.csv
While translating, make sure all the strings in your .csv file start and end with double quotes, and are separated with comma [,], not semi-colon [;] or any other mark.
All the lines are case-sensitive, you should copy the phrase exactly as it is in the “en_US” version.
In the source “en_US” version the text looks like this:
The translated text should look like this:
Make sure your text editor saves .csv file in UTF-8 encoding, as it supports different alphabets. If you edit the file using Excel, convert it into UTF-8 encoding once you finish editing.
Step4: Translate Inline
You can use the Translate Inline tool in developer mode to touch up text in the interface to reflect your voice and brand. When the Translate Inline mode is activated, any text on the page that can be edited is outlined in red. It is easy to edit field labels, messages, and other text that appears throughout the storefront and Admin. For example, many themes use terminology such as My Account, My Wishlist, and My Dashboard, to help customers find their way around. However, you might prefer to simply use the words Account, Wishlist, and Dashboard.
Last updated
