Translations

One of the most important features of creating ecommerce websites with Magento 2 is the ability to add multiple languages to your store. In this tutorial, we'll cover the following Magento 2 translation topics.

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.

By default, every Magento 2 installation will have a website, a store in the website, and a store view in that store.

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

Now, after Save Store View, You can go to your website. Depending on your theme, you should see a dropdown in the header of the website allowing you to switch between store views.

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.

For example: we're adding the Arabic language

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

Magento Localization offers a wide set of language packs you can install that are free and open source. https://github.com/magento-l10n

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:

composer require magento-l10n/language-ar_SA
php bin/magento setup:static-content:deploy -f
php bin/magento indexer:reindex
php bin/magento cache:flush
chmod -R 777 var pub generated (if you use linux)

• Method #2. Copy & Paste method (Not recommended)

This method suitable for non-technical people such as merchants. Just download the package then flush cache.

Download the language pack You can download the language pack from link: https://github.com/magento-l10n

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.

Translate a Content Page: https://experienceleague.adobe.com/docs/commerce-admin/content-design/elements/pages/page-translate.html

Translating Products, Categorires: https://docs.magento.com/user-guide/catalog/product-translate.html

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.

"Add to Cart", "Translated Text"

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:

"%s Item(s)","%s Item(s)"

The translated text should look like this:

"%s Items","%s Product(s)"

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.

https://docs.magento.com/user-guide/system/translate-inline.html