How to create a multi-language store site with nopCommerce

How to create a multi-language store site with nopCommerce

As a store owner, when you are selling products globally (in multiple countries or regions), it becomes quite important to offer a multilingual website that allows online shoppers to change the default store language to their native language. The good news is that nopCommerce does support multi-language option that enables store owner (or administrators) to add / install multiple languages on the store site.


In this tutorial, we will cover these 3 topics:

- Adding a new language pack

- Adding a new custom string resource

- Localization settings


Adding a new language pack


In nopCommerce, your store can have several languages installed. However, the customers will only see the data that has been defined in their selected language.

NOTE: By default, the English language is installed.


To add a new language page, go to: Administration > Configuration > Languages 


nopCommerce Multi Language support



Now, click on "Add new" button:


nopCommerce Multi Language support



Name of the new language

Language culture - a specific language code (for example, de-AT for Austrian German)

Unique SEO code - a two letter language SEO code used to generate URLs like when you have more than one published language. Note: “SEO friendly URLs with multiple languages” option should be enabled in Configuration → Settings → General Settings → Localization settings tab.

Flag image file name - enter the flag image file name. The image should be saved under the …/images/flags directory. You can also choose an image from a predefined list.

Tick Right-to-Left if needed (for example, for Arabic, Hebrew, etc). Note: The active theme should support RTL (have an appropriate CSS style file). This option affects only the public store.

Default currency for a specific language. If not specified, then the first found one (with the lowest display order) will be used.

Limited to stores option allowing to set this language for a specific store(s). You can choose the store(s) from a pre-created list. Leave this field empty if you don’t use this option.

Publish the language, to enable this language to be visible and selected by visitors in your store.

Display order of the language. 1 represents the top of the list.

Click Save.


NOTE: If you can't find your language in this language dropdown, you can download new language packs from the official Marketplace.


In this example, I have added "French" as a secondary language to my nopCommerce store site.


nopCommerce Multi Language support



As soon as you save and publish the new language pack, go to your public store and you should see the new language in the dropdown menu like this:


nopCommerce Multi Language support




Adding a new custom string resource


Now, that we have added a new language pack, let's look into the steps that are required to add a new string resource (for example, if you would like to add a text to any page that should change automatically based on the selected language along with the translation).


Select a language for which you would like to add a new string resource and open the tab "String resources".

In this example, we selected "English" language pack.


nopCommerce Multi Language support



Click on the "Add new record" button and enter the information for the new custom string resource.

- In the Resource name field, enter the resource string identifier
- In the Resource value field, enter a value for this resource string identifier



nopCommerce Multi Language support 


Saving meaning, we have added your custom text for English language. Now, we have to repeat this process for adding the same resource (in other languages(s)).


Now, in order to add this custom string resource on your webpage, open the view file (in this case, we are adding it in homepage) so, we are going to open: Nop.Web/Views/Home/Index.cshtml


Add this line of code:



With the above code, the DIV on homepage view file looks like this:


<div class="page home-page">
    <div class="page-body">
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")


If we go to the public store and refresh the homepage, we should be able to see the text like this:


nopCommerce Multi Language support


Note: This text will change with the language selection if you have saved all the translation as resource value in all language packs.



In your case, if you are not adding any new text and would like to simply change / update the existing text. You can do so by searching for an existing text value or resource name.


nopCommerce Multi Language support




Localization settings


You know how to add a new language pack and how to add a new string resource. Now, let's look into some localization settings.


Go to: Administration > Configuration > Settings > General Settings


nopCommerce Multi Language support




Scroll down and you will find the "Localization" settings:


nopCommerce Multi Language support



Load all local resources on startup to load all local resources on application startup

Load all localized properties on startup to load all localized properties on application startup

Load all search engine friendly names on startup to load all search engine friendly names on application startup

Use images for language selection to use images instead of language names

SEO friendly URLs with multiple languages enabled to allow SEO friendly URLs for all languages

Automatically detect language for detecting language based on customer browser settings.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment