{"section":"tutorials","requestedLocale":"en","requestedSlug":"how-to-include-a-collection-of-products-in-the-shop-window","locale":"en","slug":"how-to-include-a-collection-of-products-in-the-shop-window","path":"docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window.md","branch":"main","content":"> ⚠️ **Warning:** 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 CMS](/en/docs/tutorials/adding-collections-cms).\n\nShop windows are used to feature products on several pages; they can also be used for recommendations on the product page.\n\nFirstly, before setting up a shop window, create a collection (see instructions [here](/en/docs/tutorials/creating-a-product-collection)) with the products that will be shown on the screen. The pages should also be duly structured, with the proper controls inserted in their templates.\n\nAfter the proper definitions, the collection is linked to the shop window at **Storefront > Layout**.\n\nIn the example below, we will define a shop window shown on the Home page. Therefore, select **Settings**, then **add object**, as in the following image.\n\n![coleção2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_1.png)\n\nThis command will open the **Visual Controls**, that correspond to the showcase where you want to display the collection. Add a _Collection_, but be sure to set a name for it.\n\n![coleção3](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_2.png) \n\n![coleção4](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_3.png)\n\nRemember to save the settings so that you can edit the control created.\n\n![coleção5](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_4.png)\n\n![coleção6](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_5.png)\n\nTo edit the control, it is necessary to add its contents, which represent each set of items to be displayed.\nAre they:\n_Layout_: Select the shelf template used in the showcase.\n_Number of Columns, Number of Items, Show Unavailable_ and _Ramdom ad Paged_: Define the layout, quantity, and the criteria for displaying the items.\n\n![coleção7](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_6.png)\n\nRemember to save your changes before you search or change pages.\nThe next step is to add the content by selecting **Add Content**.\n![coleção8](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_7.png)\n\nIt is possible to define each content by using collections or search results, by using search parameters (further details [here](/en/docs/tutorials/how-does-vtex-search-work)).\n\nThe contents to be filled in **Content** are:\n_Content_: Name that will identify each set of items\n_QueryString_: The parameters entered in this field define the search result that will be displayed in this content.\n\nIn the **Product Cluster (Collection)** field, you must select the collection that will be displayed by completing the following step:\n\n![coleção10](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_8.png)\n\nThe contents to be filled in the **Display Condition** part:\n_Partner, Campaign_ and _Source_: Define the display of this content if the visitor has a corresponding UTM in its source URL.\n_Keywords_: Binds the display of content to a search for specific term(s).\n_Category_ and _Brand_: Binds the display of the content on a Category page and/or specific Mark(s).\n_Peridos_: Defines the period in which the content will be active.\n\nAfter the settings, check **Active Content** and add to the content list, saving all settings later.\n\nThe example below shows a standard shop window, with no display conditions, and another one exclusive for visits arising from Google sponsored campaign audiences (utm_source=**google**/utm_medium=**cpc**): \n\n![coleção9](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/how-to-include-a-collection-of-products-in-the-shop-window_9.png)\n\nIn the scenario above, if the customer came from the sponsored campaign audience, the products corresponding to the result of a search for ID 200000 Brand will be displayed on the **Lançamentos** shop window, located on Home; otherwise, the products corresponding to ID 8 collection will be displayed.\n\nWhenever more than one active content is used in the same control, they should be sorted (by clicking and dragging their content) so that the content with no conditions to be displayed are always in the last position, as shown above."}