{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja","locale":"pt","slug":"como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja","path":"docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja.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 a seguir, iremos definir a vitrine apresentada na Home, para isso, selecione **Settings**, depois **add object**, conforme na imagem a seguir.\n\n![coleção2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_1.png)\n\nEsse comando irá abrir o **Visual Controls**, ou seja, o controle correspondente à vitrine em que se deseja exibir a coleção. Adicione uma _Coleção_, porém não se esqueça de definir um nome para ela.\n\n![coleção3](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_2.png) \n\n![coleção4](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_3.png)\n\nPara editar o controle criado, é necessário salvar as configurações primeiramente em **Save Settings**.\n\n![coleção5](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_4.png)\n\n![coleção6](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_5.png)\n\nAo editar o controle é necessário adicionar seus conteúdos, que representam cada conjunto de itens que serão exibidos.\nSão eles:\n_Layout_: Selecione o template de prateleira utilizado na vitrine.\n_Number of Columns, Number of Items,Show Unavailable, Ramdom ad Paged_: Definem a disposição, quantidade e qual o critério de exibição dos itens.\n\n![coleção7](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_6.png)\n\nLembre-se de salvar as alterações antes de efetuar uma busca ou mudar de página.\n\nO próximo passo é adicionar o conteúdo, selecionando **Add Content**.\n![coleção8](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_7.png)\n\nÉ possível definir cada conteúdo utilizando coleções ou resultados de busca, utilizando parâmetros de busca (mais detalhes [aqui](/pt/docs/tutorials/como-funciona-a-busca-da-vtex)).\n\nOs conteúdos a serem preenchidos na parte **Content**:\n_Content_: Nome que identificará cada conjunto de itens\n_QueryString_: Os parâmetros preenchidos nesse campo definem o resultado de busca que será exibido neste conteúdo.\n\nNo campo **Product Cluster (Collection)**, é necessário selecionar a coleção que será exibida, para isso, siga o passo a seguir:\n\n![coleção10](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_8.png)\n\nOs conteúdos a serem preenchidos na parte **Display Condition**:\n_Partner, Campaign_ e _Source_: Definem a exibição deste conteúdo, caso o visitante possua alguma UTM correspondente em sua URL de origem.\n_Keywords_: Vincula a exibição do conteúdo a uma busca por termo(s) específico(s).\n_Category_ e _Brand_: Vincula a exibição do conteúdo em uma página de Categoria e/ou Marca específico(s).\n_Peridos_: Define o período em que o conteúdo ficará ativo. \n\nApós as definições, deve-se marcar a opção **Active Content** e adicionar na lista de conteúdo, salvando todas as configurações posteriormente.\n\nNo exemplo abaixo temos uma vitrine padrão, sem condições de exibição, e outra exclusiva para as visitas oriundas das audiências de campanhas patrocinadas do Google (utm_source=**google**/utm_medium=**cpc**):\n\n![coleção9](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-incluir-uma-colecao-de-produtos-na-vitrine-da-loja_9.png)\n\nNo cenário acima, caso o cliente tenha origem na audiência de campanha patrocinada serão exibidos na vitrine **Lançamentos**, localizada na Home, os produtos que correspondem ao resultado de uma busca pela Marca de ID 200000, caso contrário, serão exibidos os produtos da coleção de ID 8.\n\nSempre 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, conforme acima."}