How to add category images to your menu items

There may be a time when you want to use your category image in your menu. No doubt when you are creating a fanciful menu for a client.

Whatever the reason if done correctly it can make for a striking, effective menu. Here’s how to do it in Opencart (I’ve only tested in v1.5.6 but I reckon it should work in older versions, perhaps with slight changes):

EDIT: catalog/controller/common/header.php

FIND THIS CODE:

CHANGE IT TO:

Once that’s done you now utilise the new thumb variable from the array. So open your /catalog/view/theme/your-theme-name/template/common/header.tpl and simply use $category['thumb'] in your menu.

If you use vqmod then I’ve created one for you: Download Here

7 Responses to “How to add category images to your menu items”

  1. gandalf12

    I have attempted to set this up on my site, which at present is only hosted locally, but nothing happens.
    Is this because I have my category menu placed in the left column and this fix only works if it is in the top section as per the default theme?

    • thepath

      I didn’t test it in the sidebar category module. Do you have the display errors option on in the admin as it would be useful to know if the thumb variable gives an error?

      • gandalf12

        It doesn’t do anything as it appears not to recognize it is there. Presumably because it has picked up the sidebar menu in theme/template/module/category.tpl and uses that instead.

        • thepath

          But you are using the category thumb variable in the category.tpl and you get no error, correct?

          • gandalf12

            I have tried amending template/module/category.php and tpl using the steps detailed above.
            However, instead of showing the image, it shows text giving the path to the image.
            For example the category is Beef, after that it says shop/image/cache/data/cow.gif
            Do you know how to get it to show the image and not the path?

        • thepath

          You are using it within an img tag right? i.e. putting $category['thumb'] in the src bit

  2. gandalf12

    I have just tried a fresh install of opencart and gone through the steps detailed above.
    Once again instead of placing an image in the menu it shows the path , which in this instance shows
    http://localhost/bradburys/retail/image/cache/data/demo/compaq_presario-100×100.jpg
    However if I copy and paste the link location I get the following:
    http://localhost/bradburys/retail/index.php?route=product/category&path=20

    Do you have any idea what is going wrong?

Leave a Reply

You must be logged in to post a comment.