PrestaShop 1.6.x. How to display flags in the language switcher

This tutorial will show you how to display flags in the language switcher in the PrestaShop 1.6.x. themes.

PrestaShop 1.6.x. How to display flags in the language switcher

By default the language switcher displays only the names of the installed languages:

In order to add a flag in front of each language option in the language switcher, you need to do the following steps:

1. Go to administration panel -> Localization -> Languages and make sure all your languages have flags. If some of them don’t, you need to upload icons for them. To do it you need to perform the following steps:

   1. Go to http://www.famfamfam.com/lab/icons/flags and download the icons:

      

   2. Open the zip file you just downloaded and extract the icons you need to your local system.

   3. Go to administration panel – Localization – Languages, click the Edit button for the language in question.

   4. Upload the country flag from your computer:

      

   5. Save the changes.

2. Open up the themes/themeXXXX/modules/blocklanguages/blocklanguages.tpl file using your favorite code editor:

   

3. Insert the following code before {$language.name|regex_replace:"/\s\(.*\)$/":""} twice on lines 7 and 22 (approximately):

   <img alt="{$language.iso_code}" height="11" span="" src="{$img_lang_dir}{$language.id_lang}.jpg" width="16" style="margin-right: 2px;"/>
   

   so that it will look like this:

   <span><img alt="{$language.iso_code}" height="11" span="" src="{$img_lang_dir}{$language.id_lang}.jpg" width="16" style="margin-right: 2px;"/>{$language.name|regex_replace:"/\s\(.*\)$/":""}</span>
   

   

4. Save the changes in the blocklanguages.tpl and re-upload it to the server.

5. Refresh the main page of your store and now you see a flag in front of each language option in the language switcher:

   

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to display flags in the language switcher