[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore override use cases adding more icon options to the alert component in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-overview)

[Adding more icon options to the Alert component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component)

[Adding an image to the Alert component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides//faststore/override-use-cases-adding-an-image-to-the-alert-component)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-overview)

[Adding more icon options to the Alert component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component)

[Adding an image to the Alert component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides//faststore/override-use-cases-adding-an-image-to-the-alert-component)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-overview)

Adding more icon options to the Alert component

This guide illustrates a common use case for [getOverriddenSection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function) in FastStore. It focuses on customizing the Headless CMS schema for a section to provide more icon options.

> For detailed instructions on overriding components, refer to [Overriding native component’s props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-component-props) and [Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-native-component).

## Context

* The native [Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections%23alert) section provides the following icon options by default:

![{"base64":"  ","img":{"width":1116,"height":605,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":245719,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hcms-icons.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hcms-icons.gif)

| Alert default icon name | Icon        |
| ----------------------- | ----------- |
| Bell                    | Bell        |
| BellRinging             | BellRinging |
| Checked                 | Checked     |
| Info                    | Info        |
| Truck                   | Truck       |
| User                    | User        |

* You want to allow Headless CMS editors to select in the Alert section from a wider range of icons supported by the `@faststore/ui` [iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons%23usage) library.

## Implementation

### Overriding the Alert section

By leveraging `getOverriddenSection`, you can customize the Alert section's Headless CMS schema to offer additional icon options. Follow the steps below:

1. In the `src/components/sections` folder, create the folder `CustomIconsAlert` folder.
2. In the `CustomIconsAlert` folder, create the `CustomIconsAlert.tsx` file.
3. Import the following to the `CustomIconsAlert.tsx` file:
`1
import { getOverriddenSection } from '@faststore/core'
`
4. Define the `CustomIconsAlert` component:
`1
import { AlertSection, getOverriddenSection } from '@faststore/core'
2

3
const CustomIconsAlert = getOverriddenSection({
4
Section: AlertSection,
5
})
6

7
export default CustomIconsAlert
`
   * This is an Alert component override with custom icon options in the Headless CMS. The component is defined using `getOverriddenSection`.
   * This code changes only the schema to include more options for native Icons supported by `@faststore/ui`.
   * The override options specify the `Section` to be overridden (Alert).
> For further details on code implementation, see the [CustomIconsAlert](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/tree/main/src/components/sections/CustomIconsAlert) folder available in the [playground.store](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store) repository.

### Synchronizing the changes with the Headless CMS

Add the section to the Headless CMS by following the instructions available in [syncing components to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms).

The following schema was used as an example in [cms/faststore/sections.json](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/blob/main/cms/faststore/sections.json%23L2-L57):

`1

[

2

 {

3

 "name": "CustomIconsAlert",

4

 "schema": {

5

 "title": "Alert with more Icon options",

6

 "description": "Add an alert that has more Icon options",

7

 "type": "object",

8

 "required": ["icon", "content", "dismissible"],

9

 "properties": {

10

 "icon": {

11

 "type": "string",

12

 "title": "Icon",

13

 "enumNames": [

14

 "Bell",

15

 "BellRinging",

16

 "Checked",

17

 "Info",

18

 "Truck",

19

 "User",

20

 "Plus",

21

 "PlusCircle",

22

 "Ruler",

23

 "Star",

24

 "Storefront",

25

 "Twitter"

26

 ],

27

 "enum": [

28

 "Bell",

29

 "BellRinging",

30

 "Checked",

31

 "Info",

32

 "Truck",

33

 "User",

34

 "Plus",

35

 "PlusCircle",

36

 "Ruler",

37

 "Star",

38

 "Storefront",

39

 "Twitter"

40

 ]

41

 }

42

 }

43

 }

44

 }

45

]

`

> For further details on code implementation, see the [sections.json](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/blob/main/cms/faststore/sections.json%23L1-L55) file available in the [playground.store](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store) repository.

## Results

Once you have [set your development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode) to see the changes locally, you can see the new Alert icon. Below, you can check an example storefront before and after the instructions in this guide:

* **Before**
The native Alert displays one of the default icons, `BellRinging`, alongside the text `Get 15% off today: NEW15! Buy now`.
![{"base64":"  ","img":{"width":1165,"height":173,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21794,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-default___12bbbaf326628380e71339c779d20f22.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/alert-default___12bbbaf326628380e71339c779d20f22.png)
* **After**
The native Alert was replaced with the custom one, which brings a new icon, `Star`, from the `@faststore/ui` [iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons%23usage) library, alongside the text `Rate your favorite item`.
![{"base64":"  ","img":{"width":1162,"height":173,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19244,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-custom-icon___8a316b6e33417b6fda47a37c44f6b953.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/alert-custom-icon___8a316b6e33417b6fda47a37c44f6b953.png)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/override-use-cases/adding-more-icon-options-to-the-alert-component.mdx)

[Section override - Use cases« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-overview)[Adding an image to the Alert componentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides//faststore/override-use-cases-adding-an-image-to-the-alert-component)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23context)

[Implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23implementation)

[Overriding the Alert section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23overriding-the-alert-section)[Synchronizing the changes with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23synchronizing-the-changes-with-the-headless-cms)

[Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23results)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/override-use-cases/adding-more-icon-options-to-the-alert-component.mdx)

Copy page

On this page

ON THIS PAGE

[Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23context)

[Implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23implementation)

[Overriding the Alert section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23overriding-the-alert-section)[Synchronizing the changes with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23synchronizing-the-changes-with-the-headless-cms)

[Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-more-icon-options-to-the-alert-component%23results)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation making your new app version publicly available in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

[Releasing a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-releasing-a-new-app-version)

[Publishing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-publishing-an-app)

[Deploying the app's stable version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-deploying-the-app-stable-version)

[Promoting a workspace to Master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

[Releasing a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-releasing-a-new-app-version)

[Publishing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-publishing-an-app)

[Deploying the app's stable version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-deploying-the-app-stable-version)

[Promoting a workspace to Master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/app-development)

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

Deploying a new app version

Learn how to make your new app version publicly available.

Deploying a new version of your app in VTEX IO is a crucial step in delivering improvements and updates to your target audience. This guide will walk you through the process to make your latest app version publicly available.

![{"base64":"  ","img":{"width":1457,"height":394,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":51614,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/making-an-app-publicly-available.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/making-an-app-publicly-available.png)

## Release the app

The Releasing stage marks the beginning of the deployment process in VTEX IO. It initiates the deployment process by releasing your app using Git as a version control system. It increments the app version in the `manifest.json` file, updates the `CHANGELOG.md file` with the changes, and creates a commit and a tag on the app repository.

For more information, refer to: [Releasing a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-releasing-a-new-app-version).

## Publish a candidate version

In the Publishing stage, your app version becomes a candidate version, ready for testing and validation in a production workspace.

For more information, refer to: [Publishing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app).

## Test the candidate version in a production workspace

Collaborate with your development and quality assurance teams to conduct thorough testing in a production workspace. This includes A/B testing, as well as rigorous performance and security testing to identify and address any potential issues with your app.

For more information, refer to: [A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ab-tests).

## Deploy the app as a stable version

Initiate the deployment process to update the app version across all accounts where the app is installed, ensuring stability and consistency.

For more information, refer to: [Deploying the app's stable version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deploying-the-app-stable-version).

## (Optional) Promote your changes to `master`

The Promotion stage is _optional_ and the final step in the deployment process. It involves promoting the production workspace used for testing to the master workspace.

For more information, refer to: [Promoting a workspace to master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/App-Guides/vtex-io-documentation-making-your-new-app-version-publicly-available.md)

[A/B testing Legacy and IO store versions« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available//docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)[Releasing a new app versionNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available//docs/guides/vtex-io-documentation-releasing-a-new-app-version)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Release the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23release-the-app)

[Publish a candidate version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23publish-a-candidate-version)

[Test the candidate version in a production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23test-the-candidate-version-in-a-production-workspace)

[Deploy the app as a stable version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23deploy-the-app-as-a-stable-version)

[(Optional) Promote your changes to master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23optional-promote-your-changes-to-master)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/App-Guides/vtex-io-documentation-making-your-new-app-version-publicly-available.md)

Copy page

On this page

ON THIS PAGE

[Release the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23release-the-app)

[Publish a candidate version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23publish-a-candidate-version)

[Test the candidate version in a production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23test-the-candidate-version-in-a-production-workspace)

[Deploy the app as a stable version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23deploy-the-app-as-a-stable-version)

[(Optional) Promote your changes to master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23optional-promote-your-changes-to-master)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore molecules discount badge in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/components-index)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-overview)

DiscountBadge

Displays product's discounts.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/molecules/DiscountBadge)

The `DiscountBadge` displays product's discounts.

Example

Code

11% off

38% off

50% off

11% off

---

## Usage

### Import the component

`1

import { DiscountBadge } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/atoms/Badge/styles.scss" import

2

 "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Examples

### Variants

#### Low Discount

Example

Code

11% off

### Medium discount

Example

Code

38% off

### High discount

Example

Code

50% off

---

## Design tokens

This component inherits [Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge) design tokens.

### Design tokens: Low discount

| Local token                           | Default value/Global token linked    |
| ------------------------------------- | ------------------------------------ |
| \--fs-discount-badge-low-bkg-color    | var(--fs-badge-success-bkg-color)    |
| \--fs-discount-badge-low-text-color   | var(--fs-badge-success-text-color)   |
| \--fs-discount-badge-low-border-color | var(--fs-badge-success-border-color) |

### Design tokens: Medium discount

| Local token                              | Default value/Global token linked    |
| ---------------------------------------- | ------------------------------------ |
| \--fs-discount-badge-medium-bkg-color    | var(--fs-badge-warning-bkg-color)    |
| \--fs-discount-badge-medium-text-color   | var(--fs-badge-warning-text-color)   |
| \--fs-discount-badge-medium-border-color | var(--fs-badge-warning-border-color) |

### Design tokens: High discount

| Local token                            | Default value/Global token linked   |
| -------------------------------------- | ----------------------------------- |
| \--fs-discount-badge-high-bkg-color    | var(--fs-badge-danger-bkg-color)    |
| \--fs-discount-badge-high-text-color   | var(--fs-badge-danger-text-color)   |
| \--fs-discount-badge-high-border-color | var(--fs-badge-danger-border-color) |

---

## Data attributes

You can target and override `DiscountBadge` styles using the following data attributes:

`data-fs-discount-badge`

`data-fs-discount-badge-variant`

This component inherits [Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge) css selectors and styles.

---

## Props

| Name              | Type             | Description                                                                            | Default           |
| ----------------- | ---------------- | -------------------------------------------------------------------------------------- | ----------------- |
| **testId**        | string           | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-discount-badge |
| **listPrice\***   | number           | Specifies price without discount applied.                                              |                   |
| **spotPrice\***   | number           | Specifies current price with discount applied.                                         |                   |
| **thresholdLow**  | number           | Sets the limit percentage value to consider a low discount.                            | 15                |
| **thresholdHigh** | number           | Sets the limit percentage value to consider a high discount.                           | 40                |
| **size**          | "small" \| "big" | Specifies the size variant.                                                            |                   |

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/discount-badge.mdx)

[CheckboxField« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-checkbox-field)[DropdownNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-dropdown)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23examples)

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23variants)[Medium discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23medium-discount)[High discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23high-discount)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens)

[Design tokens: Low discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens-low-discount)[Design tokens: Medium discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens-medium-discount)[Design tokens: High discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens-high-discount)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23props)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/discount-badge.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23examples)

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23variants)[Medium discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23medium-discount)[High discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23high-discount)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens)

[Design tokens: Low discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens-low-discount)[Design tokens: Medium discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens-medium-discount)[Design tokens: High discount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23design-tokens-high-discount)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-discount-badge/docs/guides/faststore/molecules-discount-badge%23props)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)