In most Magento templates, we can see the language selector provided as a simple pull down menu. Let’s explore a way to enhance the look and make a more attractive, custom style.
In the example below, I’ll tell you how to make a multilingual store and replace the standard language selector with flag icons. Step 1:First of all, you should create a few store views. Each view will represent a separate language. Go to Admin->System->Manage Stores. Here you can the additional store views. Click the ‘Create Store View’ button. In the next window, you should set 4 required settings. In the Store field, select your store. Then, fill the Name field with the language name, such as ‘German’. The Code field is the view id which we will use in our selector logic. Fill it with the value ‘german’ for this example. The Status field should be set to ‘Enabled’. Optionally, you also can fill the Sort Order field. Click the Save Store View button. Now we have one additional store view. Try to add another view with the code ‘danish’ or any other language using the same process.Step 2:Now, go to the Admin->System->Configuration. At the top left part of the page you will see the store selector:

In this menu, you will find your store views. Choose one of them, such as ‘German’. Then, click on the ‘General’ tab. On the general setting page, expand the ‘Locale Options’ section. The first option of this section is ‘Locale’. Remove the checkbox ‘Use Website’ to make it active and choose German (Germany) from the list. Now click ‘Save Config’ at the top of page. Choose locale for other store views the same way.Step 3:The next thing we need to do is find the country flags needed. You can download flags pictures from any resource you like, such as Wikipedia or Google images). It is necessary for all of the flags pictures to be the same size and format and have the same extension (*.jpg, *.png, *.gif or other). You will need to rename those pictures to something that makes sense. Image’s names must match the store view codes you entered earlier when creating the store views, such as german.jpg, danish.jpg, etc. After you have downloaded and renamed everything, you need to put the images into the skin folder for your template. For example, my template is called ‘atwix’, so I should go to the /skin/frontend/default/atwix/images directory and create a new directory there called ‘flags’ and put all of the files there. So, the flags dir will be [store path]/skin/frontend/default/atwix/images/flags/.Step 4:For this step, we need to edit the language selector code. Go to [store path]/app/design/frontend/default/[your template]/template/page/switch/. There you will find the file ‘languages.phtml’. If there is no such file, you should copy it here from [store path]/app/design/frontend/base/default/template/page/switch/. Open this file from the new location with your favorite editor and add the following code:

After this, replace ‘.png’ with the extension of your images, if necessary.
The last step is to make the flags appear as you would like them to. Open the file [store path]/skin/frontend/default/[your tnemplate]/css/styles.css and edit styles for the flags block depending on your design. In my example, styles look something like this.

That’s it. Now, as always, you should clean your cache, wash your hands and click the refresh button on your frontend to see the changes. If you don’t see any change, then you do something wrong. The most common issue is a missing language selector part from template layout file. Open the file [store path]/app/design/frontend/default/[your template]/layout/page.xml and search for ‘languages’. You should find something like:

Where you have to set the store code manually: getCode() != ‘english’): ?>

Only thing you have to do then is to place the flags icons in the right directory, which is images/flags/

Cheers Tim

Yaroslav Rogoza

Hi. I need a little more detail to help you. What’s exactly doesn’t work? Did you get some error or you just can’t see flags? Do you see standard language selector on a frontend? Did you see it before changes? Thanks.

http://www.facebook.com/raimunds.jangovskis Raimund Jangovskij

Hi Ярослав, thank you, everything is showing. But i had one problem.

How to remove language selector

Just now in my web site is showing language selectors and under selectors are showing flags, how can I remove selector and leave only flag pictures ? I think you speak russian ?

I attached pic with example what I have now

http://www.facebook.com/yaroslav.andreevich.7 Yaroslav Rogoza

Hi Raimund. Check your languages.phtml file. There might be a standard selector. It looks something like … Just remove the whole select block code. If there’s no any select then it’s located in some other place of your custom template. In that case you can search (grep) your template’s source code for the select’s string mentioned above and remove it.

Thumbs up bro. worked fine with me. dont know if this solved the issue or not, but flags are now arriving as shown. :d cheers mate.!!!

cristian

Amazing. Finally I’ve installed the flags but now i’ve got a stupid question. How can I delete the normal languages magento’s form?I hope in your answer. Thanks in advance

haleel

thanks for the solution

Emma

This solutions worked great.

But i had one issue:

Lets say i have French and English version of my shop.

If i am on the product list / product view on french version and i click on the English Flag to change store; this would give me a 404.

Because the __from_store was missing in the URL.

So to fixed:

In flags.phtml, I’ve change this line:

href=”getCurrentUrl() . ‘?___store=’ . $_lang->getCode();?>” TO href=”getCurrentUrl()?>”. Since the getCurrentUrl() will passes the following values automatically (?___store=english&___from_store=danish)

Now error fixed! No more 404 when i shift from stores.

Contacts

hello@atwix.com (813) 708-8787 8 am — 5 pm GMT

About us

At Atwix, we specialize in e-commerce. Magento and OroCRM are the tools we use to make your business do better. From Custom Development to Design and SEO, we have your needs covered!