{"id":80698,"date":"2017-05-24T10:42:42","date_gmt":"2017-05-24T14:42:42","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=80698"},"modified":"2017-07-03T05:36:20","modified_gmt":"2017-07-03T09:36:20","slug":"magento-change-products-search-results-page-layout-gridlist","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-change-products-search-results-page-layout-gridlist.html","title":{"rendered":"Magento. How to change products search results page layout (grid\/list)"},"content":{"rendered":"<p>This tutorial will show you how to change the layout (from grid to list) on Search results pages in your Magento store.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/LL1HkF8e7Bo\"><\/iframe>\r\n<\/div>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_1.jpg\" alt=\"\" width=\"1000\" height=\"563\" class=\"alignnone size-full wp-image-80699\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_1.jpg 1000w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_1-768x432.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a>\r\n \r\n <p>You can change the search results page view in 2 ways, from Admin panel and from server side.<\/p>\r\n<ol>\r\n<li><p>In order to change the view in the code:<\/p>\r\n<ol>\r\n\t<li><p>Login to your <strong>Hosting Control panel<\/strong> and navigate to <strong>File Manager<\/strong>.<\/p><\/li> \r\n\t<li><p>Find and open <strong>\/app\/design\/frontend\/tm_themes\/themeXXX\/layout\/local.xml<\/strong> file, where <strong>XXX<\/strong> is your theme number.<\/p><\/li>\r\n\t<li><p>Locate the<\/p> \r\n\t<pre>&lt;catalogsearch_result_index&gt;<\/pre>\r\n\t<p>and add to it <\/p>\r\n\t\r\n\t<pre>&lt;reference name=&quot;product_list_toolbar&quot;&gt;\r\n\t&lt;action method=&quot;setData&quot;&gt;&lt;key&gt;_current_grid_mode&lt;\/key&gt;&lt;value&gt;grid&lt;\/value&gt;&lt;\/action&gt;\r\n&lt;\/reference&gt;<\/pre>\r\n\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_2.jpg\" alt=\"\" width=\"1000\" height=\"563\" class=\"alignnone size-full wp-image-80700\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_2.jpg 1000w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_2-768x432.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a>\t\r\n\t\r\n\t<\/li>\r\n\t<li><p>If there is no<\/p>\r\n\t<pre>&lt;catalogsearch_result_index&gt;<\/pre> \r\n\t<p>you should add<\/p>\r\n\t<pre class=\"brush:xml\">&lt;catalogsearch_result_index&gt;\r\n\t&lt;reference name=&quot;product_list_toolbar&quot;&gt;\r\n\t&lt;action method=&quot;setData&quot;&gt;&lt;key&gt;_current_grid_mode&lt;\/key&gt;&lt;value&gt;grid&lt;\/value&gt;&lt;\/action&gt;\r\n\t&lt;\/reference&gt;\r\n\t&lt;reference name=&quot;root&quot;&gt;\r\n\t&lt;action method=&quot;setTemplate&quot;&gt;&lt;template&gt;page\/2columns-left.phtml&lt;\/template&gt;&lt;\/action&gt;\r\n\t&lt;\/reference&gt;\r\n&lt;\/catalogsearch_result_index&gt;<\/pre>\r\n\t\t<p>where <\/p>\r\n\t<pre>&lt;value&gt;grid&lt;\/value&gt;<\/pre>\r\n\t\t<p> stands for grid view, and you can change it into\r\n\t <pre>&lt;value&gt;list&lt;\/value&gt;<\/pre>\r\n\t <p> stands for list view.<\/p>\r\n\t \r\n\t \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_3.jpg\" alt=\"\" width=\"1000\" height=\"563\" class=\"alignnone size-full wp-image-80701\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_3.jpg 1000w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_3-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_3-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_3-768x432.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a>\t \r\n\t \r\n\t <\/li> \r\n\t\r\n\t<li><p>Press the <strong>Save<\/strong> button.<\/p><\/li>\r\n<\/ol>\r\n<\/li>\r\n<li><p>In order to change the view in the admin panel (this way will change all product listings default views):<\/p>\t\r\n\t<ol>\r\n\t<li><p>Login to your <strong>Admin panel<\/strong> and navigate to <strong>System &#8211; > Configuration &#8211; > CATALOG &#8211; > Catalog &#8211; > Frontend<\/strong> and set <strong>List Mode<\/strong> from the dropdown.<\/p>\r\n\t\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_4.jpg\" alt=\"\" width=\"1000\" height=\"563\" class=\"alignnone size-full wp-image-80702\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_4.jpg 1000w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_4-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_4-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/Magento._How_to_change_products_search_results_page_layout_grid-list_4-768x432.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a>\t\r\n\t\r\n\t<li><p>Press the <strong>Save Config<\/strong> button.<\/p><\/li>\r\n\t<\/ol>\r\n<\/li>\r\n<li><p>Refresh the page of your store to see the changes. You may also need to clear <strong>Magento cache<\/strong> to see the changes.<\/p><\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n <a href=\"http:\/\/www.youtube.com\/watch?v=LL1HkF8e7Bo?width=1280&amp;height=720\" rel=\"prettyPhoto\">Magento. How to change products search results page layout (grid\/list)<\/a>\r\n<p>Browse our brand new <a href=\"https:\/\/www.templatemonster.com\/magento-themes.php\" title=\"Magento Templates\" target=\"_blank\">Magento Templates<\/a> and learn more about awesome usability.<\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to change the layout (from grid to list) on Search results pages in your Magento store.<\/p>\n","protected":false},"author":57,"featured_media":80703,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[1528,896,2407,2591,2590],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80698"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=80698"}],"version-history":[{"count":10,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80698\/revisions"}],"predecessor-version":[{"id":81728,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80698\/revisions\/81728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/80703"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=80698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=80698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=80698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}