Adding Brand Logos to Prestashop Manufacturers/Suppliers Blocks

In this quick 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!

Brand Logos in the Manufacturers List in Prestashop

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!

Brand Logos in the Suppliers List in Prestashop

Need Prestashop Modules? Have a look at my Prestashop Addons Store!

Looking for quality PrestaShop Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under PrestaShop | RSS 2.0

Author Spotlight

Fabio Porta

Fabio Porta

Fabio has been involved in web development and design since 2005, when launched his first website at the age of 16. He’s now highly skilled in both client and server side development, along with design, and since August 2012 runs a successful website about PrestaShop tutorials and Prestashop Modules called Nemo’s Post Scriptum, at http://nemops.com

One Comment on Adding Brand Logos to Prestashop Manufacturers/Suppliers Blocks

  1. eileen quick says:

    Hi Fabio

    Thank you for taking the trouble to put this on the web. I have tried it but unfortunately even following your instructions completely I still cannot get the logos to show. I am using the default so have used exact files as you.

    What happens is that The writing just changes colour – no image appears. I have even tried loading the image into the img directory first but still does not work.

    Any ideas? as this would look great on the website I am working on.

    Many thanks

    Eileen

Leave a Reply

Your email address will not be published. Required fields are marked *


3 × = 3

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>