How to Display Menu Thumbnails in PrestaShop 1.7 Top Menu

Apr 19, 20185269
How to Display Menu Thumbnails in PrestaShop 1.7 Top Menu

For many internet users webstore design is as important as traded goods. The whole experience of online shopping is made up of the details: background color, positions of blocks, buttons size. Every aspect should be pleasant. That’s why today in our PrestaShop 1.7 Tutorial we are going to talk about how to display menu thumbnails in PrestaShop 1.7 top menu.


After PrestaShop 1.7 installation you are able to operate with “classic” theme that was provided with the installation.


And you may notice that there are no menu thumbnails presented on front end, even after you have added them in backoffice.


How to solve

“Classic” theme menu file overrides PrestaShop core menu file. All we need is to take a look at PrestaShop core menu file, grab the code that is responsible for menu thumbnails and implement it into our template.

The file we need to take a look at is a ps_mainmenu.tpl file: prestashop/modules/ps_mainmenu/ps_mainmenu.tpl.

Here is the code we see in the file:

And here is the code we need to grab:



Bring your online retail to the new level with this premium BelVG extension

Download here

Implement the code into theme menu file: prestashop/themes/classic/modules/ps_mainmenu/ps_mainmenu.tpl.

Here is what we’ve got in theme ps_mainmenu.tpl file:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


Now make sure cache is disabled and take a look at front end where images appeared. Add some CSS to make thumbnails look appropriate for your needs. The result is shown below.


Here you can find a demo version of webstore with menu thumbnails.

Now you know how to work with PrestaShop 1.7 top menu and display menu thumbnails. If you still got questions, feel free to ask them in comments and I’ll reply them as soon as possible.

Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey


  1. Hello, thank you for your tutorial, and I have a question about links. You show images with CTA, but don’t show how we can add a link for these images.

  2. octavi4, you may wrap image into link tag and set path to category these images related, but this link will be the same for all thumbnail in the category, like this:
    < a href=”{$node.url}” rel=”nofollow” >
    <img src=”{$image_url}” >
    </a >

    In order to set different links for thumbnails you will probably need a menu module.

  3. Hello, I have problem with category menu. If I made new categories every item is in a vertical dropdown menu. I am not able to create more than 1 column. I want to make 2 horizontal menu (jeans and dresses.) like you under woman.

  4. Zoli, you need to create categories hierarchy in admin panel, main categories will be displayed in a row, subcategories will be displayed in a column in main menu. Don’t forget to assign categories to menu in Top Horizontal Menu module configuration.

  5. Hi
    Do you know how show a custom text only in a category/node ?
    I tried adding {if $ == 3}my custom text on shop category id 3{/if} and many others variables but nothing works

    thank you

  6. Hello!

    Your tutorial is very good.Unfortunatelly thmbnails show show for all categories but HOME.

  7. Hi Dércio, thanks, it works for “home” if you include “home” menu item in Menu Module from “Category” field, not from “CMS”.

  8. The image will show only for categories, that has subcategories, right?
    Any idea how to remove this restriction and show it for any subcategories.

  9. Jirka, images will be shown for those categories for which you have uploaded images in the backoffice.

  10. Lena, thank you for your great work! I’m new to PrestaShop, so I have a question – how to make a vertical menu?
    Thank you!

  11. Vitaly, what do you mean by vertical menu, columns in submenu? You can display items in submenu by configuring Menu module.

  12. Yes, 1-st level submenu items are horizontal, but 2-nd level are vertical. Anyway you can change menu items position with css styles, by removing float:left property that these menu items have.

  13. Hello, j’ai fait ce qui a été dit dans votre tuto mais malheureusement après avoir rechargé mon front affiche une page blanche

  14. Bonjour,

    Merci de lire notre blog. Nous ne sommes pas sûrs de ce qui pourrait se passer sur votre site car notre article fournit une solution pleinement opérationnelle. Pourriez-vous s’il vous plaît contacter notre support par email ( et décrire votre problème avec plus de détails.
    Merci et au plaisir d’être utile.


Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *