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:
- what internationalization is, and why it’s important
- how we can add more languages in Magento 2
- how to translate CMS content, including pages
- how to internationalize modules and themes including adding translations, changing assets and making changes to the styles of the module or theme
Magento 2 is one of the most popular ecommerce platforms currently available. It offers tons of out-of-the-box features and tight security. Other than the built-in modules, with Magento 2 you can create your own modules and themes to create custom functionalities and design that fits your or your client’s needs.
This tutorial assumes you already have Magento 2 installed and working. If not, please follow the guideline from Magento 2’s official documentation.
Why Internationalization
Table of Contents
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 Website 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.
The website is only used to organize multiple stores under the same website. Think of it as a group.
The 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.
And finally, we have the 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. The URL path should start with /admin_. However, it will probably have a different suffix which you’ve set during installation.
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.
You’ll then see a form to fill in. You’ll first have to choose the store this store view belongs to if you have multiple stores.
Then, you need to enter the name of the store. Please note that the name is what the user will see on the front end of your website when choosing between stores. So, you can name it based on the language you’re adding.
You also need to add the code for the new store. You can choose any code you want, but it would be helpful to set the code based on the language. For example, en for English.
Finally, you’ll need to change the Status to Enabled to make sure the users see the store view.
You can also choose the sort order. This is helpful if you’re adding a new language, but you want that language to be the default language a user sees when they go to your website. If so, you can change the sort order here by setting a number, with the lowest (meaning the highest in order) being 0.
Once you’re done, click on Save Store View, and your store view will be added.
You might need to clear the cache at this point. You can do that by clicking on Stores in the sidebar, then Cache Management.
Then, choose Select All from the dropdown and click on Submit. This will clear the cache.
Now, 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.
Please note that this will look different based on your theme. The theme in the screenshot in Magento’s Luma theme, which comes installed by default in Magento 2.
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.
In this tutorial, 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.
Install Magento 2 Language Packs
Other than the strings and text you might add yourself in your own module, because strings in Magento 2 are common, there are free and open-source Magento 2 language packs that allow you to easily add translations to your Magento 2 website.
You can find language packs on Magento’s Marketplace, although most of them are not free.
Mageplaza offers a wide set of language packs you can install that are free and open source. They have 55 Magento 2 language packs that you can use for free.
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.
If you choose a Magento 2 language pack from a different provider, the steps should also be the same unless your provider states different steps.
Open your terminal and switch to the Magento project’s root directory. In that directory, run the following command:
composer require mageplaza/magento-2-<LANGUAGE>-language-pack:dev-master mageplaza/module-smtp Please note that you should replace <LANGUAGE> with the language you’re installing. In our case, it will be arabic. You can also find the name of the package by going to the GitHub page of the language (if you are downloading from Mageplaza) and checking the name of the repository.
After that’s done, you can go on your website, choose your new language if it’s not already chosen, and you’ll see that the page is translated to that language.
If the page isn’t translated, or there’s a problem with the styles of the page, then do the following.
Run the following command to generate the static content for the new language added:
php bin/magento setup:static-content:deploy ar_SA Make sure to replace ar_SA with the language you’re adding. You’ll also need to add the option -f if your Magento 2 instance is set to developer mode.
After that, execute the following commands to trigger reindexing and clear the cache:
php bin/magento indexer:reindex php bin/magento cache:clean php bin/magento cache:flush Continue reading Magento 2 Translation: How Internationalization Works on SitePoint.
