Flash Tip: Brand logos to Prestashop Manufacturers/Suppliers blocks

In this Flash tip we will see how to add brand logos to both the manufacturer and supplier block in Prestashop

Whether you want to use Manufacturers or Suppliers to display your brands across your web store, it’s a good idea to showcase their Logos, instead of names, in the menu. Let’s see how to do it for both entities. As always, note that I’m using the default theme and your css or tpl files might differ.

Displaying Brand Logos in the Manufacturers block

Open up blockmanufacturer.php, located in your theme’s folder /modules/blockmanufacturer. If this folder is not present, reach your main /modules/ folder, then open blockmanufacturer/ and copy blockmanufacturer.tpl in the previously mentioned location.

In this .tpl file, locate, at about line 35, the following code snippet:

<li class="{if $smarty.foreach.manufacturer_list.last}last_item{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}"><a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'html'}" title="{l s='Learn more about' mod='blockmanufacturer'} {$manufacturer.name}">{$manufacturer.name|escape:'htmlall':'UTF-8'}</a></li>

We want to grab the image instead of text:

<li class="{if $smarty.foreach.manufacturer_list.last}last_item{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}"><a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}"><img src="{$base_dir}img/m/{$manufacturer.id_manufacturer}.jpg"/></a></li>

Please note that the file extension might change if you use .png as your base image format in .Preferences -> Images.

Of course, you can hardcode the image’s max width according to your layout! As a final touch, let’s get rid of those useless arrows at the left side: Open up the theme’s global.css located inside the theme’s folder, /css/, and look for

	.blockmanufacturer li a {
		display:block;
		padding:7px 11px 5px 22px;
		color:#333;
		background:url(../../../modules/blockmanufacturer/img/arrow_right_2.png) no-repeat 10px 10px transparent
	}

Then, change it to

	.blockmanufacturer li a {
		display:block;
	}

Done!

Displaying Brand Logos in the Suppliers block

This is quite similar as before, open up blocksupplier.php, located in your theme’s folder /modules/blocksupplier. If this folder is not present, add it as we did before.

Now locate the following snippet in the file:

<li class="{if $smarty.foreach.supplier_list.last}last_item{elseif $smarty.foreach.supplier_list.first}first_item{else}item{/if}">
			<a href="{$link->getsupplierLink($supplier.id_supplier, $supplier.link_rewrite)|escape:'html'}" title="{l s='More about' mod='blocksupplier'} {$supplier.name}">{$supplier.name|escape:'htmlall':'UTF-8'}</a>
		</li>

Add the image to replace the text inside the anchor tag:

<li class="{if $smarty.foreach.supplier_list.last}last_item{elseif $smarty.foreach.supplier_list.first}first_item{else}item{/if}">
	<a href="{$link->getsupplierLink($supplier.id_supplier, $supplier.link_rewrite)|escape:'html'}" title="{l s='More about' mod='blocksupplier'} {$supplier.name}"><img src="{$base_dir}img/su/{$supplier.id_supplier}.jpg"/></a>
</li>

Again, note that the file extension might change if you use .png as your base image format in .Preferences -> Images.

And once more, let’s get rid of the arrows as we did before, in global.css

	.blocksupplier li a {
		display:block;
		padding:7px 11px 5px 22px;
		color:#333;
		background:url(../../../modules/blocksupplier/img/arrow_right_2.png) no-repeat 10px 10px transparent
	}

Then, change it to

	.blocksupplier li a {
		display:block;
	}

Again, done!