By default in prestashop languages switcher module display flags with dropdown effect. In this short tutoral i want to show you how to display flags inline like on picture above. It will be possible with blocklanguages module template file modification. This simple modification will work also in non-default themes.

Block languages module modification

What to do? For the first we must open correct module .tpl file. Open this directory: /modules/blocklanguages/ and module template file is: blocklanguages.tpl. If the same file exists in your theme directory - you have to edit file located there. So before you will start modification make sure that module template file doesn't exist in this path: /themes/YOUR_THEME/modules/blocklanguages/blocklanguages.tpl. 

Open module template file and remove whole file contents. Then paste there this simple smarty code:

<div id="languages_block_top">
<div id="countries">
  <ul style="list-style:none;">
  {foreach from=$languages key=k item=language name="languages"}
   <li {if $language.iso_code == $lang_iso}class="selected_language"{/if} style="display:inline-block;margin:2px;">
   {if $language.iso_code != $lang_iso}
	{assign var=indice_lang value=$language.id_lang}
	{if isset($lang_rewrite_urls.$indice_lang)}
	 <a href="{$lang_rewrite_urls.$indice_lang|escape:htmlall}" title="{$language.name}">
	{else}
	 <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}">
	{/if}
   {/if}
	 <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />
   {if $language.iso_code != $lang_iso}
	</a>
   {/if}
   </li>
  {/foreach}
  </ul>
</div>
</div>