Warning

Hello! Thanks for checking out this app. It's currently under development and research by the VTEX Search and Personalization team. During this phase, the app should only be installed on selected accounts. If you're not in contact with the VTEX Search and Personalization team, installing this app on your workspace will not have any effect. If you have any questions, please contact our Support.

The VTEX Recommendation Shelf app is a store component that displays a collection of products using recommendation strategies.

An error occurred while loading the image ./shelf.png

• Prerequisites
• Usage
  • Configuration
• Recommendation Strategies
• Troubleshooting
• Contributing

Most recommendation strategies rely on user navigation data as input. Therefore, your store must be configured with our pixel for the recommendation-shelf to work properly. This configuration is managed by the VTEX team, so please wait for our confirmation before proceeding with the integration.

This app uses our store builder with the blocks architecture. To learn more about Store Builder, click here.

To use this app, you need to import it in your store-theme dependencies in the manifest.json file.

Then, add the recommendation-shelf block into your app theme.

Now, you can change the behavior of the shelf block. See an example of how to configure it:

Our component relies on two other VTEX components: slider-layout and product-summary.shelf. You can customize the shelf by creating a custom product summary, for example:

For more information, see the Product Summary API configuration.

You can configure the recommendation-shelf block in your theme app using the following props:

Prop name	Type	Description	Default value
recommendationType	Enum	Recommendation strategy used to fetch product suggestions for a user. See Recommendation Strategies	TOP_ITEMS
title	string	Title to be displayed with the shelf.	-
campaignVrn	string	VRN identifier for an existing campaign. Takes precedence over recommendationType.	-

Below are the available recommendation strategies that can be used to fetch product suggestions:

strategy	Description	Pages
TOP_ITEMS	Returns the most bought products in the store	Any

Some strategies are based on user interest and navigation:

strategy	Description	Pages
PERSONALIZED	Returns products recommended based on the last products clicked by the user in the store.	Any
LAST_SEEN	Returns products recommended based on the last products viewed by the user in the store.	Any

Others are based on the current product (recommended for use on store.product pages):

strategy	Description	Pages
CROSS_SELL	Returns complementary products related to the current product.	store.product
VISUAL_SIMILARITY	Returns products considered visually similar to the current product.	store.product
SIMILAR_ITEMS	Returns products considered most similar to the current product.	store.product

Check if others have encountered similar issues here. Feel free to open issues or contribute with pull requests.