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 Portal CMS Legado..

O controle <vtex.cmc:HightLight/> (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.

Em primeiro lugar, vamos ver onde se encontra a flag Highlight:

1. Accesse Storefront > Layout no Admin.
2. Clique na pasta CMS e depois na pasta Product Clusters (Collections).
3. Clique em uma coleção.
4. Marque a flag Highlight, que fica na tela da coleção, e clique em Save Product Cluster.

Ao 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:

<p class="flag {nomeDaColecao}">{nomeDaColecao}</p>

Você pode, então, customizar o CSS para definir de que maneira a classe flag {nomeDaColecao} afetará a exibição dos produtos.

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

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.