PrestaShop block currency module as list

Default PrestaShop module to display available in store currencies displays currencies with dropdown effect. In this tutorial I want to show you how to display list of available currencies with nice "selected" effect like I show on image above. We will need to modify two things: blockcurrencies module template file and module css styles. This guide will work also for non-default themes, it's universal solution (in some cases you will need additional personalization of css styles).

Modification of module template file

First step: we need to modify module .tpl file. In this case we need to open /modules/blockcurrencies/blockcurrencies.tpl file. Remember: if module file exists in your theme directory (in /themes/YOUR_THEME/blockcurrencies/blockcurrencies.tpl) you will need to modify this file. Ok, so open correct module file and then clear all file contents and paste there code like i show below:

<!-- Block currencies module -->
<div id="currencies_block_top2">
	<form id="setCurrency" action="{$request_uri}" method="post">
		<p>
			<input type="hidden" name="id_currency" id="id_currency" value=""/>
			<input type="hidden" name="SubmitCurrency" value="" />
		</p>
		<ul>
			{foreach from=$currencies key=k item=f_currency}
				<li {if $cookie->id_currency == $f_currency.id_currency}class="selected"{/if} style="display:inline-block; margin-right:5px;">
					<a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}" rel="nofollow">{$f_currency.sign}</a>
				</li>
			{/foreach}
		</ul>
	</form>
</div>
<!-- /Block currencies module -->

Module CSS files modification

Now it's time to personalize the "design" of code that we pasted to module .tpl file. Open blockcurrencies.css file located in your theme directory and clear this file contents. Then paste there code from below:

#currencies_block_top2 li {padding:5px; background:#fff; text-shadow:1px 1px 1px #fff; border:1px solid #f2f2f2; font-size:16px; font-weight:bold; }
#currencies_block_top2 li a {color:#c0c0c0;}
#currencies_block_top2 li.selected {padding:5px; background:#ececec; text-shadow:1px 1px 1px #f2f2f2; border:1px solid #c0c0c0;}
#currencies_block_top2 li.selected a{ color:#000;}

That's all. After save you will see currencies list instead of dropdown currency switcher.