Replace Default Store Switcher On Magento And Display Flags

Some magento users want to change the country dropdown as default store switcher to better looks that display the flags of the countries. Here is the default store switcher (I’m using the 1.8.0.1 version and the default theme).
default_store_switcherand we want it looks like this.changed_store_switcher
Okay. First we need to edit a file that responsible to display the country dropdown. The file is languages.phtml that resides in /app/design/frontend/base/default/template/page/switch directory. For users who are using different theme, the file should be resided in /app/design/frontend/[your_theme_name]/default/template/page/switch directory. Replace [your_theme_name] with the current frontend theme name. For example if you are using Meigee theme, the directory should be like this : app/design/frontend/meigeetheme/default/template/page/switch/. You can find out your current frontend theme in your admin magento page : System -> Configuration -> Design -> Package -> Current Package Name. Here is the steps for the default theme.default_theme
You can do the same steps for another theme like Meigee Theme like this : meigee_theme
Okay. Then we can edit languages.phtml from this :

  1. <?php if(count($this->getStores())>1): ?>
  2. <div class="form-language">
  3. <label for="select-language"><?php echo $this->__('Your Language:') ?></label>
  4. <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value"-->
  5. <?php foreach ($this->getStores() as $_lang): ?>
  6. <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
  7. <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
  8. <?php endforeach; ?>
  9. </select>
  10. </div>
  11. <?php endif; ?>

to like this (replace the <select> tag) :

  1. <?php if(count($this->getStores())>1): ?>
  2. <div class="form-language">
  3. <label for="select-language"><?php echo $this->__('Your Language:') ?></label>
  4. <?php foreach ($this->getStores() as $_lang): ?>
  5. <a href="<?php echo $_lang->getCurrentUrl() ?>"><img src="<?php echo $this->getSkinUrl('images/lang/'.$this->htmlEscape($_lang->getName()).'.png') ?>" alt="<?php echo $this->htmlEscape($_lang->getName()) ?>" /> <?php echo $this->htmlEscape($_lang->getName()) ?></a>
  6. <?php endforeach; ?>
  7. </div>
  8. <?php endif; ?>

Then we need to upload the flag images to /skin/frontend/base/default/images/lang/. If you dont find ‘lang’ directory, just create it. The flag images can be found on internet like at this link https://mafiatic-projects.googlecode.com/files/257-Flags-of-the-World-2.2.zip. I uploaded the images with 16×16 size. But you must be careful, the images name sometimes different with the countries name at the dropdown. You can use developer tool on your browser to find out the images name like this (I use Firefox developer tool). firefox_dev_tool
As far as I know, the images name in the 16×16 size directory use different name like England.png, France.png and Germany.png. You can upload the images to ‘lang’ directory then rename the images name to English.png, French.png and German.png respectively. If there is no anything wrong, the store switcher has changed and the flags image and the country name should be displayed like this.changed_store_switcher