{"section":"tutorials","requestedLocale":"en","requestedSlug":"how-to-work-with-different-layouts-for-the-same-page","locale":"en","slug":"how-to-work-with-different-layouts-for-the-same-page","path":"docs/en/tutorials/storefront/layout/how-to-work-with-different-layouts-for-the-same-page.md","branch":"main","content":"> ⚠️ **Warning:** there are two ways to configure collections, through the CMS or the Collection module (Beta). This article is about how to [configure collections through the CMS](/en/docs/tutorials/adding-collections-cms).\n\nOn the __Storefront__ > __Layout__ page, a standard layout is established for all pages of the same kind included on each folder of a website; e.g. product. \n\nHowever, it is possible to apply different layouts for the same page through certain conditions (group of products, categories, brands). They would be two products with different layouts or a specific category with a special layout, for example.\n\nTo do so, select a new template, be it a [page](/en/docs/tutorials/how-to-create-a-page-template) or [shelf](/en/docs/tutorials/how-to-create-a-shelf-template). After creating it, follow the steps below in order to select the foulder in which you want to apply the new layout: \n\n1. On __Storefront__, access __Layout__;\n2. Click on the __CMS__ folder;\n3. Click on __Sites and channels__;\n4. Access the desired website;\n5. Click on the __/__ foulder and select the desired foulder for the new layout;\n6. Click on __New Layout__.\n\nAfter filling in the __Layout Name__ and __Body Class__ fields, select the desired template on the __Template__ box and uncheck the __Default Page__ option.\nAfter that a new section will be available and you can define through the fields the __conditions__ under which the new layout will be displayed in your store.\n\nIt is possible to limit the availability of the template to a predetermined period of time by filling in the __From__ and __To__ fields as well as to define in which categories, products, brands and collections the chosen template will be applied.\n\n![template-condicionado-cms](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-work-with-different-layouts-for-the-same-page_1.png)\n\nAfter filling in all the needed fields, do not forget to save the changes made by clicking on __Save Layout__.\n\nPlease note that these criteria are based on the page's [\"search context\"](/en/docs/tutorials/how-to-create-landing-pages-with-customized-urls) on which the user is, which is directly tied to the [search parameters](/en/tutorial/--tutorials_567), but that are not necessarily set manually by the store admin - the entire page automatically fits in a content context.\n\nIt happens that the offered conditions are not present on any page:\n\n- product pages will never have the collection context;\n- search pages (in which the department, category, brand, collections and landing pages also fit) will never have the product context.\n\nHence, it is not possible to asign conditions to specific product or to different layouts through a collection. You would need to register these together with the product condition.\n\n> ℹ️ According to the chosen conditions, an order of priority is established for the applicability of the template. The order first follows, if available, product template, category and, finally, brand. Thus, a template conditioned for a given product layout overlaps the template conditioned for the category in which this product is contained and so on.\n\nIn case of doubt with this set up, we recommend using the lid: [Layout Test](/en/faq/validating-a-layout-before-moving-it-to-production)"}