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 change the layout of the search page in Magento 2.
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’s interaction with your store. One such important point is the catalog search results page.
According to one report by Forrester, 43% of the visitors on retail eCommerce sites directly navigate to the search bar. That’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.
Earlier, we also posted a step-wise guide on updating the layout using an observer in Magento 2. In this blog post, I will show you how to change search result page layout in Magento 2.
Method to Change Search Result Page Layout in Magento 2
To change the layout of the search page in Magento 2, we need to override the layout file of that page in the theme.
Override the app/design/frontend/<Vendor>/<theme>/Magento_CatalogSearch/layout/catalogsearch_result_index.xml file with your desired layout.
In this example, we will:
- Add a custom block above the search results.
- Move the page title to a different position.
- Customize the search results list.
Here’s the code:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!-- Add a custom block above the search results -->
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="custom.search.header" template="Magento_CatalogSearch::custom_header.phtml" before="-">
<arguments>
<argument name="some_argument" xsi:type="string">Custom Value</argument>
</arguments>
</block>
</referenceContainer>
<!-- Reorder existing blocks (for example, move the search results list) -->
<referenceBlock name="search.result.list">
<action method="setTemplate">
<argument name="template" xsi:type="string">Magento_CatalogSearch::custom_result_list.phtml</argument>
</action>
</referenceBlock>
<!-- Move the page title block -->
<move element="page.main.title" destination="content" before="custom.search.header"/>
</body>
</page>
Simply add the layout code between the <page>tag and save the file.
That’s it!Configure Magento 2 default page layout as it allows you to set the initial appearance and structure of your online store’s web pages, ensuring a consistent and user-friendly design.
This is how easily you can change the catalog search result page layout in Magento 2.
If you still have any doubts or queries regarding the solution, feel free to ask.
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.
Thanks for reading.
