How to Display Menu Thumbnails in PrestaShop 1.7 Top Menu

Apr 19, 20181583Lena Tsybulenko
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.

Problem

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

How_to_Display_Menu_Thumbnails_1

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

How_to_Display_Menu_Thumbnails_2

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:

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:

Result

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.

How_to_Display_Menu_Thumbnails_3

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.



9 Comments

  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 $node.category.id == 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.

Post a new comment

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