{"id":2158,"date":"2022-10-25T07:30:35","date_gmt":"2022-10-25T07:30:35","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/change-search-result-page-layout-in-magento-2\/"},"modified":"2025-03-17T08:44:47","modified_gmt":"2025-03-17T08:44:47","slug":"change-search-result-page-layout-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/change-search-result-page-layout-in-magento-2\/","title":{"rendered":"How to Change Search Result Page Layout in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Do you want to customize the search result page in your Magento 2 store?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Read this complete blog post to find out the method to change the layout of the search page in Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The shopping experience perceived by the customers on your online store matters a lot. It can make or break your online business. Therefore, you may need to optimize each and every point of the visitor&#8217;s interaction with your store. One such important point is the catalog search results page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">According to one <a title=\"Report by Forrester\" href=\"https:\/\/www.forrester.com\/report\/MustHave-eCommerce-Features\/RES89561\" target=\"_blank\" rel=\"noopener\">report by Forrester<\/a>, 43% of the visitors on retail eCommerce sites directly navigate to the search bar. That&#8217;s huge! In such a scenario, the catalog search results page becomes vital from the user experience point of view. The layout of the default Magento 2 catalog search result page is good, but it can be further optimized to deliver a better user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Earlier, we also posted a step-wise guide on updating the <a title=\"How to Configure Magento 2 Layout Using Observer\" href=\"https:\/\/meetanshi.com\/blog\/configure-magento-2-default-page-layout\/\" target=\"_blank\" rel=\"noopener\">layout using an observer in Magento 2<\/a>. In this blog post, I will show you how to <strong><em>change search result page layout in Magento 2<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Change Search Result Page Layout in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To change the layout of the search page in Magento 2, we need to override the layout file of that page in the theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Override the <strong>app\/design\/frontend\/&lt;Vendor&gt;\/&lt;theme&gt;\/Magento_CatalogSearch\/layout\/catalogsearch_result_index.xml&nbsp;<\/strong>file with your desired layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, we will:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a custom block above the search results.<\/li>\n\n\n\n<li>Move the page title to a different position.<\/li>\n\n\n\n<li>Customize the search results list.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;!-- Add a custom block above the search results -->\n        &lt;referenceContainer name=\"content\">\n            &lt;block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"custom.search.header\" template=\"Magento_CatalogSearch::custom_header.phtml\" before=\"-\">\n                &lt;arguments>\n                    &lt;argument name=\"some_argument\" xsi:type=\"string\">Custom Value&lt;\/argument>\n                &lt;\/arguments>\n            &lt;\/block>\n        &lt;\/referenceContainer>\n\n        &lt;!-- Reorder existing blocks (for example, move the search results list) -->\n        &lt;referenceBlock name=\"search.result.list\">\n            &lt;action method=\"setTemplate\">\n                &lt;argument name=\"template\" xsi:type=\"string\">Magento_CatalogSearch::custom_result_list.phtml&lt;\/argument>\n            &lt;\/action>\n        &lt;\/referenceBlock>\n\n        &lt;!-- Move the page title block -->\n        &lt;move element=\"page.main.title\" destination=\"content\" before=\"custom.search.header\"\/>\n    &lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Simply add the layout code between the <code>&lt;page&gt;<\/code>tag and save the file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s it!<a title=\"How to Configure Magento 2 Default Page Layout\" href=\"https:\/\/meetanshi.com\/blog\/configure-magento-2-default-page-layout\/\">Configure Magento 2 default page layout<\/a> as it allows you to set the initial appearance and structure of your online store&#8217;s web pages, ensuring a consistent and user-friendly design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is how easily you can change the catalog search result page layout in Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you still have any doubts or queries regarding the solution, feel free to ask.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please rate the post with 5 stars if it has helped you. Also, do not forget to share this helpful post with your Magento friends via social media.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for reading.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to customize the search result page in your Magento 2 store? Read this complete blog post to find out the method to&#8230;<\/p>\n","protected":false},"author":38,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2158","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2158"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2158\/revisions"}],"predecessor-version":[{"id":9479,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2158\/revisions\/9479"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}