{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-trabalhar-com-diferentes-layouts-para-uma-mesma-pagina","locale":"pt","slug":"como-trabalhar-com-diferentes-layouts-para-uma-mesma-pagina","path":"docs/pt/tutorials/storefront/layout/como-trabalhar-com-diferentes-layouts-para-uma-mesma-pagina.md","branch":"main","content":"> ⚠️ **Atenção:** existem duas formas de configurar coleções, por meio do CMS ou utilizando o módulo de Coleções Beta. Este artigo, refere-se à [configuração de coleções por meio do CMS](/pt/docs/tutorials/cadastro-de-colecoes-cms).\n\nNa página __Storefront__ > __Layout__, um layout padrão é aplicado para todas as páginas de mesmo tipo existentes dentro de cada pasta de um website, como por exemplo _Produto_.\n\nExiste a possibilidade, entretanto, de aplicar diferentes layouts para uma mesma página por meio de determinadas condições (grupo de produtos, categorias, marcas). Por exemplo, é possível configurar dois produtos com layouts diferentes ou uma categoria específica com um layout especial.\n\nPara isso, primeiramente é necessário inserir no módulo de CMS um novo template, seja [de página](/pt/docs/tutorials/como-criar-um-template-de-pagina) ou de [prateleira](/pt/docs/tutorials/como-criar-um-template-de-prateleira). Após a criação do template, você deve acessar a pasta que deseja aplicar o novo layout conforme os passos abaixo:\n\n1. Em __Storefront__, acesse __Layout__;\n2. Clique na pasta __CMS__;\n3. Clique em __Sites and channels__;\n4. Acesse o website desejado para as mudanças;\n5. Clique na pasta __/__ e selecione a pasta desejada para a aplicação do novo layout;\n6. Clique em __New Layout__.\n\nApós preencher os campos __Layout Name__ e __Body Class__, selecione o template desejado em __Template__ e desmarque a opção __Default Page__.\nApós isso, uma nova seção será disponibilizada e você poderá definir através de seus campos as condições sob as quais o novo layout será mostrado na sua loja. \n\nÉ possível limitar a disponibilização do template para um período de tempo pré determinado nos campos __From__ e __To__ assim como definir em quais categorias, produtos, marcas e coleções o template será aplicado. \n\n![template-condicionado-cms](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-trabalhar-com-diferentes-layouts-para-uma-mesma-pagina_1.png)\n\nApós preencher todos os campos, não se esqueça de salvar as mudanças feitas clicando em __Save Layout__.\n\nNote que esses critérios se baseiam no [\"contexto de busca\"](/pt/tutorial/como-funciona-o-contexto-de-busca) da página em que o usuário se encontra, que estão diretamente ligados aos [parâmetros de busca](/pt/tutorial/parametros-de-busca), mas que não necessariamente são definidos manualmente pelo administrador da loja - toda página se enquadra em um contexto de conteúdo automaticamente.\n\nOcorre que as condições ofertadas não estarão presentes em qualquer página:\n\n- páginas de produto nunca terão contexto de coleção;\n- páginas de busca (aonde se enquadram também as de departamento, categoria, marca, coleção e landing pages) nunca terão contexto de produto.\n\nSendo assim, não é possível, por exemplo, condicionar produtos específicos a layouts diferentes através de uma coleção. Nesse cenário é necessário cadastrá-los com a condição de produto.\n\n> ℹ️ De acordo com as condições configuradas, existe uma ordem de prioridade estabelecida para a aplicabilidade do template. A ordenação é, caso exista, template de produto, de categoria e, por último, de marca. Dessa forma, um template condicionado para determinado produto se sobrepõe aquele condicionado à categoria na qual este produto está contido e assim sucessivamente.\n\nEm caso de dúvidas nessa configuração, recomendamos que use o \"lid\": [Teste de Layout](/pt/faq/como-validar-um-layout-antes-de-ir-para-producao)"}