{"section":"tutorials","requestedLocale":"pt","requestedSlug":"definicao-de-vitrines","locale":"pt","slug":"definicao-de-vitrines","path":"docs/pt/tutorials/storefront/layout/definicao-de-vitrines.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\nAs 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.\n\nPrimeiramente, antes de definir uma vitrine, deve-se criar uma coleção (vide instruções [aqui](/pt/docs/tutorials/criando-colecao-de-produtos)) 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.\n\nRealizadas as devidas definições, o vínculo da coleção com a vitrine é feito em **Storefront > Layout**.\n\nNo exemplo abaixo, iremos definir a vitrine apresentada na Home, sendo assim, deve-se realizar a alteração no seguinte layout:\n\n![cms_layout_home ](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/definicao-de-vitrines_1.png)\n\nNo layout selecionado, adicione o controle correspondente à vitrine onde deseja exibir a coleção clicando em **Add object**.\nApós selecionar o tipo de controle desejado, defina seu nome e clique em **Adicionar**.\n\n__Não se esqueça de salvar as configurações feitas para que seja possível posteriormente editar o controle criado.__\n\n![save settings cms](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/definicao-de-vitrines_2.png)\n\n### Edição do controle\n\nPara editar seus controles, clique no **símbolo de lápis**, conforme mostra a imagem exemplo abaixo: \n\n![banner_edit_cms](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/definicao-de-vitrines_3.png)\n\nAo editar o controle é necessário adicionar seus conteúdos, que representam cada conjunto de itens que serão exibidos.\nPara isso, clique em **Add content**\n\n![cadastro_conteudo_cms ](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/definicao-de-vitrines_4.png)\n![cadastro_conteudo_cms 2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/definicao-de-vitrines_5.png)\n\n- **\"Adicionar arquivo\":** para selecionar a coleção que será exibida nesse conteúdo. \n- **Partner / Campaign / Source:**  define a exibição desse conteúdo caso o visitante possua alguma UTM correspondente em sua URL de origem. \n- **Keywords:** vincula a exibição do conteudo a uma busca por termo(s) específico(s). \n- **Category / Brand:** vincula a exibição do conteúdo em uma página de Categoria/Marca específica. \n- **From / To:** define o período em que o conteúdo ficará ativo. \n\nDeve-se marcar a opção **Active Content** e clicar em **Add content list**, salvando todas as configurações (**Save Settings**) posteriormente.\n\n**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. \n\n### Edição do conteúdo criado \n\nSe 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:\n\n![edit_content_cms](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/definicao-de-vitrines_6.png)\n\nDeve-se realizar as mudanças desejadas, clicar em **Update Content List** e salvar todas as configurações feitas clicando em **Save Settings** depois. \n\n__Atenção!__ Sempre que alguma alteração for feita, é indispensável clicar em **Save Settings** para que nenhuma alteração seja perdida."}