[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 atoms checkbox 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/atoms-checkbox/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/updates/release-notes)

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-textarea)

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/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/atoms-checkbox/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/atoms-checkbox/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-textarea)

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/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/atoms-checkbox/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/atoms-checkbox/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/atoms-checkbox/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Checkbox

Checkboxes allow users to toggle an option on or off.

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

Checkboxes are interactive form controls that let users select one or more options by toggling them on or off. They are commonly used in forms, filter panels, and preference settings.

The `Checkbox` component provides accessible markup, design tokens for customization, and states for `checked`, `disabled`, and `partial` (partially checked).

Example

Code

---

## Usage

### Import the component

`1

import { Checkbox } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/atoms/Checkbox/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

### Checked

Example

Code

### Disabled

Example

Code

### Partial

Example

Code

---

## Design tokens

| Local token                       | Default value/Global token linked                                                                                |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| \--fs-checkbox-width              | 1.25rem                                                                                |
| \--fs-checkbox-height             | var(--fs-checkbox-width)                                                                                |
| \--fs-checkbox-border-width       | var(--fs-border-width)                                                                                |
| \--fs-checkbox-border-radius      | var(--fs-border-radius)                                                                                |
| \--fs-checkbox-border-color       | var(--fs-border-color)                                                                                |
| \--fs-checkbox-border-color-hover | var(--fs-border-color-active)                                                                                |
| \--fs-checkbox-transition         | border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function) |
| \--fs-checkbox-bkg-color-hover    | var(--fs-color-primary-bkg-light)                                                                                |
| \--fs-checkbox-shadow-hover       | 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)                                                                                |

### Design tokens: Checked

Checked checkboxes use a filled primary background and focused hover accents to clearly indicate selection while maintaining accessible contrast and feedback.

| Local token                               | Default value/Global token linked                                                   |
| ----------------------------------------- | ----------------------------------------------------------------------------------- |
| \--fs-checkbox-checked-bkg-color          | var(--fs-color-primary-bkg)                                                         |
| \--fs-checkbox-checked-bkg-color-hover    | var(--fs-color-primary-bkg-hover)                                                   |
| \--fs-checkbox-checked-border-color-hover | var(--fs-border-color-hover)                                                        |
| \--fs-checkbox-checked-shadow-hover       | 0 0 0 var(--fs-checkbox-border-width) var(--fs-checkbox-checked-border-color-hover) |

### Design tokens: Disabled

Disabled checkboxes lower contrast and remove interactive feedback, preserving layout without suggesting availability.

| Local token                          | Default value/Global token linked |
| ------------------------------------ | --------------------------------- |
| \--fs-checkbox-disabled-bkg-color    | var(--fs-color-disabled-bkg)      |
| \--fs-checkbox-disabled-border-width | var(--fs-checkbox-border-width)   |
| \--fs-checkbox-disabled-border-color | var(--fs-border-color-disabled)   |
| \--fs-checkbox-disabled-text-color   | var(--fs-color-disabled-text)     |

### Design tokens: Partial

Partial checkboxes present a neutral surface with a primary accent to convey a mixed selection state, useful for parent options of grouped items.

| Local token                            | Default value/Global token linked |
| -------------------------------------- | --------------------------------- |
| \--fs-checkbox-partial-bkg-color       | var(--fs-color-body-bkg)          |
| \--fs-checkbox-partial-border-width    | var(--fs-checkbox-border-width)   |
| \--fs-checkbox-partial-border-color    | var(--fs-color-primary-bkg)       |
| \--fs-checkbox-partial-bkg-color-hover | var(--fs-color-primary-bkg-light) |

---

## Data attributes

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

`data-fs-checkbox`

---

## Props

| Name        | Type          | Description                                                                            | Default     |
| ----------- | ------------- | -------------------------------------------------------------------------------------- | ----------- |
| **testId**  | string        | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-checkbox |
| **partial** | false \| true | Boolean that represents a partial state.                                               |             |

---

## Best practices

### ✅ Do's

* Always pair a Checkbox with a descriptive [Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-label) to improve accessibility and clarify the option’s purpose.

### ❌ Don’ts

* Don’t use a `Checkbox` when only one option is possible. In that case, use a [Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-radio) instead.
* Don’t use checkboxes to trigger immediate actions such as submitting data.

---

## Related components

* CheckboxField
CheckboxField
`CheckboxField` wraps a `Checkbox` input and its corresponding `Label`.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/molecules-checkbox-field)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/_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/atoms-checkbox/_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/atoms-checkbox/_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/atoms/checkbox.mdx)

[Button« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-button)[IconNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-icon)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/_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/atoms-checkbox/_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/atoms-checkbox/_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/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23usage)

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

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

[Checked](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23checked)[Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23disabled)[Partial](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23partial)

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

[Design tokens: Checked](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23design-tokens-checked)[Design tokens: Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23design-tokens-disabled)[Design tokens: Partial](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23design-tokens-partial)

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

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

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23best-practices)

[✅ Do's](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23-dos)[❌ Don’ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23-donts)

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23related-components)

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/atoms/checkbox.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Checked](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23checked)[Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23disabled)[Partial](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23partial)

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

[Design tokens: Checked](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23design-tokens-checked)[Design tokens: Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23design-tokens-disabled)[Design tokens: Partial](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23design-tokens-partial)

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

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

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23best-practices)

[✅ Do's](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23-dos)[❌ Don’ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23-donts)

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox/docs/guides/faststore/atoms-checkbox%23related-components)

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 how to receive catalog changes on vtex io 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/how-to-receive-catalog-changes-on-vtex-io/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/app-development-guides)

[Services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-service)

[Calling commerce APIs on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/calling-commerce-apis-on-vtex-io)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-clients)

Handling events

[Receiving Catalog Changes on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io)

[Receiving Order Notifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-order-notifications-on-vtex-io)

[Path patterns](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/service-path-patterns)

[Configuring dynamic routes in VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/configuring-dynamic-routes-in-vtex-io-services)

[Developing service configuration apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-developing-service-configuration-apps)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/node-builder-7x-migration-guide)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/ab-tests)

---

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

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/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/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/app-development-guides)

[Services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-service)

[Calling commerce APIs on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/calling-commerce-apis-on-vtex-io)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-clients)

Handling events

[Receiving Catalog Changes on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io)

[Receiving Order Notifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-order-notifications-on-vtex-io)

[Path patterns](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/service-path-patterns)

[Configuring dynamic routes in VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/configuring-dynamic-routes-in-vtex-io-services)

[Developing service configuration apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-developing-service-configuration-apps)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/node-builder-7x-migration-guide)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/ab-tests)

---

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

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/app-development)

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/app-development-guides)

Handling events

[Receiving Catalog Changes on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io)

Receiving Catalog Changes on VTEX IO

Learn how to detect and handle catalog changes in your VTEX IO app.

This guide will teach you how to set up a system for detecting and responding to changes in the VTEX Catalog using VTEX IO.

We will use the [Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.broadcaster) app to trigger events and develop a new app to handle these events.

Catalogbroadcasterevents-exampleNo event triggeredalt\[Catalog changes detected\]\[No catalog changes\]Listens catalog changesTriggers eventskuChange handles eventCatalogbroadcasterevents-example

## Before you begin

Ensure you are in a [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace) and install the [Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.broadcaster) app using the following command:

`1

vtex install vtex.broadcaster

`

The [Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.broadcaster) app broadcasts catalog changes to other parts of the VTEX system. In this guide, we will use it to listen for catalog modifications and execute tasks accordingly.

## Implementing the app

The steps below show how to implement a service app that receives and handles events triggered by the Broadcaster app when changes occur in the catalog.

### Cloning the boilerplate repository

Clone the [events-example](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/events-example) boilerplate by running the command presented on the right. This will create a local copy of the project, equipping you with the necessary files to start implementing the catalog change handling system.

### Setting the event handler

Navigate to the `node/service.json` file and configure the event handler's name to `skuChange` and the `keys` property to `["broadcaster.notification"]`.

The `events` field defines the events the service will listen to and specifies how it will handle them. In this case, the `skuChange` function will run whenever the event, identified by the `key` value, is triggered - specifically when the Broadcaster app triggers the [notification](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/broadcaster/blob/master/node/middlewares/pushNotification.ts%23L8) event.

* `skuChange`: Custom name given to the event handler function. You are free to choose a meaningful name for your events; in this case, it represents a change related to a Stock Keeping Unit (SKU).
* `keys`: Property that specifies the event identifier the service will listen for. In this case, `["broadcaster.notification"]`.

### Developing the event handler function

After saving the `node/service.json`, edit the `node/index.ts` file to create the `skuChange` handler function.

Note that the `skuChange` function will log the `Received SKU changed event` message whenever the `event-example` app listens to an event from the `broadcaster` app.

> For more complex functions, consider developing your event handler function in a separate file.

### Linking the app

Open a terminal, go to the `events-example` folder, and run the `vtex link` command. This will make the app run in the developer workspace and be ready to receive events.

### Configuring the Broadcaster with the workspace

By default, the Broadcaster app only triggers events in the [master workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace). To make events work in a developer workspace, you must add it in the Broadcaster settings. See the instructions in the [Broadcaster app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.broadcaster%23notify-target-workspace-setting).

### Triggering the event

Change the catalog to trigger an event in the Broadcaster app. You can change the inventory amount, product price, or description. For details, see the [Catalog](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/adding-products--tutorials%5F2567), [Inventory](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/managing-stock-items--tutorials%5F139), and [Prices](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/sku-price-change--tutorials%5F95%23manual-updating-of-each-item-using-admin) documentation.

The event generated will contain details about the SKU changes such as inventory amount, price, date of the change, and others. See the complete list of fields in the event in the [SKU data section in the Broadcaster app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.broadcaster%23sku-data) article.

### Checking the handler function behavior

After linking the `events-example` app and firing the event with the Broadcast app, check the console for a log message similar to the following: `Received SKU changed event service-node@6.38.3`.

Now that your system is configured to detect catalog changes, it is time to tailor your code to respond effectively to these events according to your specific requirements. Customize your code to implement actions and functionalities that align with your desired outcomes in response to catalog modifications.

`1

git clone https://github.com/vtex-apps/events-example

`

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/_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/Getting-Started/back-end-development-guides/how-to-receive-catalog-changes-on-vtex-io.md)

[Using Clients in Node apps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io//docs/guides/using-node-clients)[Receiving Order NotificationsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io//docs/guides/how-to-receive-order-notifications-on-vtex-io)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23before-you-begin)

[Implementing the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23implementing-the-app)

[Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23cloning-the-boilerplate-repository)[Setting the event handler](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23setting-the-event-handler)[Developing the event handler function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23developing-the-event-handler-function)[Linking the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23linking-the-app)[Configuring the Broadcaster with the workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23configuring-the-broadcaster-with-the-workspace)[Triggering the event](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23triggering-the-event)[Checking the handler function behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23checking-the-handler-function-behavior)

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/Getting-Started/back-end-development-guides/how-to-receive-catalog-changes-on-vtex-io.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23before-you-begin)

[Implementing the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23implementing-the-app)

[Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23cloning-the-boilerplate-repository)[Setting the event handler](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23setting-the-event-handler)[Developing the event handler function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23developing-the-event-handler-function)[Linking the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23linking-the-app)[Configuring the Broadcaster with the workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23configuring-the-broadcaster-with-the-workspace)[Triggering the event](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23triggering-the-event)[Checking the handler function behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-receive-catalog-changes-on-vtex-io/docs/guides/how-to-receive-catalog-changes-on-vtex-io%23checking-the-handler-function-behavior)

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 6 listeningtostoreevents 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-6-listeningtostoreevents/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-pixel-app)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

[2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)

[3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-4-configuringyourappsettings)

[4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

[6\. Structuring the documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

[7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/ab-tests)

---

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

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-pixel-app)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

[2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)

[3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-4-configuringyourappsettings)

[4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

[6\. Structuring the documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

[7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/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-6-listeningtostoreevents/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-6-listeningtostoreevents/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/ab-tests)

---

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

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/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-6-listeningtostoreevents/docs/app-development)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-getting-started)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

5\. Listening to store events

Some services provided by third-party solutions may rely on store events. Events are notifications a web application automatically broadcasts whenever a user performs an important action in a store, such as adding items to the shopping cart or accessing a product page.

In these scenarios, your Pixel app must be able to listen to the desired events and provide the required data to the third-party service in question.

## Instructions

1. Open the `react/index.tsx` file.
2. Write your script based on your Pixel app needs. Some store events you can use in your Pixel app are:
* `addToCart` \- Triggered when a product is added to the cart.
* `removeFromCart` \- Triggered when a product is removed from the cart.
* `pageView` \- Triggered on every loaded page view.
* `productImpression` \- Triggered when product information is visible on the page currently being accessed by users.

> All the available event properties are written in TypeScript. For a comprehensive list of properties, please refer to [this file](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/pixel-app-template/blob/master/react/typings/events.d.ts).

This is an example of an event implementation in the [Google Tag Manager Pixel app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/google-tag-manager/blob/master/react/index.tsx):

`` 1

import { canUseDOM } from 'vtex.render-runtime'

2

3

import push from './modules/push'

4

import {

5

 Order,

6

 PixelMessage,

7

 ProductOrder,

8

 Impression,

9

 CartItem,

10

} from './typings/events'

11

import { AnalyticsEcommerceProduct } from './typings/gtm'

12

13

export default function() {

14

 return null

15

} // no-op for extension point

16

17

export function handleEvents(e: PixelMessage) {

18

 switch (e.data.eventName) {

19

 case 'vtex:pageView': {

20

 push({

21

 event: 'pageView',

22

 location: e.data.pageUrl,

23

 page: e.data.pageUrl.replace(e.origin, ''),

24

 referrer: e.data.referrer,

25

 ...(e.data.pageTitle && {

26

 title: e.data.pageTitle,

27

 }),

28

 })

29

30

 return

31

 }

32

33

 case 'vtex:productView': {

34

 const { selectedSku, productName, brand, categories } = e.data.product

35

36

 let price

37

38

 try {

39

 price = e.data.product.items[0].sellers[0].commertialOffer.Price

40

 } catch {

41

 price = undefined

42

 }

43

44

 const data = {

45

 ecommerce: {

46

 detail: {

47

 products: [

48

 {

49

 brand,

50

 category: getCategory(categories),

51

 id: selectedSku.itemId,

52

 name: productName,

53

 variant: selectedSku.name,

54

 price,

55

 },

56

 ],

57

 },

58

 },

59

 event: 'productDetail',

60

 }

61

62

 push(data)

63

64

 return

65

 }

66

67

 case 'vtex:productClick': {

68

 const { productName, brand, categories, sku } = e.data.product

69

70

 let price

71

72

 try {

73

 price = e.data.product.items[0].sellers[0].commertialOffer.Price

74

 } catch {

75

 price = undefined

76

 }

77

78

 const data = {

79

 event: 'productClick',

80

 ecommerce: {

81

 click: {

82

 products: [

83

 {

84

 brand,

85

 category: getCategory(categories),

86

 id: sku.itemId,

87

 name: productName,

88

 variant: sku.name,

89

 price,

90

 },

91

 ],

92

 },

93

 },

94

 }

95

96

 push(data)

97

98

 return

99

 }

100

101

 case 'vtex:addToCart': {

102

 const { items } = e.data

103

104

 push({

105

 ecommerce: {

106

 add: {

107

 products: items.map((sku: any) => ({

108

 brand: sku.brand,

109

 category: sku.category,

110

 id: sku.skuId,

111

 name: sku.name,

112

 price: `$\{sku.price\}`,

113

 quantity: sku.quantity,

114

 variant: sku.variant,

115

 })),

116

 },

117

 currencyCode: e.data.currency,

118

 },

119

 event: 'addToCart',

120

 })

121

122

 return

123

 }

124

125

 case 'vtex:removeFromCart': {

126

 const { items } = e.data

127

128

 push({

129

 ecommerce: {

130

 currencyCode: e.data.currency,

131

 remove: {

132

 products: items.map((sku: any) => ({

133

 brand: sku.brand,

134

 id: sku.skuId,

135

 category: sku.category,

136

 name: sku.name,

137

 price: `$\{sku.price\}`,

138

 quantity: sku.quantity,

139

 variant: sku.variant,

140

 })),

141

 },

142

 },

143

 event: 'removeFromCart',

144

 })

145

146

 return

147

 }

148

149

 case 'vtex:orderPlaced': {

150

 const order = e.data

151

152

 const ecommerce = {

153

 purchase: {

154

 actionField: getPurchaseObjectData(order),

155

 products: order.transactionProducts.map((product: ProductOrder) =>

156

 getProductObjectData(product)

157

 ),

158

 },

159

 }

160

161

 push({

162

 // @ts-ignore

163

 event: 'orderPlaced',

164

 ...order,

165

 ecommerce,

166

 })

167

168

 // Backwards compatible event

169

 push({

170

 ecommerce,

171

 event: 'pageLoaded',

172

 })

173

174

 return

175

 }

176

177

 case 'vtex:productImpression': {

178

 const { currency, list, impressions, product, position } = e.data

179

 let oldImpresionFormat: Record<string, any> | null = null

180

181

 if (product != null && position != null) {

182

 // make it backwards compatible

183

 oldImpresionFormat = [

184

 getProductImpressionObjectData(list)({

185

 product,

186

 position,

187

 }),

188

 ]

189

 }

190

191

 const parsedImpressions = (impressions || []).map(

192

 getProductImpressionObjectData(list)

193

 )

194

195

 push({

196

 event: 'productImpression',

197

 ecommerce: {

198

 currencyCode: currency,

199

 impressions: oldImpresionFormat || parsedImpressions,

200

 },

201

 })

202

203

 return

204

 }

205

206

 case 'vtex:userData': {

207

 const { data } = e

208

209

 if (!data.isAuthenticated) {

210

 return

211

 }

212

213

 push({

214

 event: 'userData',

215

 userId: data.id,

216

 })

217

218

 return

219

 }

220

221

 case 'vtex:cartLoaded': {

222

 const { orderForm } = e.data

223

224

 push({

225

 event: 'checkout',

226

 ecommerce: {

227

 checkout: {

228

 actionField: {

229

 step: 1,

230

 },

231

 products: orderForm.items.map(getCheckoutProductObjectData),

232

 },

233

 },

234

 })

235

236

 break

237

 }

238

239

 default: {

240

 break

241

 }

242

 }

243

}

244

245

function getPurchaseObjectData(order: Order) {

246

 return {

247

 affiliation: order.transactionAffiliation,

248

 coupon: order.coupon ? order.coupon : null,

249

 id: order.orderGroup,

250

 revenue: order.transactionTotal,

251

 shipping: order.transactionShipping,

252

 tax: order.transactionTax,

253

 }

254

}

255

256

function getProductObjectData(product: ProductOrder) {

257

 return {

258

 brand: product.brand,

259

 category: product.categoryTree?.join('/'),

260

 id: product.sku,

261

 name: product.name,

262

 price: product.price,

263

 quantity: product.quantity,

264

 variant: product.skuName,

265

 }

266

}

267

268

function getCategory(rawCategories: string[]) {

269

 if (!rawCategories || !rawCategories.length) {

270

 return

271

 }

272

273

 return removeStartAndEndSlash(rawCategories[0])

274

}

275

276

// Transform this: "/Apparel & Accessories/Clothing/Tops/"

277

// To this: "Apparel & Accessories/Clothing/Tops"

278

function removeStartAndEndSlash(category?: string) {

279

 return category?.replace(/^\/|\/$/g, '')

280

}

281

282

function getProductImpressionObjectData(list: string) {

283

 return ({ product, position }: Impression) => ({

284

 brand: product.brand,

285

 category: getCategory(product.categories),

286

 id: product.sku.itemId,

287

 list,

288

 name: product.productName,

289

 position,

290

 price: `$\{product.sku.seller!.commertialOffer.Price\}`,

291

 variant: product.sku.name,

292

 })

293

}

294

295

function getCheckoutProductObjectData(

296

 item: CartItem

297

): AnalyticsEcommerceProduct {

298

 return {

299

 id: item.id,

300

 name: item.name,

301

 category: Object.keys(item.productCategories ?? {}).reduce(

302

 (categories, category) =>

303

 categories ? `$\{categories\}/$\{category\}` : category,

304

 ''

305

 ),

306

 brand: item.additionalInfo?.brandName ?? '',

307

 variant: item.skuName,

308

 price: item.sellingPrice / 100,

309

 quantity: item.quantity,

310

 }

311

}

312

313

if (canUseDOM) {

314

 window.addEventListener('message', handleEvents)

315

}

 ``

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/_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/Getting-Started/vtex-io-documentation-1-developnativeintegrationswithpixelapps/vtex-io-documentation-6-listeningtostoreevents.md)

[4\. Writing the head and body scripts« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents//docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)[6\. Structuring the documentationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents//docs/guides/vtex-io-documentation-7-structuringthedocumentation)

See also

[6\. Structuring the documentationApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-6-listeningtostoreevents%23instructions)

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/Getting-Started/vtex-io-documentation-1-developnativeintegrationswithpixelapps/vtex-io-documentation-6-listeningtostoreevents.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents/docs/guides/vtex-io-documentation-6-listeningtostoreevents%23instructions)

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=)