{"section":"tutorials","requestedLocale":"en","requestedSlug":"collection-highlight-control","locale":"en","slug":"collection-highlight-control","path":"docs/en/tutorials/storefront/layout/collection-highlight-control.md","branch":"main","content":"> ⚠️ There are two ways to configure collections, through the CMS or the Collection module (Beta). This article is about how to [configure collections through the Legacy CMS Portal](/en/docs/tutorials/adding-collections-cms).\n\nThe `<vtex.cmc:HightLight/>` control (for product pages) or `$product.HightLight` control (for shelves) renders an HTML element with a specific class in the context of products that are part of a collection marked with the __Highlight__ flag.\n\nFirst, let's see where the Highlight flag is:\n\n1. Access the Admin.\n2. Go to __Storefront__ > __Layout__.\n3. Click the CMS folder and then the __Product Clusters (Collections)__ folder.\n4. Click a collection.\n5. Check the __Highlight__ flag, which is on the collection screen, and then click __Save Product Cluster__.\n\n![CollectionHighlightFlag](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/collection-highlight-control_1.png)\n\nBy flagging it, you inform the system that whenever the highlight control is used in a page template, the products displayed on that page that are part of the collection must appear with the HTML element below, where in place of `{CollectionName}` appears the name of the collection registered in the CMS:\n\n`<p class=\"flag {CollectionName}\">{CollectionName}`\n\nYou can then customize the CSS to define how the `flag {CollectionName}` class will affect the display of the products.\n\nThis feature can be used, for example, to make products in a collection called \"Launch\" always appear with a flag highlighting that they are new to the store. When you add the control to the category page template, for example, every product in the Launch collection that appears on a category page will be shown with that highlight.\n\n> ⚠️ Remember that if it's a product page, the control that should be used is `&lt;vtex.cmc:HightLight/&gt;`. If it's a shop window page, you should use the `$product.HightLight` control."}