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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Price

Prices are used to display the price of a given product, discount and total values.

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

The `Price` component displays the price of a given product, its discount, and total values. Typical use cases include:

* Showing product prices on listings and detail pages (e.g., current selling price, original listing price).
* Displaying discounted prices and savings amounts to highlight promotions.

Example

Code

62.562.562.562.562.5

---

## Usage

### Import the component

`1

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

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

#### Installment

Example

Code

62.5

#### Listing

Example

Code

62.5

#### Savings

Example

Code

62.5

#### Selling

Example

Code

62.5

#### Spot

Example

Code

62.5

### INTL Formatted to parts

Example

Code

$62.50

### INTL Formatted

Example

Code

€62.50

### Custom price formatter

Example

Code

62,5 reais

---

## Design tokens

| Local token                         | Default value/Global token linked |
| ----------------------------------- | --------------------------------- |
| \--fs-price-listing-color           | var(--fs-color-text-light)        |
| \--fs-price-listing-text-decoration | line-through                      |
| \--fs-price-spot-font-weight        | var(--fs-text-weight-bold)        |
| \--fs-price-spot-color              | var(--fs-color-text)              |

---

## Data attributes

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

`data-fs-price`

`data-fs-price-variant="selling| 'listing' | 'spot' | 'savings'| 'installment"`

---

## Props

| Name          | Type                   | Description                                                                            | Default          |               |                                          |         |        |           |        |           |         |         |     |        |       |       |       |              |        |      |          |          |           |        |        |       |            |        |            |      |       |           |       |          |       |      |      |      |         |            |              |          |          |        |      |      |      |      |      |      |        |          |          |      |        |     |          |       |         |       |       |          |         |          |      |        |        |       |        |        |            |        |         |       |           |            |      |            |          |          |     |         |           |       |            |     |      |      |        |     |        |          |           |          |         |          |        |          |       |           |       |         |            |         |      |            |         |      |         |        |      |         |     |      |       |         |       |           |       |                 |                    |          |            |        |        |           |           |                 |                       |               |                    |                     |                     |                  |                |           |           |           |           |           |                  |           |           |               |                |            |                |                      |               |          |                |          |                 |     |         |        |                  |          |        |            |         |        |           |           |            |                  |        |        |          |        |            |         |       |        |                          |                        |                                             |
| ------------- | ---------------------- | -------------------------------------------------------------------------------------- | ---------------- | ------------- | ---------------------------------------- | ------- | ------ | --------- | ------ | --------- | ------- | ------- | --- | ------ | ----- | ----- | ----- | ------------ | ------ | ---- | -------- | -------- | --------- | ------ | ------ | ----- | ---------- | ------ | ---------- | ---- | ----- | --------- | ----- | -------- | ----- | ---- | ---- | ---- | ------- | ---------- | ------------ | -------- | -------- | ------ | ---- | ---- | ---- | ---- | ---- | ---- | ------ | -------- | -------- | ---- | ------ | --- | -------- | ----- | ------- | ----- | ----- | -------- | ------- | -------- | ---- | ------ | ------ | ----- | ------ | ------ | ---------- | ------ | ------- | ----- | --------- | ---------- | ---- | ---------- | -------- | -------- | --- | ------- | --------- | ----- | ---------- | --- | ---- | ---- | ------ | --- | ------ | -------- | --------- | -------- | ------- | -------- | ------ | -------- | ----- | --------- | ----- | ------- | ---------- | ------- | ---- | ---------- | ------- | ---- | ------- | ------ | ---- | ------- | --- | ---- | ----- | ------- | ----- | --------- | ----- | --------------- | ------------------ | -------- | ---------- | ------ | ------ | --------- | --------- | --------------- | --------------------- | ------------- | ------------------ | ------------------- | ------------------- | ---------------- | -------------- | --------- | --------- | --------- | --------- | --------- | ---------------- | --------- | --------- | ------------- | -------------- | ---------- | -------------- | -------------------- | ------------- | -------- | -------------- | -------- | --------------- | --- | ------- | ------ | ---------------- | -------- | ------ | ---------- | ------- | ------ | --------- | --------- | ---------- | ---------------- | ------ | ------ | -------- | ------ | ---------- | ------- | ----- | ------ | ------------------------ | ---------------------- | ------------------------------------------- |
| **testId**    | string                 | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-price         |               |                                          |         |        |           |        |           |         |         |     |        |       |       |       |              |        |      |          |          |           |        |        |       |            |        |            |      |       |           |       |          |       |      |      |      |         |            |              |          |          |        |      |      |      |      |      |      |        |          |          |      |        |     |          |       |         |       |       |          |         |          |      |        |        |       |        |        |            |        |         |       |           |            |      |            |          |          |     |         |           |       |            |     |      |      |        |     |        |          |           |          |         |          |        |          |       |           |       |         |            |         |      |            |         |      |         |        |      |         |     |      |       |         |       |           |       |                 |                    |          |            |        |        |           |           |                 |                       |               |                    |                     |                     |                  |                |           |           |           |           |           |                  |           |           |               |                |            |                |                      |               |          |                |          |                 |     |         |        |                  |          |        |            |         |        |           |           |            |                  |        |        |          |        |            |         |       |        |                          |                        |                                             |
| **as**        | "symbol" \| "object"   | "title"                                                                                | "slot"           | "animate"     | "style"                                  | "a"     | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | ComponentClass<any, any> | FunctionComponent<any> | Set the HTML element tag of this component. |
| **value\***   | number                 | The raw price value.                                                                   |                  |               |                                          |         |        |           |        |           |         |         |     |        |       |       |       |              |        |      |          |          |           |        |        |       |            |        |            |      |       |           |       |          |       |      |      |      |         |            |              |          |          |        |      |      |      |      |      |      |        |          |          |      |        |     |          |       |         |       |       |          |         |          |      |        |        |       |        |        |            |        |         |       |           |            |      |            |          |          |     |         |           |       |            |     |      |      |        |     |        |          |           |          |         |          |        |          |       |           |       |         |            |         |      |            |         |      |         |        |      |         |     |      |       |         |       |           |       |                 |                    |          |            |        |        |           |           |                 |                       |               |                    |                     |                     |                  |                |           |           |           |           |           |                  |           |           |               |                |            |                |                      |               |          |                |          |                 |     |         |        |                  |          |        |            |         |        |           |           |            |                  |        |        |          |        |            |         |       |        |                          |                        |                                             |
| **formatter** | PriceFormatter         | Formatter function that transforms the raw price value and render the result.          | (price) => price |               |                                          |         |        |           |        |           |         |         |     |        |       |       |       |              |        |      |          |          |           |        |        |       |            |        |            |      |       |           |       |          |       |      |      |      |         |            |              |          |          |        |      |      |      |      |      |      |        |          |          |      |        |     |          |       |         |       |       |          |         |          |      |        |        |       |        |        |            |        |         |       |           |            |      |            |          |          |     |         |           |       |            |     |      |      |        |     |        |          |           |          |         |          |        |          |       |           |       |         |            |         |      |            |         |      |         |        |      |         |     |      |       |         |       |           |       |                 |                    |          |            |        |        |           |           |                 |                       |               |                    |                     |                     |                  |                |           |           |           |           |           |                  |           |           |               |                |            |                |                      |               |          |                |          |                 |     |         |        |                  |          |        |            |         |        |           |           |            |                  |        |        |          |        |            |         |       |        |                          |                        |                                             |
| **variant**   | "selling" \| "listing" | "spot"                                                                                | "savings"        | "installment" | The current use case variant for prices. | selling |        |           |        |           |         |         |     |        |       |       |       |              |        |      |          |          |           |        |        |       |            |        |            |      |       |           |       |          |       |      |      |      |         |            |              |          |          |        |      |      |      |      |      |      |        |          |          |      |        |     |          |       |         |       |       |          |         |          |      |        |        |       |        |        |            |        |         |       |           |            |      |            |          |          |     |         |           |       |            |     |      |      |        |     |        |          |           |          |         |          |        |          |       |           |       |         |            |         |      |            |         |      |         |        |      |         |     |      |       |         |       |           |       |                 |                    |          |            |        |        |           |           |                 |                       |               |                    |                     |                     |                  |                |           |           |           |           |           |                  |           |           |               |                |            |                |                      |               |          |                |          |                 |     |         |        |                  |          |        |            |         |        |           |           |            |                  |        |        |          |        |            |         |       |        |                          |                        |                                             |
| **SRText**    | string                 | Text for the screen readers only                                                       |                  |               |                                          |         |        |           |        |           |         |         |     |        |       |       |       |              |        |      |          |          |           |        |        |       |            |        |            |      |       |           |       |          |       |      |      |      |         |            |              |          |          |        |      |      |      |      |      |      |        |          |          |      |        |     |          |       |         |       |       |          |         |          |      |        |        |       |        |        |            |        |         |       |           |            |      |            |          |          |     |         |           |       |            |     |      |      |        |     |        |          |           |          |         |          |        |          |       |           |       |         |            |         |      |            |         |      |         |        |      |         |     |      |       |         |       |           |       |                 |                    |          |            |        |        |           |           |                 |                       |               |                    |                     |                     |                  |                |           |           |           |           |           |                  |           |           |               |                |            |                |                      |               |          |                |          |                 |     |         |        |                  |          |        |            |         |        |           |           |            |                  |        |        |          |        |            |         |       |        |                          |                        |                                             |

Contributors

3

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

[Overlay« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-overlay)[RadioNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-radio)

Contributors

3

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

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

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

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23variants)[INTL Formatted to parts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23intl-formatted-to-parts)[INTL Formatted](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23intl-formatted)[Custom price formatter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23custom-price-formatter)

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

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%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/atoms/price.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23variants)[INTL Formatted to parts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23intl-formatted-to-parts)[INTL Formatted](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23intl-formatted)[Custom price formatter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%23custom-price-formatter)

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

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-price/docs/guides/faststore/atoms-price%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=)


[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 google search console 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-google-search-console/docs/guides)

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

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

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

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-search-console/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-search-console/docs/troubleshooting)

---

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

Search Console

VTEX Search Console first-party app

## How to install

Open the VTEX App Store and install this app on your store.

Now, open the app settings on your admin and fill in your Search Console's Content.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-search-console/_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/Store-Framework-Apps/pixel-apps/vtex-google-search-console.md)

Contributors

1

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

ON THIS PAGE

[How to install](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-search-console/docs/guides/vtex-google-search-console%23how-to-install)

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/Store-Framework-Apps/pixel-apps/vtex-google-search-console.md)

Copy page

On this page

ON THIS PAGE

[How to install](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-search-console/docs/guides/vtex-google-search-console%23how-to-install)

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 storefront accessibility 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/storefront-accessibility/docs/guides)

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

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

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

Storefront Development

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

---

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

---

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

---

(Legacy) CMS Portal

---

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

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-analytics)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-performance)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-seo)

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

---

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

---

(Legacy) CMS Portal

---

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

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-analytics)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-performance)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-seo)

---

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

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

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility)

Accessibility

Make sure your store is accessible to all by following these best practices for ecommerce accessibility.

This guide presents accessibility best practices for building the storefront of your VTEX store based on the [Lighthouse accessibility score](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/accessibility/scoring).

Accessibility ensures that websites, tools, and technologies are usable by as many people as possible, including those with disabilities. It focuses on designing and developing content that anyone can perceive, understand, navigate, and interact with it.

This includes providing text alternatives for images, enabling keyboard navigation, and ensuring compatibility with assistive technologies. The aim is to create a digital environment where all users can equally access information and functionality.

Learn more about strategies, standards, and resources to make your ecommerce website accessible in [W3C Web Accessibility Initiative (WAI)](https://read.calvincode.net/reader?url=https://www.w3.org/WAI/).

## Building your storefront

To guarantee accessibility in your storefront, implement Accessible Rich Internet Applications (ARIA) attributes correctly, along with other best practices, so all users can navigate and interact with your site.

> Learn more in [Lighthouse accessibility score](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/accessibility/scoring).

See below key strategies for ensuring accessibility when developing your storefront.

### Use Semantic HTML tags

Always use semantic HTML tags when possible, as they help screen readers better interpret content.

* Use `<header>`, `<nav>`, `<main>`, `<footer>`, and other semantic elements to enhance accessibility with minimal effort.
* Use appropriate form elements, such as `<button>` for clickable items, `<input>` for input fields, and `<label>` for form labels.

### Add ARIA attributes

ARIA attributes improve accessibility by providing assistive technologies with additional information about the page structure, roles, states, and element properties. Below are the ARIA attributes that have the greatest impact on the Lighthouse accessibility audit.

* `aria-label`: Provides a label for an element, typically when a visible label is absent or insufficient. It's especially useful for non-text elements like icon buttons, form fields without labels, or complex controls. This attribute helps screen readers understand the purpose of an element.

`1

<button aria-label="Close modal">X</button>

`

* `aria-labelledby`: Associates an element with another element that serves as its label. This is particularly useful for linking descriptions or titles with non-text elements, such as in headings.

`1

2

Special Offers

3

Exclusive discounts available!

4

`

* `aria-hidden`: Indicates that an element and its children aren't visible or perceivable to assistive technologies. It's often used for purely decorative elements that don't provide any meaningful information.

```` 1

<div aria-hidden="true">

2

 <img src="decorative-image.jpg" alt="" />

3

</div>

4

```html

5

6

- `aria-live`: Announces dynamic content changes, particularly in live regions, such as notifications, error messages, or shopping cart updates. The value can be `polite` (announces after the current task) or `assertive` (announces immediately).

7

8

```html

9

<div aria-live="polite">

10

 Your cart has been updated.

11

</div>

 ````

* `role`: Defines the role of an element, helping screen readers understand its intended behavior. Common roles include `button`, `link`, `alert`, `dialog`, `navigation`, and more. Incorrect or missing roles can make it difficult for users to interact with dynamic content or custom UI elements, such as dropdowns and modals.

`1

2

Confirm Action

3

 <button>Close</button>

4

`

* `aria-expanded`: Indicates the expanded or collapsed state of elements like dropdowns, menus, or accordions.

`1

<button aria-expanded="false" aria-controls="menu">

2

 Toggle Menu

3

</button>

`

* `aria-describedby`: Provides additional descriptive text to an element, often used for form fields or controls that need extra context. The value of this attribute should reference the `id` of a related descriptive element.

`1

Email Address

2

<input type="email" id="email" aria-describedby="emailHelp" />

3

We'll never share your email.

`

* `aria-required`: Indicates that an input field is required before submitting a form. It's particularly useful for form fields.

`1

<input type="text" id="name" aria-required="true" />

`

* `aria-invalid`: Indicates that the value entered in a form field is invalid. For example, it can be used to display form validation errors.

`1

<input type="email" id="email" aria-invalid="true" />

`

* `aria-controls`: Identifies the elements that are controlled by the current element, like a button controlling a dropdown menu. It's especially useful in dynamic interfaces, as it helps to clarify relationships between elements such as modals, menus, or carousels.

`1

<button aria-controls="dropdownMenu" aria-expanded="false">Open Menu</button>

`

* `area-checked`: Indicates the current state of a checkbox or toggle. For checkboxes, it can have values of `true`, `false`, or `mixed`.

`1

<input type="checkbox" aria-checked="false" />

`

#### Best practices for ARIA

* **Correct usage:** Make sure ARIA attributes are used where appropriate, but avoid overusing them. Native HTML elements, such as `<button>`, `<form>`, and `<input>`, are already accessible and don't require ARIA roles or attributes.
* **ARIA IDs must be unique:** Ensure all ARIA IDs used are unique.
* **ARIA attributes must be valid and error-free:** Verify that ARIA attributes (`aria-*`) have valid values and are free of spelling errors.
* **ARIA attributes must match their functions:** Ensure that `aria-*` attributes are being used for the correct purpose and correspond to their intended function.
* **ARIA roles and children must meet requirements:** Ensure that elements with specific ARIA roles (for example, `role="treeitem"`) contain the appropriate child roles as required.

### Multimedia

* **Images include `alt` text:** All images must have descriptive `alt` attributes that provide meaningful content for screen reader users.
* **`<input type="image">` elements include `alt` text:** Images used within form buttons, such as `<input type="image">`, should also have descriptive `alt` text.
* **Videos include a track element with captions:** All `<video>` elements must contain a `<track>` element with `kind="captions"` to provide captions for users with hearing impairments.

### Page structure

#### Buttons

* **Buttons must have accessible names:** Buttons must have a clear, accessible name through the `aria-label`, text content, or associated `<label>` tags.
* **Button text must be understandable:** Button text should clearly communicate the action it will perform.

#### Tables

* **Tables must have headers:** Ensure that `<td>` elements in large tables are associated with one or more table headers (`<th>`).

#### Responsive viewport and scaling

**Don't use `[user-scalable="no"]` in `viewport` meta tag:** The `viewport` meta tag should not prevent users from zooming by setting `user-scalable="no"`. The maximum zoom level (`maximum-scale`) should be at least 5.

#### Performance

**Don't use `<meta http-equiv="refresh">`:** The `<meta http-equiv="refresh">` tag is used to automatically refresh or redirect a web page after a specified amount of time, and it's typically placed within the `<head>` section. Using this meta tag may cause **disruption for screen readers users**, **loss of user context**, and **impact negatively the website SEO**.

## Accessibility in VTEX storefront technologies

To start building your storefront with VTEX, you can choose between [FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore) or [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework).

> [Legacy CMS Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/pt/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/1oN446gRGcR2s70RvBCAmj) is no longer available to new VTEX stores.

See below the accessibility features available for each technology.

### FastStore

* **Lighthouse Metrics:** The accessibility score is monitored using Lighthouse metrics for key pages, such as the homepage, Product Detail Pages (PDP), and Product List Pages (PLP). While the dashboard provides a basic accessibility score, more detailed insights are available in the pull request (PR) analysis.

![{"base64":"  ","img":{"width":1218,"height":463,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":122466,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Storefront-Guides/images/lighthouse-faststore.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Storefront-Guides/images/lighthouse-faststore.png)

* **FastStore UI Component Library:** The components have been developed with accessibility in mind. Each component is designed to enhance accessibility, with sections highlighting best practices. Notable components include Dropdowns, Heros, Buttons, and Checkboxes, which include specific accessibility considerations.

### Store Framework

When developing your [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme), follow the best practices in the [Building your storefront](#building-your-storefront) section. Learn how to start developing yours in the [Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) tutorial.

When creating a [Storefront app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io) to your store developed with Store Framework, prioritize accessibility within the creation process to improve the shopping experience for all users. To promote inclusion, key practices are:

* Ensuring keyboard interactivity for all user actions.
* Applying good color contrast in component styles.
* Avoiding the use of HTML `<div>` elements where possible to enhance accessibility for screen readers and improve SEO.

Contributors

1

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

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/Storefront-Guides/storefront-best-practices/storefront-accessibility.md)

[Storefront best practices« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility//docs/guides/storefront-best-practices)[AnalyticsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility//docs/guides/storefront-analytics)

Contributors

1

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

ON THIS PAGE

[Building your storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23building-your-storefront)

[Use Semantic HTML tags](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23use-semantic-html-tags)[Add ARIA attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23add-aria-attributes)[Multimedia](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23multimedia)[Page structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23page-structure)

[Accessibility in VTEX storefront technologies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23accessibility-in-vtex-storefront-technologies)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23faststore)[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23store-framework)

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/Storefront-Guides/storefront-best-practices/storefront-accessibility.md)

Copy page

On this page

ON THIS PAGE

[Building your storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23building-your-storefront)

[Use Semantic HTML tags](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23use-semantic-html-tags)[Add ARIA attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23add-aria-attributes)[Multimedia](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23multimedia)[Page structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23page-structure)

[Accessibility in VTEX storefront technologies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23accessibility-in-vtex-storefront-technologies)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23faststore)[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility/docs/guides/storefront-accessibility%23store-framework)

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 seller opt in promotions 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/seller-opt-in-promotions/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

[Creating and managing coupons with Promotions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/creating-and-managing-coupons-with-promotions-api)

[Using Policy Engine API on Promotion Alerts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/using-policy-engine-api-on-promotion-alerts)

[Seller Opt-in Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions)

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

[Creating and managing coupons with Promotions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/creating-and-managing-coupons-with-promotions-api)

[Using Policy Engine API on Promotion Alerts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/using-policy-engine-api-on-promotion-alerts)

[Seller Opt-in Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions)

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides)

Promotions

[Seller Opt-in Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions)

Seller Opt-in for Promotions

The Seller Opt-in Promotions feature allows sellers to choose whether they want to participate in promotions on the marketplace.

> Adding or removing sellers is not available through the Admin interface. These actions must be performed exclusively via the [Promotions and Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/promotions-and-taxes-api).

## Creating promotions

You can create promotions manually in the VTEX Admin or via the API.

### Via Admin

1. In the VTEX Admin, go to **Promotions**.
2. Click `Create Promotion` in the top right corner of the page.
3. Choose the desired type of promotion.
4. Complete the promotion details and, in the **Sellers** field, select the **Participating** option.
5. Click `Create`.

After creating the promotion, you must configure seller participation using the API.

### Via API

Use the [Create or Update Promotion or Tax](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/promotions-and-taxes-api%23post-/api/rnb/pvt/calculatorconfiguration) endpoint to configure promotions with opt-in.

> To avoid conflicts with the previous seller association model, make sure to set `idSeller` and `idSellerIsInclusive` to `null`.

Example request body with defined sellers:

`1

{

2

 "idSeller": null,

3

 "idSellerIsInclusive": null,

4

 "optIn": {

5

 "sellers": [

6

 "seller-id-1",

7

 "seller-id-2"

8

 ]

9

 },

10

11

 "name": "MY PROMOTION",

12

 "idCalculatorConfiguration": "",

13

 "type": "combo",

14

 "origin": "Marketplace",

15

 "isActive": true,

16

 "beginDateUtc": "2025-05-29T00:00:00.000Z",

17

 "endDateUtc": "2025-05-29T00:30:00.000Z",

18

 "newOffset": -3,

19

 "isFeatured": false,

20

 "listSku1BuyTogether": [ { "id": "1", "name": "t-shirt size P" } ],

21

 "listSku2BuyTogether": [ { "id": "8", "name": "t-shirt size M" } ],

22

 "percentualDiscountValueList1": 10,

23

 "percentualDiscountValueList2": 10,

24

 "minimumQuantityBuyTogether": 1,

25

 "maxUsage": 0,

26

 "maxUsagePerClient": 0,

27

 "cumulative": false,

28

 "accumulateWithManualPrice": false,

29

 "idSeller": null,

30

 "idSellerIsInclusive": null,

31

 "idsSalesChannel": [],

32

 "areSalesChannelIdsExclusive": true

33

}

`

Example request body without initially defined sellers:

`1

{

2

 "idSeller": null,

3

 "idSellerIsInclusive": null,

4

 "optIn": {

5

 "sellers": []

6

 },

7

8

 "name": "MY PROMOTION",

9

 "idCalculatorConfiguration": "",

10

 "type": "combo",

11

 "origin": "Marketplace",

12

 "isActive": true,

13

 "beginDateUtc": "2025-05-29T00:00:00.000Z",

14

 "endDateUtc": "2025-05-29T00:30:00.000Z",

15

 "newOffset": -3,

16

 "isFeatured": false,

17

 "listSku1BuyTogether": [ { "id": "1", "name": "t-shirt size P" } ],

18

 "listSku2BuyTogether": [ { "id": "8", "name": "t-shirt size M" } ],

19

 "percentualDiscountValueList1": 10,

20

 "percentualDiscountValueList2": 10,

21

 "minimumQuantityBuyTogether": 1,

22

 "maxUsage": 0,

23

 "maxUsagePerClient": 0,

24

 "cumulative": false,

25

 "accumulateWithManualPrice": false,

26

 "idSeller": null,

27

 "idSellerIsInclusive": null,

28

 "idsSalesChannel": [],

29

 "areSalesChannelIdsExclusive": true

30

}

`

> If you send invalid IDs, the promotion will still be created, but it won't take effect, as it will be associated with non-existent participating sellers.

## Querying participating sellers

You can query participating sellers manually in the VTEX Admin or via the API.

### Via Admin participating sellers

1. In the VTEX Admin, go to **Promotions**.
2. Click the name of the promotion you created.
3. In the **Sellers** field, view the list of participating sellers.

![{"base64":"  ","img":{"width":1191,"height":485,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":38442,"url":"https://images.ctfassets.net/alneenqid6w5/1YlZUUvrgcYERRM3IeJ8T2/2b2d3df08f40e071f57585c4e3af2e2b/sellers-participantes-en.png"}}](https://read.calvincode.net/reader?url=https://images.ctfassets.net/alneenqid6w5/1YlZUUvrgcYERRM3IeJ8T2/2b2d3df08f40e071f57585c4e3af2e2b/sellers-participantes-en.png)

### Via API participating sellers

Use the [Get promotion or tax by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/promotions-and-taxes-api%23get-/api/rnb/pvt/calculatorconfiguration/-idCalculatorConfiguration-) endpoint to query promotion details, including the opt-in configuration.

GET`https://{accountName}.{environment}.com/api/rnb/pvt/calculatorconfiguration/{idCalculatorConfiguration}`

Example response for a promotion without opt-in:

`1

{

2

 "optIn": null

3

}

`

Example response for a promotion with opt-in and defined sellers:

`1

{

2

 "optIn": {

3

 "sellers": ["seller-id-1", "seller-id-2"]

4

 }

5

}

`

Example response for a promotion with opt-in and no defined sellers:

`1

{

2

 "optIn": {

3

 "sellers": []

4

 }

5

}

`

## Adding or removing participating sellers via API

To add or remove sellers in an opt-in promotion, use the [Seller Opt-in or Opt-out](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/promotions-and-taxes-api%23post-/api/rnb/pvt/calculatorconfiguration/-promotionId-/seller-opt) endpoint.

POST

`1

'/api/rnb/pvt/calculatorConfiguration/{promotionId}/seller-opt?an={accountName}'

2

--header 'if-Match: {lastUpdate}'

3

--data '{

4

 "sellerIds": [{sellerIds}],

5

 "operation": "{operation}"

6

}'

`

| Field       | Required | Type                          | Description                                                                                |
| ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| promotionId | true     | string                        | ID of the promotion                                                                                |
| accountName | true     | string                        | Account that owns the promotion                                                                                |
| sellerIds   | true     | string\[\]                    | List of seller IDs                                                                                |
| lastUpdate  | true     | DateTime                      | Date and time of the promotion's last modification. Must match the current value, otherwise, the request will fail. |
| operation   | true     | OptOperation - OptIn - OptOut | Operation to be performed.                                                                                |

To add participating sellers, include their IDs in the request body.

Example request body:

`1

{

2

 "sellerIds": [

3

 "seller-id-1",

4

 "seller-id-2"

5

 ],

6

 "operation": "OptIn"

7

}

`

To remove a participating seller, send a new request with the ID of the seller you want to remove.

Example request body:

`1

{

2

 "sellerIds": [

3

 "seller-id-2"

4

 ],

5

 "operation": "OptOut"

6

}

`

Example response body:

`1

{

2

 "lastModified": "2025-01-28T17:50:13+00:00"

3

}

`

Response codes:

| Code | Description                                                                                |
| ---- | -------------------------------------------------------------------------------------------------------------------- |
| 200  | Opt-in executed successfully.                                                                                |
| 400  | Returned if the IdSellerIsInclusive field of the promotion is set to false.                                          |
| 401  | Returned if the user doesn’t have the "Manage External Seller Promotions" permission.                                |
| 412  | Returned if the if-Match header value doesn't match the promotion's lastModified field, causing the request to fail. |
| 404  | Returned if no non-archived promotion with the specified ID is found.                                                |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F136460310%3Fv%3D4%26w=64%26q=75)](https://github.com/geisecosta)

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/Promotions/seller-opt-in-promotions.md)

[Using Policy Engine API on Promotion Alerts« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions//docs/guides/using-policy-engine-api-on-promotion-alerts)[How to load test a storeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions//docs/guides/how-to-load-test-a-store)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F136460310%3Fv%3D4%26w=64%26q=75)](https://github.com/geisecosta)

ON THIS PAGE

[Creating promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23creating-promotions)

[Via Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-admin)[Via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-api)

[Querying participating sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23querying-participating-sellers)

[Via Admin participating sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-admin-participating-sellers)[Via API participating sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-api-participating-sellers)

[Adding or removing participating sellers via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23adding-or-removing-participating-sellers-via-api)

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/Promotions/seller-opt-in-promotions.md)

Copy page

On this page

ON THIS PAGE

[Creating promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23creating-promotions)

[Via Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-admin)[Via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-api)

[Querying participating sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23querying-participating-sellers)

[Via Admin participating sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-admin-participating-sellers)[Via API participating sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23via-api-participating-sellers)

[Adding or removing participating sellers via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-opt-in-promotions/docs/guides/seller-opt-in-promotions%23adding-or-removing-participating-sellers-via-api)

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