Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Como trabalhar com diferentes layouts para uma mesma página
Como trabalhar com diferentes layouts para uma mesma página

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.

Na 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.

Existe 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.

Para isso, primeiramente é necessário inserir no módulo de CMS um novo template, seja de página ou de prateleira. Após a criação do template, você deve acessar a pasta que deseja aplicar o novo layout conforme os passos abaixo:

  1. Em Storefront, acesse Layout;
  2. Clique na pasta CMS;
  3. Clique em Sites and channels;
  4. Acesse o website desejado para as mudanças;
  5. Clique na pasta / e selecione a pasta desejada para a aplicação do novo layout;
  6. Clique em New Layout.

Após preencher os campos Layout Name e Body Class, selecione o template desejado em Template e desmarque a opção Default Page. Apó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.

É 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.

{"base64":"  ","img":{"width":1926,"height":492,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25931,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/como-trabalhar-com-diferentes-layouts-para-uma-mesma-pagina_1.png"}}

Após preencher todos os campos, não se esqueça de salvar as mudanças feitas clicando em Save Layout.

Note que esses critérios se baseiam no "contexto de busca" da página em que o usuário se encontra, que estão diretamente ligados aos parâmetros 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.

Ocorre que as condições ofertadas não estarão presentes em qualquer página:

  • páginas de produto nunca terão contexto de coleção;
  • 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.

Sendo 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.

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.

Em caso de dúvidas nessa configuração, recomendamos que use o "lid": Teste de Layout

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback