How to Display Menu Thumbnails in PrestaShop 1.7 Main Menu?

Default Classic template does not allow to display menu thumbnail image on front-office. To display menu thumbnails in the main menu you need to just follow the below steps.

Go to: Theme root directory > modules > ps_mainmenu > ps_mainmenu.tpl

Now, Copy the below code.

                            {if $node.image_urls|count}
                                

                                    {foreach from=$node.image_urls item=image_url}
                                        
                                    {/foreach}
                                
                            {/if}

Then place it to just after below line.

                            {menu nodes=$node.children depth=$node.depth parent=$node}

Modified file will be look like as below

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
        

            {foreach from=$nodes item=node}
                

                    {assign var=_counter value=$_counter+1}
                    
                        {if $node.children|count}
                            {* Cannot use page identifier as we can have the same page several times *}
                            {assign var=_expand_id value=10|mt_rand:100000}
                            
                                
                                    
                                    
                                
                            
                        {/if}
                        {$node.label}
                    
                    {if $node.children|count}
                        

                            {menu nodes=$node.children depth=$node.depth parent=$node}
                            {if $node.image_urls|count}
                                

                                    {foreach from=$node.image_urls item=image_url}
                                        
                                    {/foreach}
                                
                            {/if}
                        
                    {/if}
                
            {/foreach}
        
    {/if}
{/function}


    {menu nodes=$menu.children}
    

Now save the changes and clear the cache after uploading menu thumbnails image from the back-office. Your uploaded menu thumbnail image will be visible in main menu on front-side.

Front-office view:

That’s all.

 

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!

Related Read:  How to Install a Module in PrestaShop | HiddenTechies