{"id":6910,"date":"2019-03-15T10:42:50","date_gmt":"2019-03-15T05:12:50","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=6910"},"modified":"2020-10-09T18:46:55","modified_gmt":"2020-10-09T13:16:55","slug":"display-menu-thumbnails-in-prestashop","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/prestashop\/display-menu-thumbnails-in-prestashop\/","title":{"rendered":"How to Display Menu Thumbnails in PrestaShop 1.7 Main Menu?"},"content":{"rendered":"<p>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.<\/p>\n<p>Go to: <strong>Theme root directory > modules > ps_mainmenu > ps_mainmenu.tpl<\/strong><\/p>\n<p>Now, Copy the below code.<\/p>\n<pre>\r\n                            {if $node.image_urls|count}\r\n                                <div class=\"menu-images-container\">\r\n                                    {foreach from=$node.image_urls item=image_url}\r\n                                        <img decoding=\"async\" src=\"{$image_url}\">\r\n                                    {\/foreach}\r\n                                <\/div>\r\n                            {\/if}\r\n<\/pre>\n<p>Then place it to just after below line.<\/p>\n<pre>\r\n                            {menu nodes=$node.children depth=$node.depth parent=$node}\r\n<\/pre>\n<p>Modified file will be look like as below<\/p>\n<pre>\r\n{assign var=_counter value=0}\r\n{function name=\"menu\" nodes=[] depth=0 parent=null}\r\n    {if $nodes|count}\r\n        <ul class=\"top-menu\" {if $depth == 0}id=\"top-menu\"{\/if} data-depth=\"{$depth}\">\r\n            {foreach from=$nodes item=node}\r\n                <li class=\"{$node.type}{if $node.current} current {\/if}\" id=\"{$node.page_identifier}\">\r\n                    {assign var=_counter value=$_counter+1}\r\n                    <a\r\n                        class=\"{if $depth >= 0}dropdown-item{\/if}{if $depth === 1} dropdown-submenu{\/if}\"\r\n                        href=\"{$node.url}\" data-depth=\"{$depth}\"\r\n                        {if $node.open_in_new_window} target=\"_blank\" {\/if}\r\n                        >\r\n                        {if $node.children|count}\r\n                            {* Cannot use page identifier as we can have the same page several times *}\r\n                            {assign var=_expand_id value=10|mt_rand:100000}\r\n                            <span class=\"float-xs-right hidden-md-up\">\r\n                                <span data-target=\"#top_sub_menu_{$_expand_id}\" data-toggle=\"collapse\" class=\"navbar-toggler collapse-icons\">\r\n                                    <i class=\"material-icons add\">&#xE313;<\/i>\r\n                                    <i class=\"material-icons remove\">&#xE316;<\/i>\r\n                                <\/span>\r\n                            <\/span>\r\n                        {\/if}\r\n                        {$node.label}\r\n                    <\/a>\r\n                    {if $node.children|count}\r\n                        <div {if $depth === 0} class=\"popover sub-menu js-sub-menu collapse\"{else} class=\"collapse\"{\/if} id=\"top_sub_menu_{$_expand_id}\">\r\n                            {menu nodes=$node.children depth=$node.depth parent=$node}\r\n                            {if $node.image_urls|count}\r\n                                <div class=\"menu-images-container\">\r\n                                    {foreach from=$node.image_urls item=image_url}\r\n                                        <img decoding=\"async\" src=\"{$image_url}\">\r\n                                    {\/foreach}\r\n                                <\/div>\r\n                            {\/if}\r\n                        <\/div>\r\n                    {\/if}\r\n                <\/li>\r\n            {\/foreach}\r\n        <\/ul>\r\n    {\/if}\r\n{\/function}\r\n\r\n<div class=\"menu js-top-menu position-static hidden-sm-down\" id=\"_desktop_top_menu\">\r\n    {menu nodes=$menu.children}\r\n    <div class=\"clearfix\"><\/div>\r\n<\/div>\r\n<\/pre>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-bo.png\" alt=\"menu-thumbnail-bo\" width=\"836\" height=\"266\" class=\"aligncenter size-full wp-image-6918\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-bo.png 836w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-bo-300x95.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-bo-768x244.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-bo-800x255.png 800w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/p>\n<p><strong>Front-office view:<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-fo.png\" alt=\"menu-thumbnail-fo\" width=\"1113\" height=\"345\" class=\"aligncenter size-full wp-image-6919\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-fo.png 1113w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-fo-300x93.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-fo-768x238.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-fo-1024x317.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/02\/menu-thumbnail-fo-800x248.png 800w\" sizes=\"(max-width: 1113px) 100vw, 1113px\" \/><\/p>\n<p>That&#8217;s all.<\/p>\n<div class=\"angwp_12010 _ning_cont _ning_hidden _ning_outer _align_center responsive\" data-size=\"custom\" data-bid=\"12010\" data-aid=\"0\" style=\"max-width:800px; width:100%;height:inherit;\"><div class=\"_ning_label _left\" style=\"\"><\/div><div class=\"_ning_inner\" style=\"\"><a href=\"https:\/\/www.hiddentechies.com\/blog?_dnlink=12010&t=1776694467\" class=\"strack_cli _ning_link\" target=\"_blank\">&nbsp;<\/a><div class=\"_ning_elmt\"><img decoding=\"async\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/angwp\/items\/12010\/Banner-2.png\" \/><\/div><\/div><\/div><div class=\"clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>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&#8230; <\/p>\n<div class=\"actions\"><a href=\"https:\/\/www.hiddentechies.com\/blog\/prestashop\/display-menu-thumbnails-in-prestashop\/\">Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":6969,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[221,222,2139],"tags":[627,628,313,329,626],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/6910"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=6910"}],"version-history":[{"count":11,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/6910\/revisions"}],"predecessor-version":[{"id":6962,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/6910\/revisions\/6962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/6969"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=6910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=6910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=6910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}