When creating a new landing page for your store's website, you can configure it as a custom search results page to promote specific products.

Although custom pages do not inherently fetch search data, the search-result-layout.customQuery block from the Search Result app allows you to specify the query to render the desired search results for your users.

To build a custom search results page, familiarize yourself with the Search Result app to understand the blocks exported by this app, including the search-result-layout.customQuery.

1. Open your Store Theme app directory using your preferred code editor.

2. In the routes.json file, define a new path called store.custom#landing. Replace the path value as needed for your scenario.

   
   

   _10

   "store.custom#landing": {

   _10

   "path": "/landing"

   _10

   }

   
   

3. In the blocks.jsonc folder, create a new file (e.g., search-landing.jsonc) to store the new custom search results page blocks.

4. In the new file, declare the template name, such as store.custom#landing. Ensure the name matches the one declared in step 2.

5. In the template's block list, add any theme block you want to build your new custom page. The search-result-layout.customQuery block is mandatory to define how the search query should be fetched. For example:

   search-landing.jsonc

   
   

   _10

   {

   _10

   "store.custom#landing": {

   _10

   "blocks": [

   _10

   "image#landingbanner",

   _10

   "search-result-layout.customQuery"

   _10

   ]

   _10

   }

   _10

   }

   
   

6. Declare the blocks according to the search results custom page you wish to have. Below you can find an example of a custom search results template:

   search-landing.jsonc

   
   

   _72

   {

   _72

   "store.custom#landing": {

   _72

   "blocks": ["image#landing", "search-result-layout.customQuery"]

   _72

   },

   _72

   "image#landing": {

   _72

   "props": {

   _72

   "minWidth": "100%",

   _72

   "src": "https://user-images.githubusercontent.com/18701182/69889938-64b16180-12d2-11ea-8d8a-e3089cbeaffd.png"

   _72

   }

   _72

   },

   _72

   "search-result-layout.customQuery": {

   _72

   "props": {

   _72

   "querySchema": {

   _72

   "orderByField": "OrderByReleaseDateDESC",

   _72

   "hideUnavailableItems": true,

   _72

   "maxItemsPerPage": 8,

   _72

   "queryField": "Blue Top Retro Camera",

   _72

   "mapField": "ft"

   _72

   }

   _72

   },

   _72

   "blocks": [

   _72

   "search-result-layout.desktop",

   _72

   "search-result-layout.mobile",

   _72

   "search-not-found-layout"

   _72

   ]

   _72

   },

   _72

   "search-result-layout.desktop": {

   _72

   "children": [

   _72

   "breadcrumb.search",

   _72

   "search-title.v2",

   _72

   "flex-layout.row#top",

   _72

   "search-fetch-previous",

   _72

   "flex-layout.row#results",

   _72

   "search-fetch-more"

   _72

   ],

   _72

   "props": {

   _72

   "pagination": "show-more",

   _72

   "preventRouteChange": true

   _72

   }

   _72

   },

   _72

   "flex-layout.row#top": {

   _72

   "children": [

   _72

   "total-products.v2",

   _72

   "order-by.v2"

   _72

   ]

   _72

   },

   _72

   "flex-layout.row#results": {

   _72

   "children": [

   _72

   "flex-layout.col#filter",

   _72

   "flex-layout.col#search"

   _72

   ]

   _72

   },

   _72

   "flex-layout.col#filter": {

   _72

   "props": {

   _72

   "width": "20%"

   _72

   },

   _72

   "children": [

   _72

   "filter-navigator.v3"

   _72

   ]

   _72

   },

   _72

   "flex-layout.col#search": {

   _72

   "children": [

   _72

   "search-content"

   _72

   ]

   _72

   },

   _72

   "search-content": {

   _72

   "blocks": ["gallery", "not-found"]

   _72

   },

   _72

   "gallery": {

   _72

   "blocks": ["product-summary.shelf"]

   _72

   }

   _72

   }

   
   

7. Save the changes made in your Store Theme app.

8. Open the terminal, log in to your VTEX Account and create a new development workspace.

9. Once logged into the desired account and workspace, link your Store Theme app to see your new custom page live.

10. Access your store's website using the following format: {workspaceName}--{accountName}.myvtex.com/{pathName} to see your new page live.

Once you are satisfied with the changes to your Store Theme, make your new theme content publicly available.