The Shelf component is a product list that helps you to build your own shop window and work on your store's visual merchandising.

Using VTEX Store Framework, you can build two different shelves in your store: one to be rendered in the store home page, displaying any products you desire, and another one to be rendered in the product details page, displaying related products that may be interesting for users.

By installing the Shelf app, you can use the shelf.RelatedProducts block to build the Shelf in your store. However, when building the traditional Shelf to be displayed on your store home page, the Shelf app will not suffice since the shelf block was deprecated.

Aiming to display a flexible product list in your home page, the traditional shelf component as we know is now configured using the Product Summary List, the Product Summary Shelf and the Slider Layout blocks.

Since these three blocks come from the Product Summary and the Slider-Layout app, it is strongly recommended to check out each documentation in order to understand how the blocks work as well as the props available to set their behavior and consequently the Shelf behavior.

Check out the instructions below for how it can be done.

1. Add the product-summary and the slider-layout apps to your theme's dependencies in the manifest.json file:

2. Add the list-context.product-list into your store.home theme template and add in its blocks list the product-summary.shelf block. Also, add as its children the slider-layout block. For example:

3. Declare the product-summary.shelf block and add the desired blocks as children, as shown in the example below. If you have any questions about structuring the block, check its documentation.

4. Declare the slider-layout block, adding as desired child blocks and props. If you have any questions about structuring the block, check its documentation.

After the last step, you now have a functioning Shelf for your store.