Documentation
Feedback
Guides

Badges

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.

Setup

In order to setup Badges 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:

_10
vtex install vtex.badges@3.x

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

_10
"peerDependencies": {
_10
"vtex.badges": "3.x"
_10
}

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

Managing badges

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.

{"base64":"  ","img":{"width":1366,"height":768,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":60934,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-badges-0.PNG"}}

Creating badges

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. Setup the activation rule, which is composed of one or more conditions.
  6. Click SAVE.

See below a badge creation example.

{"base64":"  ","img":{"width":768,"height":721,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28674,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-badges-1.PNG"}}

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.

Editing badges

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

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

{"base64":"  ","img":{"width":870,"height":377,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18900,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-badges-2.PNG"}}

Deleting badges

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 with the badge you wish to edit.
  2. Click Delete.
  3. In the prompt that will be displayed, click DELETE.

Filtering badges

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.

Captura de Tela 2022-11-22 às 13 50 50

Remember that by default all fields are used as a filter

Displaying badges in your store

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.


_32
"store.product": {
_32
"children": [
_32
+ "store-badges",
_32
"stack-layout",
_32
"breadcrumb",
_32
"flex-layout.row#main",
_32
"condition-layout.product"
_32
]
_32
},
_32
_32
+ "store-badges":{
_32
+ "props": {
_32
+ "numberOfBadges": 1,
_32
+ "text":{
_32
+ "font": "t-heading-5",
_32
+ "textColor": "blue",
_32
+ "textAlignment": "CENTER",
_32
+ "textPosition": "CENTER",
_32
+ "htmlId": "teste1"
_32
+ },
_32
+ "image":{
_32
+ "blockClass": "container",
_32
+ "height": 500,
_32
+ "width": 500,
_32
+ "minWidth": 25,
_32
+ "minHeight": 25,
_32
+ "alt": "teste",
_32
+ "title": "title",
_32
+ "preload": true
_32
+ }
_32
+ }
_32
+ }

Component props

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

Prop nameTypeDescription
numberOfBadgesnumberNumber of badges that will be rendered.
textarrayDefines values that will be used when rendering a badge. To learn more about this prop see Rich text.
imagearrayDefines values that will be used when rendering image badges. To learn more about these prop see Store image

Final result

After finishing all 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.

{"base64":"  ","img":{"width":798,"height":533,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":115953,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-badges-3.PNG"}}

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page