HOWTO add brand or manufacturer logo to product pages

Last modified by Discovery on Thu, June 24, 2010 16:52
Source|Old Revisions  

This is an old revision of the document!


With vanilla Magento it is possible to show brand/manufacturer names on the page. These are text only and below the fold. Here is a simple method to show images above the fold where the main product information is, complete with a link that takes you to a page that shows you all products by the manufacturer.

Create Brand Logos

Since the logos are universal and unlikely to differ on a per-shop basis you may want to put these somewhere outside of the theme files. Make a directory /media/catalog/brands and put your logos in there. These can be jpg, png or gif. In this example gif images are used, all of them named as per the entries in the manufacturer attribute with underscores used for spaces. For instance the corresponding logo for ‘Acme Apparel’ becomes ‘Acme_Apparel.gif’.

Create Brand Pages

For each brand add a CMS page. Remember to set the layout, e.g. 3 columns. Include the brand name, intro text, a link to their website, words on their guarantee, sizing information and a link to all products by them. Also include a ‘back’ button so that people go back to the product and not onto the brand site ;-), for instance:

  1. <div class="category-title">
  2. <h2>Acme Apparel</h2>
  3. </div>
  4. <img style="float: right" src="/media/catalog/brands/Acme_Apparel.gif">
  5. <p>Clothes can make or break your brand identity. To have an edge - choose Acme Apparel.</p><p>2009 brings you even more choice - more styles, in the colours that matter.</p>
  6. <ul style="list-style-position:inside; list-style-type:square;padding:10px;"><li><a href="/catalogsearch/advanced/result/?manufacturer[]=NNN">Show all products by Acme Apparel</a></li>
  7. <li><a href="">Visit Acme Apparel online for detailed sizing information</a></li>
  8. <li><a onclick="history.go(-1)" href="#">Back</a></li></ul>

Note that you will need to get the reference to the ‘show all products’ correct. To do that, go into your ‘Advanced Search’, choose the brand and copy the manufacturer id returned in the results URL.

If you do not have time to setup CMS pages you can create URL rewrites that simply return the search results, i.e. add entries such as /Acme_Apparel → /catalogsearch/advanced/result/?manufacturer[]=NNN (where NNN is the search results URL id for the brand).

It will take a little while to setup these pages, just setup the one brand as a template at first. You may want to create the text in a spreadsheet application first for all the other brands as there is no way to copy CMS pages in vanilla Magento.

Open template/catalog/product/view.phtml and find somewhere where you want the logo to go, for instance after the line:

  1. <?php echo $this->getChildHtml('product_type_data') ?>


  1. <?php $brand=$_product->getAttributeText('manufacturer');
  2. echo '<a href="/'.str_replace(' ', '_',$brand).'"><img style="float: right; margin: 2px;" src="/media/catalog/brands/'.str_replace(' ', '_',$brand).'.gif" alt="'.$brand.'"></a>' ?>

Test and fettle

Make sure your products actually have a brand/manufacturer in the attributes and see what the results are. You will hopefully see the logo... With ‘firebug’ you can inspect and fettle the image to look right.

Optional: When satisfied with the look, move the inline styles from the CMS page and the .phtml file into your styles.css file so you can update the look more easily.

Complete and finish

Add in the rest of the CMS pages for each brand. You can also create a brands page to show these extra CMS pages or include them in category blocks.