This app allows you to add content badges to an ecommerce. In the Admin panel, you can create, edit, and remove badges. There is also a storefront component that allows these badges to be added to your store theme.

In order to set up the Badges app in your store, follow these steps:

1. Install the app. You can do this by going to the Badges app page in the VTEX app store or by running this command in your terminal:

2. Add Badges to the peerDependencies in your manifest.json file:

With this, you should be able to start using the app.

After installing the app, you will be able to access it by going to the OTHER section of the Admin panel and clicking Badge Management.

The Add badges tab allows you to create new badges by following these steps:

1. Fill in the name of the badge.
2. Select the badge type, which can be IMAGE, TEXT, or HTML.
3. Insert the badge content according to the selected type.
4. Select the badge priority level, where 1 is the maximum priority and 5 is the minimum.
5. Set up the activation rule, which is composed of one or more conditions.
6. Click SAVE.

See below a badge creation example.

Note that each badge must contain at least one activation rule condition with the verb is. The app will not work properly if all activation rules conditions use is not.

To edit an existing badge, go to the Edit badges tab and follow these steps:

1. Click the menu icon in the row corresponding to the badge you wish to edit.
2. Click Edit.
3. Edit the badge attributes.
4. Click EDIT.

If you wish to delete an existing badge from your store, go to the Edit badges tab and follow these steps:

1. Click the menu icon in the row corresponding to the badge you wish to edit.
2. Click Delete.
3. In the prompt that will be displayed, click DELETE.

To improve the search for badges, it is possible to select which fields you want the search for them to be filtered. This makes searching the Database simpler and more efficient when returning badges to your website. To configure it, just enter the My Applications area. Then choose App Badges and select which fields you want the search to be related to.

Remember that by default, all fields are used as a filter.

In order to display the created badges in your store, you must add the store-badges component to a product page (store.product) or a product-summary. See an example of how to add badges to a product page below.

These are the props available for customization of the badge component.

Prop name	Type	Description
numberOfBadges	number	Number of badges that will be rendered.
text	array	Defines values that will be used when rendering a badge. To learn more about this prop, see Rich text.
image	array	Defines values that will be used when rendering image badges. To learn more about this prop, see Store image

After finishing all the steps, you can check the result in your store. The order of the badges is set according to the priority defined when creating them. See the image below that corresponds to the badge setup in this tutorial's examples.