[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 improving filter navigator experience 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-improving-filter-navigator-experience/docs/guides)

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-dealing-with-events)

[Collecting user session data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-collecting-user-session-data)

[Cleaning cart data on log out](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out)

[Improving filter navigator experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-improving-filter-navigator-experience)

[Using events to trigger side effects on store components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-using-events-to-trigger-side-effects-on-store-components)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-dealing-with-events)

[Collecting user session data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-collecting-user-session-data)

[Cleaning cart data on log out](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out)

[Improving filter navigator experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-improving-filter-navigator-experience)

[Using events to trigger side effects on store components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-using-events-to-trigger-side-effects-on-store-components)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/store-framework-dealing-with-events)

[Improving filter navigator experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-improving-filter-navigator-experience)

Improving filter navigator experience

The filter navigator is one of the most important components on the search page. This recipe will show you how to set the filter navigator component in a way that has been proven to improve the conversion of your store.

Here is a quick summary of the changes that will be made:

* Add a search input to the filter options list
* Change the filter navigation to use `collapsible` filters
* Add more info about selected filters and product quantity
* Update the search result at the moment that the filter is selected
* Add a show more/less button to the filter options list
* Add a "clear all" button to each filter options list

All props mentioned here are documented on [documentation page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-search-result). You will be able to check both the description and the possible values of each prop.

## Instructions

1. Ensure that you have the `vtex.search-result@3.x` as a dependency of your `manifest.json`:

`1

{

2

 "dependencies": [

3

 // other dependencies

4

+ "vtex.search-result": "3.x"

5

 }

6

 ]

7

}

`

1. Add the following props to the `search-result-layout.desktop` and the `search-result-layout.mobile`:

`1

"search-result-layout.desktop": {

2

 "children": [

3

 // children

4

 ],

5

 "props": {

6

 // props

7

+ "preventRouteChange": true,

8

+ "thresholdForFacetSearch": 10,

9

+ "showProductsCount": true,

10

+ "showFacetQuantity": true

11

 }

12

}

`

`1

"search-result-layout.mobile": {

2

 "children": [

3

 // children

4

 ],

5

 "props": {

6

 // props

7

+ "preventRouteChange": true,

8

+ "thresholdForFacetSearch": 10,

9

+ "showProductsCount": true,

10

+ "showFacetQuantity": true

11

 }

12

}

`

1. Declare the `filter-navigator.v3` block with the following props:

`1

+ "filter-navigator.v3": {

2

+ "blocks": ["sidebar-close-button"],

3

+ "props": {

4

+ "truncateFilters": true,

5

+ "showClearByFilter": true,

6

+ "fullWidthOnMobile": true,

7

+ "navigationTypeOnMobile": "collapsible",

8

+ "appliedFiltersOverview": "show",

9

+ "totalProductsOnMobile": "show",

10

+ "updateOnFilterSelectionOnMobile": true,

11

+ "priceRangeLayout": "inputAndSlider"

12

+ }

13

+ },

`

1. Your filter-navigator should look like this:

![{"base64":"  ","img":{"width":562,"height":1000,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1103153,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-improving-filter-navigator-experience-0.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-improving-filter-navigator-experience-0.gif)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/_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/Storefront-Guides/concepts-1/vtex-io-documentation-improving-filter-navigator-experience.md)

[Cleaning cart data on log out« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience//docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out)[Using events to trigger side effects on store componentsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience//docs/guides/vtex-io-documentation-using-events-to-trigger-side-effects-on-store-components)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-improving-filter-navigator-experience/_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-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-improving-filter-navigator-experience%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/Storefront-Guides/concepts-1/vtex-io-documentation-improving-filter-navigator-experience.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-improving-filter-navigator-experience/docs/guides/vtex-io-documentation-improving-filter-navigator-experience%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=)


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

[User] How do I use the VTEX store components 3.178.5 AvailabilitySubscriber app? Provide documentation and configuration details.

[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/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/vtex-io-apps)

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/vtex-io-apps)

Availability Subscriber

[vtex.store-components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components)

Version: 3.178.5

Latest version: 3.178.5

The `availability-subscriber` component shows the availability subscriber form displayed when a product isn't available. This component can be imported and used by any VTEX App.

![{"base64":"  ","img":{"width":1650,"height":612,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":220954,"url":"https://user-images.githubusercontent.com/67270558/147770983-16f37aea-ea98-476c-a9aa-a01e1fca24f8.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/67270558/147770983-16f37aea-ea98-476c-a9aa-a01e1fca24f8.png)

This component only collects the emails of the customers that subscribed to receive updates about a specific out-of-stock product. It does not email shoppers automatically when the product gets back in stock.

> Info
>
> Alternatively, check the [Availability Notify component](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-availability-notify), which renders a subscription form when a product is unavailable and also emails the shopper when the requested product is back in stock.

## Before you start

Before configuring the Availability Subscriber component in your theme, make sure you've already configured a **JSON schema in Master Data** to collect the emails correctly. Otherwise, the subscriber form won't be properly saved with the shoppers' emails. Please refer to the [Creating a product availability form](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-creating-a-product-availability-form) guide for more information.

## Configuration

1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `availability-subscriber` block as a child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

+ "availability-subscriber”

4

 ]

5

 }

`

The Availability Subscriber component does not have any props. Hence, once added to your Product Details Page template, the Availability Subscriber component is ready for use.

### Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the blocks available within `AvailabilitySubscriber` and describes if they are mandatory or optional.

`1

 "availability-subscriber": {

2

 "component": "AvailabilitySubscriber"

3

 }

`

For now this block does not have any mandatory or optional blocks.

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles         |
| ------------------- |
| content             |
| error               |
| form                |
| input               |
| inputEmail          |
| inputName           |
| submit              |
| subscriberContainer |
| subscribeLabel      |
| success             |
| title               |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.store-components)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Before you start](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber%23before-you-start)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber%23configuration)

[Blocks API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber%23blocks-api)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber/docs/apps/vtex.store-components@3.178.5/AvailabilitySubscriber%23customization)

Was this helpful?

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


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

[User] Provide a guide on guides faststore storefront features overview 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/storefront-features-overview/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

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

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

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

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

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

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

Implementing storefront features

Explore prebuilt FastStore storefront features that combine UI components and best practices to implement navigation, search, regionalization, and more.

Storefront features are solutions that help you implement ecommerce functionality in your FastStore project. These features combine multiple [UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index) and best practices to enhance the shopping experience for shoppers.

---

[Adding third-party scriptsLearn how to safely add and manage third-party scripts, such as analytics, ads, or widgets, in your FastStore project.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-handling-third-party-scripts)[Building navigation menusOrganizes page header navigation to guide shoppers across the store and to log in.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-building-navigation-menus)[Displaying content for authenticated usersDisplays exclusive content to logged-in users, such as special offers, prices, or product details, to create a personalized shopping experience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)[Implementing regionalization featuresEnables shoppers to set a location using a valid postal code.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-regionalization-features)[Implementing search featuresEnables shoppers to navigate search results and enhances search functionality.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features)[Managing product images in specific contextsControls which product images appear in different store sections by labeling them with specific contexts in VTEX Catalog.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)[Delivery Promise (Beta)Provides accurate delivery estimates and shows only products that can be delivered or picked up based on shopper location.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation)

Contributors

1

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

Was this helpful?

Yes

No

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

[SlideOver« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/organisms-slide-over)[Adding third-party scriptsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-overview/docs/guides/faststore/storefront-features-handling-third-party-scripts)

Contributors

1

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

Was this helpful?

 Send feedback

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

Copy page

On this page

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] Explain troubleshooting utms are not being applied to the cart at checkout 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/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/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/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/updates/release-notes)

Troubleshooting

API

---

Development

---

Store performance

[I can't complete a purchase on a FastStore website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/i-cant-complete-a-purchase-on-a-faststore-website)

[My store is slow or unavailable](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-store-is-slow-or-unavailable)

[Google Analytics 4 is tracking inconsistent data from my store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store)

[UTMs are not being applied to the cart at Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout)

[My routes are not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-routes-are-not-behaving-as-expected)

[My store is presenting price inconsistencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-store-is-presenting-price-inconsistencies)

[My store translation is not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-store-translation-is-not-behaving-as-expected)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/updates/release-notes)

Troubleshooting

API

---

Development

---

Store performance

[I can't complete a purchase on a FastStore website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/i-cant-complete-a-purchase-on-a-faststore-website)

[My store is slow or unavailable](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-store-is-slow-or-unavailable)

[Google Analytics 4 is tracking inconsistent data from my store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store)

[UTMs are not being applied to the cart at Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout)

[My routes are not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-routes-are-not-behaving-as-expected)

[My store is presenting price inconsistencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-store-is-presenting-price-inconsistencies)

[My store translation is not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-store-translation-is-not-behaving-as-expected)

---

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting)

Store performance

UTMs are not being applied to the cart at Checkout

Verify that traffic and marketing source information is being attributed to your store's carts.

Keywords: utm source | utm campaign | utm medium | checkout | cart

When an [UTM parameter](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-are-utm-source-utm-campaign-and-utm-medium--2wTz7QJ8KUG6skGAoAQuii) (`utm_source`, `utm_campaign` or `utm_medium`) is used to load a store page, the system creates a cookie named **IPS** whose value is equal to the value of the parameter.

The [orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields) structure of orders closed by the user will receive this cookie in the header of the request sent to Checkout (until this cookie expires). In other words, the moment the customer clicks the `Buy` button native control (`<vtex.cmc:BuyButton/>`), it will trigger a `POST` request to send the value of the `utm_source` parameter to the Checkout.

In this way, the Checkout will be able to assemble the orderForm considering the `marketingData` used in the purchase.

> The IPS cookie is created for Legacy CMS Portal accounts only. For stores using the [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework), information from marketing UTMs is sent to Checkout through the Sessions system.

However, there are some situations in which the UTM parameters are not being loaded into the cart, preventing the identification of the origin of the traffic or the application of a specific promotion assigned to an UTM.

## Solutions

To check whether the UTM parameters are being correctly applied to the cart and possible actions to correct if there is an error, see the following actions below:

### Confirming the presence of an UTM in the cart

Carry out procedures to check the existence of UTMs in the cart according to your type of store:

* **Legacy CMS Portal**
   1. Access any page of the store with the UTM in the querystring (e.g. `{accountName}.{environment}.com.br/?utm_source=facebook`).
   2. Go to the **Developer tools** screen (**F12** in Chrome, if you are in Windows, or **Cmd+Opt+I** on a Mac).
   3. Click the **Application** tab, and under **Cookies**, click the name **IPS**.

![{"base64":"  ","img":{"width":1741,"height":834,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":662304,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/check-marketing-utms-used-at-checkout-0.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/check-marketing-utms-used-at-checkout-0.PNG)

* **Store Framework**
   1. Access any page of the store with the UTM in the querystring (e.g. `{accountName}.{environment}.com.br/?utm_source=facebook`).
   2. Go to a product page and add it to the cart.
   3. Access the cart.
   4. Refresh the page (**F5** in Chrome, if you are in Windows, or **Cmd+R** on a Mac) and monitor the requests on the **Network** tab (also located on the **Developer tools** screen).
   5. In the **Preview** tab, open the `marketingData` node.
   6. Check the value of the `utmSource` field.

![{"base64":"  ","img":{"width":1038,"height":771,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":172095,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/check-marketing-utms-used-at-checkout-1.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/check-marketing-utms-used-at-checkout-1.PNG)

> If the value found in the `utmSource` field is the same as the UTM previously entered in the page address querystring, it means that Checkout is correctly receiving the information in the cart. If the `utmSource` field is blank, it indicates that the information was not assigned to the cart, preventing the tracking of the origin of the traffic, the application of promotions related to UTM and the registration of the parameter in the orders carried out by the OMS.

## Adding UTM parameters to the cart

As previously stated, the native buy button control (`<vtex.cmc:BuyButton/>`) triggers a POST request sending all the data needed to the Checkout, including the value of the `utm_source`, `utm_campaign` and `utm_medium`.

If the UTM parameters are not being sent to the cart, you should check if your store is using a **custom purchase POST call** instead of the native control. After confirming the existence of a custom purchase POST call, you can update its settings to ensure that contains all the data needed to assemble the orderForm, including the marketing context, or perform one of the actions below:

* Send UTM parameters for a specific cart by accessing the [Add marketing data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/attachments/marketingData) endpoint or by entering the `marketingData` information via the [sendAttachment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs-for-checkout%23sendattachmentattachmentid-attachment-expectedorderformsections).
* Use the [Cartman](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/configure-cartman--1ACMTStZYkMqB0lTgwg451%23define-marketing-data) tool on the checkout screen to add UTM parameters directly to the cart.

For more information about error scenarios when applying UTM to cart, visit Known Issues articles [Price by UTM doesn't work when using special characters](https://read.calvincode.net/reader?url=https://help.vtex.com/en/known-issues/price-by-utm-doesnt-work-when-using-special-characters--5vQnjYgbE48426q2e6GMUY) and [Applying a Coupon Removes Initial UTM Campaign Promotion from Cart](https://read.calvincode.net/reader?url=https://help.vtex.com/en/known-issues/applying-a-coupon-removes-initial-utm-campaign-promotion-from-cart--2A1S6PgEwD9SgQo1UHrFFS).

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/_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/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/store-performance/utms-are-not-being-applied-to-the-cart-at-checkout.md)

[Google Analytics 4 is tracking inconsistent data from my store« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store)[My routes are not behaving as expectedNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/my-routes-are-not-behaving-as-expected)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/_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/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

ON THIS PAGE

[Solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout%23solutions)

[Confirming the presence of an UTM in the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout%23confirming-the-presence-of-an-utm-in-the-cart)

[Adding UTM parameters to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout%23adding-utm-parameters-to-the-cart)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/store-performance/utms-are-not-being-applied-to-the-cart-at-checkout.md)

Copy page

On this page

ON THIS PAGE

[Solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout%23solutions)

[Confirming the presence of an UTM in the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout%23confirming-the-presence-of-an-utm-in-the-cart)

[Adding UTM parameters to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout%23adding-utm-parameters-to-the-cart)

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 making your first request 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/making-your-first-request/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/api-usage)

[List of REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/getting-started-list-of-rest-apis)

[Making your first request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request)

[Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/authentication)

[Response status codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/api-response-codes)

Error handling and best practices

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/troubleshooting)

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/api-usage)

[List of REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/getting-started-list-of-rest-apis)

[Making your first request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request)

[Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/authentication)

[Response status codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/api-response-codes)

Error handling and best practices

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides)

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/api-usage)

[Making your first request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request)

Making your first request

Learn how to make your first API request using the VTEX API Reference and popular API testing tools like Postman.

In this guide, you'll learn how to make your first API request using the [VTEX API reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference) and the built-in `TEST METHOD` feature.

You'll also discover how to import API specifications into popular API testing platforms such as Postman for easier testing and integration.

## Before you begin

To interact with VTEX APIs, you need to authenticate your requests. [Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication) can be done via either [application keys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23api-keys) or [user tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23user-token).

For testing using the Developer Portal `TEST METHOD` feature, you will need a valid [API key](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23api-keys), which consists of a pair of an `appKey` and `appToken`. These credentials should be associated with [roles](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc) that grant you the necessary [permissions](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/license-manager-resources--3q6ztrC8YynQf6rdc6euk3) to run the desired requests. If you don't have this credential yet, refer to the [Application keys](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/api-keys--4bFEmcHXgpNksoePchZyy6) guide to learn how to create them.

## Testing a request in the Developer Portal

To test an API request directly in the Developer Portal, follow these steps:

1. Go to the API reference page of the endpoint you wish to test, such as the [List orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23get-/api/oms/pvt/orders) endpoint.
2. Read the documentation and fill in the required parameters, such as headers, query parameters, and request body fields.
3. In the **Authentication** section, enter your `appKey` and `appToken` in the respective fields: `X-VTEX-API-AppKey` and `X-VTEX-API-AppToken`.
4. Hover over the `Base URL` field to see the `accountName` and `environment` fields.
5. Enter your [VTEX account name](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-an-account-name--i0mIGLcg3QyEy8OCicEoC) in the `accountName` field.
6. Fill in the `environment` field. If you're unsure which environment to use, try `vtexcommercestable`.
7. Click the `TEST METHOD` button to send your request to the desired API endpoint.
8. Check the API response below the request. A successful request will return a `200 OK`, `201 Created`, or `204 No Content status`. For more information on status codes, refer to [Response status codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes).

![{"base64":"  ","img":{"width":2594,"height":1574,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":385893,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Getting-Started/getting-started/making-your-first-request-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Getting-Started/getting-started/making-your-first-request-3.png)

> If you get a `401 - Unauthorized` response, double-check your [API key and token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23api-keys). Ensure the values are correctly entered in the request headers, and verify that they are associated with the appropriate [roles](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc) and [permissions](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/license-manager-resources--3q6ztrC8YynQf6rdc6euk3).

## Using an API testing platform

For more advanced testing, you can export the API specifications or copy example requests to integrate with tools like [Postman](https://read.calvincode.net/reader?url=https://www.postman.com/) and other API testing platforms.

### Using request examples

You can copy the generated request from the VTEX API reference and use it in Postman, or export it to other tools for further testing. For example, to import the request into Postman, copy the `cURL` request from the desired API Reference and follow the [Postman Import cURL commands](https://read.calvincode.net/reader?url=https://learning.postman.com/docs/getting-started/importing-and-exporting/importing-curl-commands/%23import-a-curl-command-into-postman) guide.

1. Open the desired API Reference in the VTEX Developer Portal.
2. Fill in the request parameters as needed. The request box will automatically update with the full request.
3. In the **Language** section, select the programming language you'd like to use (Node.js, Python, or Shell).
4. Copy the example request displayed below the **Base URL** field.

![{"base64":"  ","img":{"width":1160,"height":1168,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":145282,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Getting-Started/getting-started/making-your-first-request-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Getting-Started/getting-started/making-your-first-request-4.png)

### Downloading API specifications

The VTEX API documentation follows the [OpenAPI 3.0 (OAS 3.0)](https://read.calvincode.net/reader?url=https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md) standard, which provides a detailed description of the API's structure and behavior. You can download the API specifications as follows:

* **GitHub:** Access the [OpenAPI Schemas](https://read.calvincode.net/reader?url=https://github.com/vtex/openapi-schemas) repository, click the `\<\>Code` button, and click `Download ZIP` to download the schema files.
* **API SPEC:** On the Developer Portal API Reference page, click `DOWNLOAD OPENAPI SPEC` to download the schema in JSON format. Alternatively, click `VIEW OPENAPI SPEC` to view it in your browser.
* **Postman:** On the Developer Portal API Reference page, click `DOWNLOAD POSTMAN COLLECTION` to download the collection schema in JSON format. Alternatively, click `VIEW POSTMAN COLLECTION` to view it in your browser.

Once you've downloaded the OpenAPI spec or Postman collection, you can import them into your preferred API testing tool for easy integration and testing.

Contributors

4

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/_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/making-your-first-request/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F91396357%3Fv%3D4%26w=64%26q=75)](https://github.com/anabaarbosa)

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

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/Getting-Started/getting-started/making-your-first-request.md)

[List of REST APIs« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request//docs/guides/getting-started-list-of-rest-apis)[AuthenticationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request//docs/guides/authentication)

Contributors

4

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/_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/making-your-first-request/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F91396357%3Fv%3D4%26w=64%26q=75)](https://github.com/anabaarbosa)

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23before-you-begin)

[Testing a request in the Developer Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23testing-a-request-in-the-developer-portal)

[Using an API testing platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23using-an-api-testing-platform)

[Using request examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23using-request-examples)[Downloading API specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23downloading-api-specifications)

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/Getting-Started/getting-started/making-your-first-request.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23before-you-begin)

[Testing a request in the Developer Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23testing-a-request-in-the-developer-portal)

[Using an API testing platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23using-an-api-testing-platform)

[Using request examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23using-request-examples)[Downloading API specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/making-your-first-request/docs/guides/making-your-first-request%23downloading-api-specifications)

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