{"section":"tutorials","requestedLocale":"pt","requestedSlug":"controle-de-destaque-de-colecao","locale":"pt","slug":"controle-de-destaque-de-colecao","path":"docs/pt/tutorials/storefront/layout/controle-de-destaque-de-colecao.md","branch":"main","content":"> ⚠️ 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 Portal (Legado).](/pt/docs/tutorials/cadastro-de-colecoes-cms).\n\nO controle `` (para páginas de produto) ou `$product.HightLight` (para prateleiras) renderiza um elemento HTML com uma classe específica no contexto dos produtos que fizerem parte de uma coleção marcada com a flag __Highlight__.\n\nEm primeiro lugar, vamos ver onde se encontra a flag Highlight:\n\n1. Accesse __Storefront__ > __Layout__ no Admin.\n2. Clique na pasta CMS e depois na pasta __Product Clusters (Collections)__.\n3. Clique em uma coleção.\n4. Marque a flag __Highlight__, que fica na tela da coleção, e clique em __Save Product Cluster__.\n\n![CollectionHighlightFlag](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/controle-de-destaque-de-colecao_1.png)\n\nAo marcar a flag, você informa ao sistema que sempre que o controle de destaque for usado no template de uma página, os produtos exibidos nessa página que fizerem parte da coleção em questão devem aparecer com o elemento HTML abaixo, onde no lugar de `{nomeDaColecao}` aparece o nome da coleção cadastrada no CMS:\n\n`

{nomeDaColecao}`\n\nVocê pode, então, customizar o CSS para definir de que maneira a classe `flag {nomeDaColecao}` afetará a exibição dos produtos.\n\nEste recurso pode ser usado, por exemplo, para fazer com que os produtos de uma coleção chamada \"Lançamento\" apareçam sempre com uma flag destacando que eles são novidade na loja. Ao adicionar o controle no template da página de categoria, por exemplo, todo produto da coleção Lançamento exibido em uma página de categoria aparecerá com esse destaque.\n\n> ⚠️ Lembre-se que, se a página for de produto, o controle que deve ser usado é o `<vtex.cmc:HightLight/>`. Já se for uma página de vitrine, você deve usar o `$product.HightLight`."}