Your results presentation on the search results page doesn't need to be always the same for your users: thanks to enhancements in the Search Result app, you can provide them a more customized experience to navigate between the fetched products.

Note that the search results page above works with two different layouts: grid and list.

The flexibility to offer multiple layouts, which can help the sales tax rates by enhancing the shopping experience, is at hands! Check out the step-by-step section below.

To obtain successful results with this recipe, it is strongly recommended to understand previously how the Flex Layout and the Search Result apps work. We also advise you to go through the Building a Horizontal Product Summary recipe to achieve similar results on your search results page.

1. Implement the Search Result app in your Store Theme according to the instructions in the documentation.

2. Declare the gallery block responsible for structuring the page layout, use its layouts prop to define the desired layouts for the search results page. For example:

   
   

   _22

   "gallery": {

   _22

   "props": {

   _22

   "layouts": [

   _22

   {

   _22

   "name": "grid",

   _22

   "component": "GridSummary",

   _22

   "itemsPerRow": {

   _22

   "(min-width:1008px)":4,

   _22

   "(min-width:623px) and (max-width:1007px)":3,

   _22

   "(max-width:622px)":2

   _22

   }

   _22

   },

   _22

   {

   _22

   "name": "list",

   _22

   "component": "ListSummary",

   _22

   "itemsPerRow": 1

   _22

   }

   _22

   ],

   _22

   "ListSummary": "product-summary.shelf#listLayout",

   _22

   "GridSummary": "product-summary.shelf"

   _22

   }

   _22

   }

   
   

   Notice that all of the layouts's three properties are mandatory and must be provided for each layout.

   Property	Description
   name	specifies the search result layout. It can be grid or list.
   component	Defines the parent block responsible for defining the layout's components. For the grid layout, we define the component GridSummary that will then present items vertically and horizontally from each other. For the list layout, we define the ListSummary to show a list of items below one another.
   itemsPerRow	controls how many items per row will be displayed by each layout. You can use media queries to define the layouts' widths properties for desktop, tablet, and phone, such as min-width and max-width, or you can use the layouts' name, such as desktop, tablet and phone.

   Choosing to use the layouts' name, such as desktop, tablet and phone, in itemsPerRow, you should declare them as the example below:

   
   

   _10

   {

   _10

   "component":"GridSummary",

   _10

   "itemsPerRow":{

   _10

   "desktop":4,

   _10

   "tablet":3,

   _10

   "phone":2

   _10

   }

   _10

   }

   
   

   Once you define the list and grid layouts, declare which blocks you should use in the code to build the desired pages:

   Component	Block
   ListSummary	product-summary.shelf#listLayout block
   GridSummary	product-summary.shelf block

3. Define the default layout i.e. which layout will be first presented to your users using the defaultGalleryLayout prop, from the search-result-layout.mobile and search-result-layout.desktop blocks:

   
   

   _12

   "search-result-layout.desktop": {

   _12

   "children": [

   _12

   "flex-layout.row#searchbread",

   _12

   "flex-layout.row#searchtitle",

   _12

   "flex-layout.row#result"

   _12

   ],

   _12

   "props": {

   _12

   "pagination": "show-more",

   _12

   "preventRouteChange": false,

   _12

   "defaultGalleryLayout": "grid"

   _12

   }

   _12

   }

   
   

   Until now, you have a functioning search page with multiple layouts but with no flexibility to switch between them. For this purpose, we are going to declare next the gallery-layout-switcher block.

4. Declare the gallery-layout-switcher block in the search results template (store.search):

   
   

   _51

   "gallery-layout-switcher": {

   _51

   "children": [

   _51

   /*

   _51

   * For accessibility purposes, it is fundamental to define the layout options following the same ordering used to declare them in step 2.

   _51

   */

   _51

   "gallery-layout-option#grid",

   _51

   "gallery-layout-option#list"

   _51

   ]

   _51

   },

   _51

   "gallery-layout-option#grid": {

   _51

   "props": {

   _51

   "name": "grid"

   _51

   },

   _51

   "children": [

   _51

   "icon-grid",

   _51

   "responsive-layout.desktop#textOptionGrid"

   _51

   ]

   _51

   },

   _51

   "gallery-layout-option#list": {

   _51

   "props": {

   _51

   "name": "list"

   _51

   },

   _51

   "children": [

   _51

   "icon-inline-grid",

   _51

   "responsive-layout.desktop#textOptionList"

   _51

   ]

   _51

   },

   _51

   "responsive-layout.desktop#textOptionGrid": {

   _51

   "children": [

   _51

   "rich-text#option-grid"

   _51

   ]

   _51

   },

   _51

   "responsive-layout.desktop#textOptionList": {

   _51

   "children": [

   _51

   "rich-text#option-list"

   _51

   ]

   _51

   },

   _51

   "rich-text#option-grid": {

   _51

   "props": {

   _51

   "text": "Grid",

   _51

   "textColor": "c-auto",

   _51

   "blockClass": "layout-option"

   _51

   }

   _51

   },

   _51

   "rich-text#option-list": {

   _51

   "props": {

   _51

   "text": "List",

   _51

   "textColor": "c-auto",

   _51

   "blockClass": "layout-option"

   _51

   }

   _51

   }

   
   

   As seen above, each gallery-layout-option block receives the name prop with the name of the layout it corresponds to - this is a mandatory prop. In addition to this, you can also declare other blocks as its children and customize the selected layout option using the galleryLayoutOptionButton--selected CSS Handle.

5. Add the gallery-layout-switcher block as a child of the search-result-layout.mobile and search-result-layout.desktop blocks to display the switcher button on the page for both devices (mobile and desktop). For example:

   
   

   _18

   "flex-layout.row#searchinfo": {

   _18

   "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]

   _18

   },

   _18

   "flex-layout.row#orderByAndSwitcher": {

   _18

   "children": ["order-by.v2", "gallery-layout-switcher"],

   _18

   "props": {

   _18

   "horizontalAlign": "right",

   _18

   "preventHorizontalStretch": true,

   _18

   "blockClass": "orderByAndSwitcher",

   _18

   "colGap": 3

   _18

   }

   _18

   }

   _18

   "flex-layout.col#switcherMobile": {

   _18

   "children": ["gallery-layout-switcher"],

   _18

   "props": {

   _18

   "verticalAlign": "middle"

   _18

   }

   _18

   }

   
   

6. Deploy your theme changes.