Magento: Add images to product attribute options

In a Magento project, we have sometimes the desire to associate an image with attributes options of our products. This can be useful in the layered navigation to highlight a list of colors rather than text alone, or associate a logo with the brand of a product and display it in the product view. I will show you how to contribute images directly from the back office and display them on your site with the free extension “Attribute Option Image”.


Archive is available on GitHub: You just have to unzip the package into your Magento root folder and then to clean the cache.

Add images in admin panel

To add images to options, you have to go to “Catalog > Attributes > Manage Attributes” and to select an attribute with options. For our example, we’re going to modify “Color” attribute. Here’s what we get:

Display in layered navigation

To find the image on the frontend, you have to create/modify the file
app/design/frontend/<package>/<theme>/template/catalog/layer/filter.phtml like below :

<?php foreach ($this->getItems() as $_item): ?>
        <?php if ($_item->getCount() > 0): ?>
            // Add attribute option image before label
            <?php if ($_item->getFilter()->getAttributeModel()->getAttributeCode() == 'color'): ?>
                <img src="<?php echo Mage::helper('attributeoptionimage')->getAttributeOptionImage($_item->getValue()); ?>" alt="" />
            <?php endif; ?>
            <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        (<?php echo $_item->getCount() ?>)
<?php endforeach ?>

And we get this on frontend:

Other use cases

To retrieve the image of an option anywhere in the Magento code, you should use the helper for this purpose:

$optionId = $product->getColor();


Extension has been tested on following versions of Magento: 1.4.x, 1.5.x, 1.6.x.

104 Responses to “Magento: Add images to product attribute options”

  1. Alex says:

    Thanks for sharing such a great extension. Really useful for the community of Magento developers.

  2. Li says:

    This is a great tutorial, however when trying it on a 1.6 magento shop and using the code above in filter.phtml, it throws an error that the attribute model is not defined in Abstract.php in the core files. When attempting to put the code under “Other use cases” in list.phtml it gives an error and does not like getColor. What should be the code to use? Thanks.

    • Zsolt says:

      Hi Li,

      I think You haven’t “color” attribute in your magento back office.
      In the code above use will show the images of attribute in the “color” section on the filter sidebar. You can see the example picture under the code.
      If you have an other attribute (too) than you can change this line in the code:
      “…->getAttributeCode() == ‘color’)…”

      It’s en very usefull modul and THX for Johann. :)

      Just an idea: I have changed the “…->getAttributeOptionImage(…” function to “…->getAttributeOptionThumb(…” function.


      • Bromme says:

        Hi Zsolt,

        I was searching for “…->getAttributeCode() == ‘color’)…” in the code, but I can’t find it. Can you please let me know in which file it is so I can modify it.

        Thank you in advance!!!
        Kind regards,


  3. OSdave says:

    thanx for sharing this module, works great on a
    I just wanted to say that the link to github is not working. Anyway, best way to install the module is using modgit, as you explained in a previous post:
    /var/www/magento$ modgit clone jreinke_attribute_option_image

  4. Patrick says:

    Bonjour, serait il possible de remettre l’archive online? merci

  5. Rostislav Kuzmin says:

    Thanks a lot!!!

  6. Trev says:

    Good man! And you use Github. Happy days, exactly what I was looking for.

  7. Trev says:

    Can I make a request? Can this plugin have the ability to just add a hex value to display the color instead of an image?

  8. Trev says:

    I was getting the following error “The attribute model is not defined”. After a bit of research it turns out I was getting this error because I have Category filtering enabled.

    Here is how I got around it:

  9. romkachaos says:

    hi Johann, how can i get all images in product_view by Multi Select Attribute, can u help me pls.

  10. romkachaos says:

    ty Johann

  11. arjun says:

    i follow the foolowing procedure but i get Fatal error: Call to a member function getColor() on a non-object in F:\wamp\www\magentotest2\app\design\frontend\base\default\template\checkout\cart\sidebar\default.phtml on line 146

    error in side bar

    i dont know what to do..
    if any one know please help

  12. gabs says:

    Merci pour ce super plugin, tout fonctionne en back office, en revanche rien ne s’affiche en front office.
    J’utilise un produit configurable et mes couleurs sont dans une liste déroulante.
    Merci encore.

  13. Sarah says:

    Hi there, thank you for your tutorial – it is exactly what I needed for our website. Wondering if you can help a bit further – is it possible to have a specific attribute show the image either under or next to the product name in product view. I am using this for showing price groups (ie bronze, silver etc) and it would be great to have the attribute image showing near the product name for easy reference.hope that makes sense!

  14. scarlett says:

    I needed to display on product view nothing shows up.
    I used this for retrieving the image:
    <img src="getAttributeOptionImage($optionId);?>” alt=”image”/>

  15. Lmedou says:

    Cela semble l’extension idéale mais c’est le code qui s’affiche dans mon magasin, au lieu de l’image. Qu’est ce que je n’ai pas fait…
    Je me sens un peu idiot…

    Merci de vos réponses.

    • Johann Reinke says:


      Pas évident de vous aider sans plus d’informations. Essayez de mettre un bout de code et/ou l’affichage obtenu pour qu’on puisse vous guider pour corriger.

  16. romkachaos says:

    scarlett – look at attributes.phtml , i did it, something like this , u have to change getSostav to your own attribure name ->getName

    if(isset($optionIds)): ?>
    htmlEscape($this->__($_data['label'])) ?>

    foreach($array_optionIds as $key => $optionId):
    echo “getAttributeOptionImage($optionId).”>”.$array_optionsvalue[$key].””;
    echo “”;
    htmlEscape($this->__($_data['label'])) ?>
    productAttribute($_product, $_data['value'], $_data['code']) ?>

    • scarlett says:

      thnx for the help..really greatfull.
      I tried as u said my code goes here but still nothing dispplay :(


      htmlEscape($this->__($_data['label'])) ?>
      foreach($array_optionIds as $key => $optionId):
      echo “getAttributeOptionImage($optionId).’>’.$array_optionsvalue[$key].'”;

      htmlEscape($this->__($_data['label'])) ?>
      productAttribute($_product, $_data['value'], $_data['code']) ?>

  17. Amit Samtani says:

    Hello Johann,

    When I try uploading an image I get an Upload HTTP Error. I assume that I don’t have some permissions set properly. Which folder are the images supposed to get uploaded to?

    This looks like a really nice extension!


  18. flanger says:

    Just great! Is there a way to use these images in the dropdown menu of the configurable products? Would be so great. I use this script to get images and dropdowns to work:
    but don’t know how to get the images to show up in the configurable products dropdowns…i just cannot find the place where the options are created…

  19. Amrit says:

    Hi .. Can I use this for Magento Enterprise?

  20. Amrit says:

    Hi Johann .. Just an update, this works great in EE 1.12. I have been able to show color images under Shop by.

    However, I have a question regarding showing images for color in drop down menu of color under configurable product on product page. How can I do this?

    Plus I would also like to change product image to change with appropriate color of product as well.
    Any feedback will be appreciated. Many Thanks.

  21. Madris says:

    Hi Johann,

    thanks for this! I was looking for such an extension.

    I´d like to have it been displayed in product view, could you let me know the code for the .phtml file?

    Danke :-)

  22. Nitin says:

    Hi Johann,
    I just tried this with Magento Community 1.7 and it worked as promised! Thank you!

    I was wondering if its possible to do the same for option values? Lets say if I have different patterns that a customer can select from. If could modify the code to store not just images for product options, but also images for product option values…

    Any help or code would be MUCH appreciated!

  23. Kevin says:

    Hi Johann

    I cannot get anything to display on the product page:

    Tried so many different ways, even the simple one line of code…
    php Mage::helper(‘attributeoptionimage’)->getAttributeOptionImages();?>
    …still nothing. :(

    Any help appreciated.

  24. This extension is great!. Although can it be used to attached images to just the attribute. for example, on my product page (front End) at additional information instead of the word for my attribute I would like an icon.

    Color(Image): Text(Color Type with no image)

    if this module can be manipulated to do this, that would be fantastic!



  25. Kamil says:

    how do i remove the getSkinUrl by default?
    let’s say i don’t want to use /skin/frontend/default/XXXX/images/ ?


  26. Kamil says:

    how do i use it in state.phtml?

  27. mrpiagg says:

    Extension rocks! Only thing that bothers me is why mediabrowser popup has no borders or whatsoever?? It should be a nice modal popup but it’s not??

    It look like this:

    Please help me


    • Olivertar says:

      this happens in versions 1.7.

      in model/Observer.php

      ->addItem(‘js_css’, ‘prototype/windows/themes/magento.css’); //Mage 1.6

      ->addItem(‘skin_css’, ‘lib/prototype/windows/themes/magento.css’); //Mage 1.7+

  28. Wouter says:


    Great extension! But i’m not really a pro in php. How can I echo the image of the attribute on category grid view (I use the manufacturer attribute for this).

    Any ideas?

    Thanks in advance!

  29. Wouter says:

    I’m not able to get this to work.

    It gives me the following error:

    Fatal error: Call to a member function getValue() on a non-object in /home/user/domains/ on line 98

  30. Wouter says:

    OK! For the other people who do not get it to work

    I use it for the manufacturer id as you can see below.

    I’ve made following changes to the code:
    <img src="getAttributeOptionImage($_item->getValue()) ?>” />

    <img src="getAttributeOptionImage($_product->getManufacturer()) ?>” />

    And make shure your attribute is visible on the frontend!

    Go to Catalog –> Attributes –> Manage attributes –> Select your attribute and go to the Frontend settings and make shure “Visible on product viewpage is enabled

    Kind regards,


  31. Wouter says:

    OK! For the other people who do not get it to work

    I use it for the manufacturer id as you can see below.

    I’ve made following changes to the code:
    getAttributeOptionImage($_item->getValue()) ” />

    getAttributeOptionImage($_product->getManufacturer()) />

    And make shure your attribute is visible on the frontend!

    Go to Catalog –> Attributes –> Manage attributes –> Select your attribute and go to the Frontend settings and make shure “Visible on product viewpage is enabled

    Kind regards,


  32. Trex says:

    Hello is it possible someone to tell us how to us this extension in product view details frontend page?
    I’m not Magento or PHP guru, so an example as for the layered navigation which works will be much appreciated for all the people that commented and couldn’t make this extension to work.

  33. RDCTBR says:

    Johann, would it be possible for you to post and/or send me the code for attributes.phtml? I have tried what has been posted here but cannot get anything to work, I’m sure it’s fairly simple but I am a PHP novice.

    Thankyou in advance.

  34. BOB says:

    Hey Johann Reinke,
    I need to put my images in the product view. For all my products I have a select dropdown. This select is generate in ‘template/product/view/type/options/configurable.phtml’
    But the differents options of the select are created ‘template/product/view/options/js.phtml’ So the content of the list are generated in Json. How can I insert my image in the option? I know in html, we can’t put image in option. Don’t worry, if i can put image in option text, after that I transform all my to a dropdown with

  35. Chris says:

    I’m not able to get this to work.

    It gives me the following error:

    Fatal error: Call to a member function getColor() on a non-object

    refreshed cache uploaded images etc fine can see in attributes pages just not in product view and yes is set to visible on product view

  36. Scott says:

    First off great extension! Works a treat in the backend. Having some trouble implementing it though.

    I am trying to echo all the options in a foreach statement but I can’t get the value of the image. Any ideas? Your help is greatly appreciated.

    ->addFieldToFilter(‘attribute_code’, ‘manufacturer2′);
    $attribute = $attributes->getFirstItem()->setEntity($product->getResource());
    $manufacturers = $attribute->getSource()->getAllOptions(false);


  37. Scott says:

    Oops! I forgot to sort out the php tags. This should be better :D

    ->addFieldToFilter(‘attribute_code’, ‘manufacturer2′);
    $attribute = $attributes->getFirstItem()->setEntity($product->getResource());
    $manufacturers = $attribute->getSource()->getAllOptions(false);


  38. Scott says:

    $product = Mage::getModel(‘catalog/product’);
    $attributes = Mage::getResourceModel(‘eav/entity_attribute_collection’)
    ->addFieldToFilter(‘attribute_code’, ‘manufacturer2′);
    $attribute = $attributes->getFirstItem()->setEntity($product->getResource());
    $manufacturers = $attribute->getSource()->getAllOptions(false);

    foreach ($manufacturers as $manufacturer):
    echo $manufacturer['attributeoptionimage']; echo $manufacturer['label']

  39. Jaume says:

    First thank you very much for the extension.
    I have not read all the comments, just write the solution I’ve found to show the images in frontend product view.
    I hope it helps someone.

    replace de code in:


    ..or in your custom theme.
    for this other:

    $_attributes = Mage::helper(‘core’)->decorateArray($this->getAllowAttributes());
    isSaleable() && count($_attributes)):?>

    *getLabel() ?>
    <dddecoratedIsLast){?> class=”last”>
    getLabel() == “Color”) { ?>-

    <input name="super_attribute[getAttributeId() ?>]” id=”attributegetAttributeId() ?>” type=”hidden” value=”” />
    getResource()->getAttribute(‘color’); //load the configurable attribute here which is the color
    $frontend = $attribute->getFrontend();
    $selectOptions = $frontend->getSelectOptions(); //get the frontend labels and values of this attribute
    foreach($selectOptions as $color_prop){
    <img onClick="document.getElementById('attributegetAttributeId() ?>’).value =;” id=”” src=”getAttributeOptionImage($color_prop['value']) ?>” width=”30″ height=”30″>

    <select name="super_attribute[getAttributeId() ?>]” id=”attributegetAttributeId() ?>” class=”required-entry super-attribute-select”>
    __(‘Choose an Option…’) ?>

    var spConfig = new Product.Config(getJsonConfig() ?>);

    • Jaume says:

      Well, the code has been cut by the wysiwyg. can completely see here:

      • Vithal Bariya says:

        hi Jaume very nice code

        but some some mistake in image onclick event you can pass onclick=”document.getElementById(‘attributegetAttributeId() ?>’).value =;” id=”” when image click no fire any function that time product price up/down but your code is not work properly and not display any bug so any IDEA ??

        if yes so share

        you can view insert element firebug in view this type image source

        value =” it’s not true

        so help me

    • MagentoUser says:

      Hi folks – thanks for good work!
      I got the filter phtml working, but this last code for product view, i’m still lost!

      other experiences?

  40. Chris says:

    i am trying to impliment this for a custom attribute called bandc_colour i am a novice at this so please help me impliment this. i can see how to the images in the admin and i am getting no errors here however what i am struggling with is calling the images into the product view page.

    i get the error:
    Fatal error: Call to a member function getColours() on a non-object in …….template/catalog/product/view.phtml on line 166

    when i have entered:

    echo Mage::helper(‘attributeoptionimage’)->getAttributeOptionImage($_product->getbandc_colour());

    i am sure this is a great extension and would be a great edition to my site any help would be greatfully recieved.

  41. varun says:

    Hi Johan

    When user upload image using image from media library, it auto corrects the url. But when i transfer website from my machine to live server it sill take the same url. Can i have solution for this problem.

    waiting for your reply. please if possible can you suggest something on this from an email.


  42. khan says:

    i Opened

    i added following code

    i get this error
    Fatal error: Call to a member function getColor() on a non-object in /home/app/design/frontend/default/wd/template/catalog/product/view.phtml on line 172

    So, how?
    i thing it is a new extension. maybe need wait little

  43. Amrit says:

    Hi Jaume – Thank you for the code on product view.
    I tried it and am able to show color images on product view page. However, can’t get the images to click / select color.

    Hope someone can guide me with this.
    Thank you.

  44. Shad says:

    Je tenais à vous remercier pour le plugin développé sous Mag. qui offre une belle alternative pour ajouter des images aux options d’attribut.
    J’ai suivi vos indications et tout fonctionne au niveau du back-office. Après avoir créer l’attribut “soldes” avec les options et les images liés, je voudrais savoir comment afficher cet attribut sur les fiches produits via le fichier view.phtml ?
    D’avance merci.

  45. Kristian says:

    Someone further up asked the question how to deal with Multi-select attributes – which AFAICS won’t work with the code above.

    Is it possible if you have a multi-select attribute, to get all the associated images and loop them out. (In say, a list or whatever).

    Otherwise, great little plugin. Just can’t figure this one out.

  46. Zvensoin says:

    Great tutorial and a gread extension!!! Everything is working fine except the search…. I have managed to output the attribute filter as dropdown lists and it looks great. I have 5 attributes but only one with images. Unfortunately the search is not working any more. If i search for an attribute i get the attribut-model not defined error. My filter.phtml looks like this:

    getItems() as $_item): ?>
    getFilter()->getAttributeModel()->getAttributeCode() == ‘color’): ?>
    <option title="getFilter()->getAttributeModel()->getAttributeCode() == ‘color’): ?>getAttributeOptionImage($_item->getValue()); ?>” value=”urlEscape($_item->getUrl()) ?>”image=”getFilter()->getAttributeModel()->getAttributeCode() == ‘color’): ?>getAttributeOptionImage($_item->getValue()); ?>”>getLabel() ?> getCount() */ ?>

    getFilter()->getAttributeModel()->getAttributeCode(); ?>
    <option value="urlEscape($_item->getUrl()) ?>”>getLabel() ?> (getCount() ?>)

    what am i doing wrong? Please help me!

  47. Peter says:

    Thanks for the code Johann!

    I got it to work in 1.7.2 by placing the code not in
    but in

  48. David says:

    For anyone with this error:The attribute model is not defined

    just code your filter.phtml like that:

    getItems() as $_item): ?>

    getCount() > 0): ?>
    getFilter()->getData(‘attribute_model’)!=NULL ?>
    <img src="getAttributeOptionImage($_item->getValue()); ?>” alt=”” />

    <a href="urlEscape($_item->getUrl()) ?>”>getLabel() ?>
    getLabel() ?>

    (getCount() ?>)

  49. Lloyd says:

    I’ve been searching for this capability for ages! Now I just need to get it to work with 1.7.2. (Also noticed Magento2 is integrating jquery.. any ideas for mage2?) My idea is to create somewhat of a product assembler or associate different product options(attributes) on the product view and allow customer to choose attributes and update product image with the options a customer chooses. Anyone tried doing anything like this?

  50. asher says:

    hi guys id love to see official code fixes regarding manufacturer attribute error after search. search not working.

  51. andrei says:

    If anyone has used this extension together with EasyTabs, I would appreciate some help in getting it to work, it seems that EasyTabs uses different templates for product page and I have no idea what to modify in order for it to work proper.

  52. riski says:

    hello pls provide these extention in magento

  53. asher says:

    any one knows how to fix “The attribute model is not defined” on manufacturer attribute??

    • kajal says:

      use the following code :

      getItems() as $_item): ?>

      getCount() > 0): ?>
      getFilter()->getAttributeModel()->getAttributeCode() == ‘color’):
      $showColor = true;
      } catch (Exception $e) {}


      <img src="getAttributeOptionImage($_item->getValue()); ?>” alt=”” />

      <a href="urlEscape($_item->getUrl()) ?>”>getLabel() ?>
      getLabel() ?>

      (getCount() ?>)

  54. Jamie Murphy says:

    any news on making this 1.7 compatible? As far as I can tell it works functionally but the CSS for the admin image upload is messed up.

  55. Tyler says:

    Maybe I am doing something dumb here but I uploaded the zip file and unarchived it in my root folder. I have cache disabled for now. Still nothing in the manage attribute section. Any help is appreciated!

  56. Alessandra says:

    Hello! I use Magento and clicking a category that has sub category the following error appears:
    “The attribute model is not defined”

    The line would be this:
    getFilter()->getAttributeModel()->getAttributeCode() == ‘color’): ?>

    When I have only the category, works perfectly!
    Anyone know how to solve the problem?
    I appreciate the help!

  57. harry says:

    Hi there, great extension for the filter(layer)Navigation. Thx for that.

    Now i try to display these images on the detailview.
    can someone post a snippet how to display a multiSelect with images on the detailview (product)?

    Would be nice!

  58. stebcom says:

    I use Magento C.E. and I have problems when I have to work with many attribute options: shockwave flash crashes and I just can’t upload images. Is there a way to fix this or, at least, can you give me some advice to manually do this work? Which are the DB tables affected?

  59. nero says:

    I used Jaume’s method to add this to my configurable product page and it displays.

    However I can’t get the images to show up. The backend looks funny to me and I’ve tried ->addItem(‘skin_css’, ‘lib/prototype/windows/themes/magento.css’); but I when I have that line and js_css commented out it displays but I can’t save the page. Not picking up any js errors in the console.

    This is my code:

  60. Chayan says:

    Hi Johann,

    I’ve installed your extension in Magneto 1.7 and seems to be working fine but one problem is occurring that “Catalog Search” is not working. When I’m writing any word or letter which present in the product name, then search is not working and error log saying ::

    “a:5:{i:0;s:34:”The attribute model is not defined”;i:1;s:4244:”#0 D:\xampp\htdocs\root\chayan-practice\magento\app\code\core\Mage\Catalog\Model\Layer\Filter\Abstract.php(239): Mage::throwException(‘The attribute m…’)

    Can you please help me out.


  61. Chintan Shah says:


    i am using this solution for color images its really great,
    Now i have an issue in product detail page i want to use the thumb image at right side but i haven’t correct code for get selected attribute option.

    Please help me as soon as possible

    Thanks and regards
    Chintan Shah

    • Chintan Shah says:


      I have solve my issue after so much efforts

      Use below code for view.phtml

      $attribute = $product->getResource()->getAttribute(“attribute_code”);

      $options = $attribute->getSource()->getAllOptions(false);

      foreach ($options as $_item):
      echo “getAttributeOptionThumb($_item['value']).”‘ width=’244px’ height=’330px’ />”;

  62. Varun says:


    Problem in Magneto

    Installed this extension, but when i go to Catalog > Attributes > Manage Attributes > Manage label and option

    Page is blank. But when i disable this module it works. Please help me with this.


  63. Luigi says:

    Hey, i for the life cannot figure out how to get this to work! Please help me out guys.

    What I want to do is have the attribute image for the ESRB in the product view of the products under additional information show up.

    I installed the program, I uploaded the Images, but I am stuck from this point forward. The attribute code is called esrb.

  64. md27 says:

    hi guys,

    Where can I download this extension?

    This is what I need for my shop.


  65. Joey3Fingers says:

    I recently bought bubbleshop ATTRIBUTE OPTION PRO.

    On the download purchase page its advertised to be compatible with: Magento Community 1.6.x, 1.7.x, 1.8.x, 1.9.x

    Now everything is paid for and installed and i can’t achieve attribute images displaying on product pages, i then find this page that that says that Compatibility on this Extension has been tested on following versions of Magento: 1.4.x, 1.5.x, 1.6.x.

    So does that mean its not going to work on CE 1.9 or am i doing something wrong with the code.

  66. js100 says:

    When you say…:

    To retrieve the image of an option anywhere in the Magento code, you should use the helper for this purpose:


    This only returns the image. How can I get the name of the Label that corresponds with the returned image?

  67. Saffet says:

    Can I get this extension for Magento Community 1.9?

Leave a Reply to romkachaos

* Required fields