{"section":"tutorials","requestedLocale":"en","requestedSlug":"how-to-create-landing-pages-with-customized-urls","locale":"en","slug":"how-to-create-landing-pages-with-customized-urls","path":"docs/en/tutorials/storefront/layout/how-to-create-landing-pages-with-customized-urls.md","branch":"main","content":"> ⚠️ This tutorial is only valid for CMS Portal (Legacy) stores and for the legacy search. If your store uses VTEX Intelligent Search, see the [Intelligent Search track](https://help.vtex.com/docs/tutorials/intelligent-search-overview).\n\nThe search engine used by CMS Portal (Legacy) stores is customizable and allows you to apply filters by department, category, brand, collection, specification, and SKU, among others.\n\nBecause these filters are applied in the URL, more complex searches may generate unfriendly and less relevant addresses for search engine crawlers, such as Google.\n\nTo address this situation, CMS folders have the `Search Context (Default)` field, which defines which search filters will be applied to the page linked to the folder. With this configuration, the CMS loads the expected results without exposing filters in the URL, creating a more user-friendly route.\n\n> ℹ️ If a folder has a value set in `Search Context (Default)`, it'll override any search parameter entered directly in the URL. This means that filters and sorting, including the `O` parameter, won't be applied to the page.\n\nIn this guide, you will learn how to use **Search Context** to associate a search with a CMS folder and display its results on a friendly URL.\n\n## Before you begin\n\nMake sure that the [template](/docs/tutorials/what-are-templates) of the page contains the `<vtex.cmc:searchResult/>` control. The Search Context only works if the template contains this control. Learn more at [How to use the Search Result control](/docs/tutorials/how-to-use-the-search-result-control).\n\n1. In the Admin, go to **Storefront > Layout**.\n2. Click **CMS > HTML Templates**.\n3. Create a new template or ensure that an existing template contains the `<vtex.cmc:searchResult/>` control. For more details on how to create a template, see [Creating and editing a page template](/docs/tutorials/how-to-create-a-page-template).\n\n> ℹ️ The `<vtex.cmc:searchResult/>` control only works on pages with search context, such as pages where the displayed results were obtained from a user search.\n\n## Instructions\n\nTo create a landing page with a custom URL, follow the steps below:\n\n1. In the VTEX Admin, go to **Storefront > Layout** to open the **Layout** section.\n2. In the **Layout** section, go to **CMS > Sites and channels**.\n3. Click the desired website.\n4. Click the root folder (`/`).\n5. Decide if you will configure the Search Context in:\n   - [An existing page on your website](#configuring-search-context-on-an-existing-page)\n   - [A new page to be created](#configure-search-context-on-a-new-page)\n\n> ⚠️ The legacy search renders a landing page when the searched term exactly matches the name of a folder configured in the CMS. For this folder to be searchable, a [layout](/docs/tutorials/what-are-layouts) must be associated with it, as does the parent folder. In structures with more than one directory level, such as `/folder1/landing-page`, this behavior may not work as expected, and the search may return a 404 page.\n\n### Configuring Search Context on an existing page\n\nAfter clicking the root folder (`/`), follow the instructions below:\n\n6. Click the folder you want to use for the landing page.\n7. On the right side of the screen, click `edit`.\n8. In the `Search Context (Default)` field, enter the search parameters you want to apply to the page. For example, to display products from category `111`, brand `222` and with specification `333`, use the following value: `fq=C:111&fq=B:222&fq=spec_fct_1:333`.\n9. Click `Save Folder`.\n10. Access the URL of the configured folder and check if the page displays the expected products. The landing page will be available at the URL `https://www.{accountName}.com/{landing-page}`, where `{accountName}` is your store name and `{landing-page}` is the name of the folder in the CMS with the configured Search Context.\n\n### Configure Search Context on a new page\n\nAfter clicking the root folder (`/`), follow the instructions below:\n\n6. On the right side of the screen, click `new folder`.\n7. Complete the fields based on the guidelines below:\n   - **Folder Name:** URL path.\n   - **Marketing Context (Default):** Defines whether the page can be accessed by [UTM](/docs/tutorials/what-are-utm-source-utm-campaign-and-utm-medium) parameters. This field is optional.\n   - **Search Context (Default):** Adds search parameters. For example, to display products from category `111`, brand `222` and with specification `333`, use the following value: `fq=C:111&fq=B:222&fq=spec_fct_1:333`.\n   - **Protocol:** Defines the communication protocol between a web server and a web browser. Recommended: `HTTPS`.\n   - **Cache Type:** Defines the browser cache storage behavior. Recommended: `Local and Remote`.\n   - **Authentication Required?:** Defines whether the page can be accessed only after user authentication. If this option is enabled, only authenticated users can access the page.\n8. Click `Save Folder` to save the new page.\n9. Access the URL of the configured folder and check if the page displays the expected products. The landing page will be available at the URL `https://www.{accountName}.com/{landing-page}`, where `{accountName}` is your store name and `{landing-page}` is the name of the folder created in the CMS with the configured Search Context."}