Including a collection of products in the shop window

Layout

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.

Shop windows are used to feature products on several pages; they can also be used for recommendations on the product page.

Firstly, before setting up a shop window, create a collection (see instructions here) 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.

After the proper definitions, the collection is linked to the shop window at Storefront > Layout.

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

${"base64":" ","img":{"width":1465,"height":587,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":23638,"url":"https://raw.githubusercontent.com/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"}}$

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

${"base64":" ","img":{"width":748,"height":432,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":16283,"url":"https://raw.githubusercontent.com/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"}}$

${"base64":" ","img":{"width":577,"height":184,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":5327,"url":"https://raw.githubusercontent.com/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"}}$

Remember to save the settings so that you can edit the control created.

${"base64":" ","img":{"width":467,"height":363,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":7350,"url":"https://raw.githubusercontent.com/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"}}$

${"base64":" ","img":{"width":1448,"height":315,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":13876,"url":"https://raw.githubusercontent.com/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"}}$

To edit the control, it is necessary to add its contents, which represent each set of items to be displayed. Are they: Layout: Select the shelf template used in the showcase. Number of Columns, Number of Items, Show Unavailable and Ramdom ad Paged: Define the layout, quantity, and the criteria for displaying the items.

${"base64":" ","img":{"width":1502,"height":546,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22520,"url":"https://raw.githubusercontent.com/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"}}$

Remember to save your changes before you search or change pages. The next step is to add the content by selecting Add Content.

${"base64":" ","img":{"width":1254,"height":876,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26454,"url":"https://raw.githubusercontent.com/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"}}$

It is possible to define each content by using collections or search results, by using search parameters (further details here)

The contents to be filled in Content are: Content: Name that will identify each set of items QueryString: The parameters entered in this field define the search result that will be displayed in this content.

In the Product Cluster (Collection) field, you must select the collection that will be displayed by completing the following step:

${"base64":" ","img":{"width":912,"height":56,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2611,"url":"https://raw.githubusercontent.com/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"}}$

The contents to be filled in the Display Condition part: Partner, Campaign and Source: Define the display of this content if the visitor has a corresponding UTM in its source URL. Keywords: Binds the display of content to a search for specific term(s). Category and Brand: Binds the display of the content on a Category page and/or specific Mark(s). Peridos: Defines the period in which the content will be active.

After the settings, check Active Content and add to the content list, saving all settings later.

The 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):

${"base64":" ","img":{"width":1501,"height":615,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":27852,"url":"https://raw.githubusercontent.com/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"}}$

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

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