{"section":"tutorials","requestedLocale":"es","requestedSlug":"como-trabajar-con-diferentes-layouts-para-una-misma-pagina","locale":"es","slug":"como-trabajar-con-diferentes-layouts-para-una-misma-pagina","path":"docs/es/tutorials/storefront/layout/como-trabajar-con-diferentes-layouts-para-una-misma-pagina.md","branch":"main","content":"> ⚠️ **Atención:** existen dos formas de configurar colecciones, mediante el CMS o utilizando el módulo Colecciones Beta. Este artículo se refiere a [la configuración de colecciones mediante el CMS](/es/docs/tutorials/registrar-una-coleccion-cms).\n\nEn la página __Storefront__ > __Layout__, se establece un layout estándar para todas las páginas del mismo tipo incluidas en cada carpeta de un website, ejemplo: _producto_.\n\nPero, existe la posibilidad de aplicar diferentes layouts para una misma página a través de algunas condiciones (grupo de productos, categorías, marcas). Serían dos productos con layouts distintos o una categoría específica con layout especial, por ejemplo.\n\nPara eso, basta insertar un nuevo template, ya sea de [página](/es/faq/como-crear-un-template-de-pagina/child) o de [estante](/es/docs/tutorials/como-crear-un-template-de-estante). Después de crearlo, siga los pasos abajo para seleccionar la carpeta que desea agregar el nuevo layout:\n\n1. En __Storefront__, acceda __Layout__;\n2. Haga clic en la carpeta __CMS__;\n3. Haga clic en __Sites and channels__;\n4. Acceda el website deseado;\n5. Haga clic en la carpeta __/__ y seleccione la página deseada para el nuevo layout;\n6. Haga clic en __New Layout__.\n\nDespués de llenar los campos __Layout Name__ y __Body Class__, seleccione el template deseado en el campo de __Template__ y desactive la opción __Default Page__.\n\nDespués de eso, una nueva sección estará disponible y podrá definir a través de los nuevos campos las __condiciones__ bajo las cuales se mostrará el nuevo layout en su tienda.\n\nEs posible limitar la disponibilidad del template a un período de tiempo predeterminado rellenando los campos __From__ y __To__, así como definir en qué categorías, productos, marcas y colecciones se aplicará el template elegido.\n\n![template-condicionado-cms](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-trabajar-con-diferentes-layouts-para-una-misma-pagina_1.png)\n\nDespués de llenar todos los campos, asegúrese de guardar los cambios realizados haciendo clic en __Save Layout__.\n\nTenga en cuenta que estos criterios se basan en [el contexto de búsqueda](/es/docs/tutorials/como-crear-landing-pages-con-urls-personalizadas) de la página en el que se encuentra el usuario, que está directamente vinculado a los [parámetros de búsqueda](/es/tutorial/--tutorials_567), pero que no son necesariamente establecidos manualmente por el administrador de la tienda; toda la página encaja automáticamente en un contexto de contenido.\n\nSucede que las condiciones ofrecidas no están presentes en ninguna página:\n\n- las páginas de productos nunca tendrán el contexto de colección;\n- Las páginas de búsqueda (en las que también caben el departamento, la categoría, la marca, las colecciones y las páginas de destino) nunca tendrán el contexto del producto.\n\nPor lo tanto, no es posible asignar condiciones a un producto específico o a diferentes diseños a través de una colección. Deberá registrarlos junto con la condición del producto.\n\n> ℹ️ Según las condiciones elegidas, se establece un orden de prioridad para la aplicabilidad del layout. La ordenación es, si existe, template del producto, de la categoría y, finalmente, de la marca. Por lo tanto, un template acondicionado para un producto se superpone al template de la categoría en que está contenido este producto y así sucesivamente.\n\nSi tiene dudas en esta configuración, le recomendamos que use la lid: [Prueba de Layout](/es/faq/validar-un-layout-antes-de-ir-a-produccion)"}