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
Definição de Vitrines
Definição de Vitrines

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.

As vitrines são utilizadas no destaque de produtos em diversas páginas, elas também podem ser utilizadas para recomendações, na página do produto.

Primeiramente, antes de definir uma vitrine, deve-se criar uma coleção (vide instruções aqui) com os produtos que serão exibidos nela. Também é necessário que as páginas estejam devidamente estruturadas, com os devidos controles inseridos em seus templates.

Realizadas as devidas definições, o vínculo da coleção com a vitrine é feito em Storefront > Layout.

No exemplo abaixo, iremos definir a vitrine apresentada na Home, sendo assim, deve-se realizar a alteração no seguinte layout:

{"base64":"  ","img":{"width":294,"height":625,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19535,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/definicao-de-vitrines_1.png"}}

No layout selecionado, adicione o controle correspondente à vitrine onde deseja exibir a coleção clicando em Add object. Após selecionar o tipo de controle desejado, defina seu nome e clique em Adicionar.

Não se esqueça de salvar as configurações feitas para que seja possível posteriormente editar o controle criado.

{"base64":"  ","img":{"width":1928,"height":202,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":11180,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/definicao-de-vitrines_2.png"}}

Edição do controle

Para editar seus controles, clique no símbolo de lápis, conforme mostra a imagem exemplo abaixo:

{"base64":"  ","img":{"width":1779,"height":104,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":4222,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/definicao-de-vitrines_3.png"}}

Ao editar o controle é necessário adicionar seus conteúdos, que representam cada conjunto de itens que serão exibidos. Para isso, clique em Add content

{"base64":"  ","img":{"width":1263,"height":436,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22317,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/definicao-de-vitrines_4.png"}}
{"base64":"  ","img":{"width":732,"height":240,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":11457,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/definicao-de-vitrines_5.png"}}

  • "Adicionar arquivo": para selecionar a coleção que será exibida nesse conteúdo.
  • Partner / Campaign / Source: define a exibição desse conteúdo caso o visitante possua alguma UTM correspondente em sua URL de origem.
  • Keywords: vincula a exibição do conteudo a uma busca por termo(s) específico(s).
  • Category / Brand: vincula a exibição do conteúdo em uma página de Categoria/Marca específica.
  • From / To: define o período em que o conteúdo ficará ativo.

Deve-se marcar a opção Active Content e clicar em Add content list, salvando todas as configurações (Save Settings) posteriormente.

Atenção! Sempre que utilizar mais de um conteúdo ativo no mesmo controle, deve-se ordená-los (clicando e arrastando seus conteúdos) de forma que o conteúdo sem condições de exibição sempre fique na última posição.

Edição do conteúdo criado

Se caso depois de salvo o conteúdo for necessário editá-lo, basta clicar no segundo simbolo de lápis conforme mostra a imagem abaixo:

{"base64":"  ","img":{"width":1208,"height":332,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22823,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/definicao-de-vitrines_6.png"}}

Deve-se realizar as mudanças desejadas, clicar em Update Content List e salvar todas as configurações feitas clicando em Save Settings depois.

Atenção! Sempre que alguma alteração for feita, é indispensável clicar em Save Settings para que nenhuma alteração seja perdida.

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