Replace the language selection menu in Magento with flag icons

In most Magento templates, we have the language selection option provided as usual with a drop-down menu. Let's take a look at one way to improve the look of our site and make it more appealing to visitors. In the example below, I'll show you how to set up a multilingual store and replace the standard language selection menu with flag icons.

Step 1:

First, we need to create several store views. Each view will represent a separate language. We go to Admin->System->Manage Stores. Here you can additional store views. Click the button "Create Store View". In the next window, you need to set the 4 required settings. In the "Store" field, select your store. Then fill in the "Name" field with the language name, such as "English". The code field is the ID which we will use in our selector logic. Fill it with the value "en" for this example. The status field should be selected "Enabled". If you wish, you can fill in the ordering field. Click the button Save Store View. Now we have an additional shop view. Try adding another view with the code "de" or any other language using the same processes.

Step 2:

Now, go to Admin->System->Configuration. At the top left of the page you will see the store selector:

In this menu you will find your store views. Choose one of them, for example "English". Then click on the "General" tab. From the general settings page, select the "Locale Options" tab. The first option on this tab is "Locale". Uncheck "Use Website" to enable it and select "English" from the list. Now click "Save Config" at the top of the page. Select "Locale" for another store views likewise.

Step 3:

The next thing to do is to find the flags of the countries we need. You can download flags from any resource you like, like Wikipedia or Google images). All flags need to be the same size and format and have the same extension (* .jpg, * .png, * .gif or other). The image names must match the codes for store viewsthat you introduced earlier when we created the store viewssuch as en.png, de.png, etc. Once you have downloaded and renamed the flag images, you need to put them in the skin folder of your template. For example, my template is called "Shopper" - I need to go to /skin/frontend/default/shopper/images directory and create a new directory there called "flags" and put all the files there. It should look similar: [store path]/skin/frontend/default/shopper/images/flags/.

Step 4:

In this step, we need to edit the code for the language selection. We go to [store path]/app/design/frontend/default/[your template]/template/page/switch/ . There we will find the "languages.phtml" file. If there is no such file, we need to copy it from here [store path]/app/design/frontend/base/default/template/page/switch/ . Download this file to your computer and save it somewhere just in case, then open the file with your favorite editor and add the following code:

The last step is to make the flags visible where we like. Open the file styles.css which is located в [store path]/skin/frontend/default/[your tnemplate]/css/styles.css and edit the flag styles depending on your project needs. In my example, the styles look like this.

Id. Now, as always, we need to clean the cache, wash our hands and click the refresh button on your interface to see the changes. If you don't see any change, then what you were doing was something wrong. The most common problem is a missing language selection in the layout portion of the template.Open the file [store path]/app/design/frontend/default/[your template]/layout/page.xml and search for "languages". You should find something similar:

If there is no such part, you should add it in the section "header". If everything is done right, something like this will happen:

The code used in this article was downloaded by me in real conditions and works if everything is executed properly.

Good luck!

Source: CUC