How to Display Menu Thumbnails in PrestaShop 1.7 Top Menu

Apr 19, 2018

6331 Lena 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:


ico_presta_megamenu-2

MegaMenu

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:

Andrey_Dubina

Partner With Us

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

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.

ecommerce development

Ecommerce Development

Take your online store to the next level with BelVG Ecommerce Development

Visit the page
Andrey Dubina

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

15 Comments

  1. 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 (store@belvg.com) et décrire votre problème avec plus de détails.
    Merci et au plaisir d’être utile.

    Cordialement.

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

  3. 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.

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

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

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

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

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

  9. Hello!

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

  10. 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

  11. 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.

  12. 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.

  13. 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.

  14. 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.

Post a new comment

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