[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 search Autocomplete 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.search/Autocomplete/docs/guides)

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

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

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.add-to-cart-button)

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

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.breadcrumb)

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

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/google-one-tap-login)

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

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.my-account)

---

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

---

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

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/troubleshooting)

---

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.add-to-cart-button)

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

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.breadcrumb)

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

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/google-one-tap-login)

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

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.my-account)

---

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

---

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

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

Autocomplete

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

Version: 2.18.7

Latest version: 2.18.7

Autocomplete is the [Intelligent Search](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb) feature that displays previous search results based on current and previous searches. These results are presented in four different lists, which can be together or separated, depending on the customer's interaction. It includes:

* Top Searches.
* Search History.
* Search Suggestions.
* Product Suggestions.

During the interaction with the search bar, Intelligent Search immediately displays the set of Top Searches and Search History (if the customer has done searches before).

When the user starts typing, the system displays the Search suggestions and the Product suggestions and removes the previous lists.

You can read a detailed explanation of Autocomplete and its features in the [Autocomplete](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/4gXFsEWjF7QF7UtI2GAvhL) user guide.

## Before you begin

Make sure you have added the `search` app to your theme dependencies in the `manifest.json` as shown below:

`1

 "dependencies": {

2

 "vtex.search": "2.x"

3

 }

`

Check the [Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search) app documentation for more details on this step.

## Usage

Add `autocomplete-result-list.v2` into the blocks of a `search-bar`. We also recommend to set `openAutocompleteOnFocus` as shown.

`1

{

2

 "autocomplete-result-list.v2": {

3

 "blocks": ["product-summary"]

4

 },

5

 "search-bar": {

6

 "blocks": ["autocomplete-result-list.v2"],

7

 "props": {

8

 "openAutocompleteOnFocus": true

9

 }

10

 }

11

}

`

### Props

| Prop name            | Type                                            | Description                                                                                | Default value |
| -------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| maxTopSearches       | Number                                          | Maximum number of terms in the top searches list.                                                                                | 10            |
| maxHistory           | Number                                          | Maximum number of terms in the search history list.                                                                                | 5             |
| maxSuggestedProducts | Number                                          | Maximum number of suggested products.                                                                                | 3             |
| maxSuggestedTerms    | Number                                          | Maximum number of suggested terms.                                                                                | 3             |
| autocompleteWidth    | Number                                          | Autocomplete width. Number between 0 and 100.                                                                                | \-            |
| productLayout        | [ProductLayoutEnum](#productlayoutenum)         | Defines the product layout in the suggested products list.                                                                                | \-            |
| hideTitles           | Boolean                                         | If true, all the titles will be hidden.                                                                                | false         |
| historyFirst         | Boolean                                         | If true, the Search History list will be prioritized.                                                                                | false         |
| customBreakpoints    | [CustomBreakpointsProp](#custombreakpointsprop) | Defines a maximum number of suggested products by breakpoints.                                                                                | \-            |
| simulationBehavior   | "skip" or "default"                             | If you want faster searches and do not care about most up to date prices and promotions, use "skip" value.                                                                                | default       |
| customPage           | string                                          | Defines a custom page to the autocomplete links. Example: store.search.custom.                                                                                | store.search  |
| orderBy              | enum                                            | Determines which order products must follow when displayed. The possible values are named after the order type: OrderByTopSaleDESC, OrderByReleaseDateDESC, OrderByBestDiscountDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, or OrderByNameDESC. ASC and DESC stand for ascending order and descending order, respectively, based on the position of each value's corresponding code in the [ASCII table](https://read.calvincode.net/reader?url=http://www.asciitable.com/). If not set to any of the mentioned values, the fallback behavior is sorting by [relevance settings](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/1qlObWIib6KqgrfX1FCOXS). OrderByScoreDESC is **not** a valid value for this prop. | ""            |

#### ProductLayoutEnum

| Enum name  | Enum value |
| ---------- | ---------- |
| Horizontal | HORIZONTAL |
| Vertical   | VERTICAL   |

#### CustomBreakpointsProp

| Prop name | Type                              | Description                                 | Default value |
| --------- | --------------------------------- | ------------------------------------------- | ------------- |
| md        | [BreakpointProp](#breakpointprop) | Defines the options for the md breakpoint.  | \-            |
| lg        | [BreakpointProp](#breakpointprop) | Defines the options for the lg breakpoint.  | \-            |
| xlg       | [BreakpointProp](#breakpointprop) | Defines the options for the xlg breakpoint. | \-            |

#### BreakpointProp

| Prop name            | Type   | Description                                              | Default value |
| -------------------- | ------ | -------------------------------------------------------- | ------------- |
| width                | Number | Minimum width for the breakpoint.                        | \-            |
| maxSuggestedProducts | Number | Maximum number of suggested products for the breakpoint. | \-            |

[Add To Cart Button« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.add-to-cart-button)[BannerNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/banner)

See also

[Vtex.searchVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/Autocomplete%23before-you-begin)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/Autocomplete%23usage)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/Autocomplete/docs/apps/vtex.search/Autocomplete%23props)

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 delivery promise implementation 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/delivery-promise-implementation/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/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/delivery-promise-implementation/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/delivery-promise-implementation/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/delivery-promise-implementation/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/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/delivery-promise-implementation/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/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation)

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

[Working with Delivery Promise components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-components)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/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/delivery-promise-implementation/docs/guides/faststore/faststore-api-overview)

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/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/delivery-promise-implementation/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/delivery-promise-implementation/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/delivery-promise-implementation/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/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/delivery-promise-implementation/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/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation)

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

[Working with Delivery Promise components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-components)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/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/delivery-promise-implementation/docs/guides/faststore/faststore-api-overview)

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Implementing Delivery Promise

> This feature is in closed beta, which means that only selected customers have access to it. If you're interested in implementing it in the future, please contact our [Support](https://read.calvincode.net/reader?url=https://support.vtex.com/hc/en-us) team.

**Delivery Promise** is a feature that provides accurate and reliable delivery estimates for available products based on the customer's location. It ensures that customers only see products that are in stock and can be delivered to their address or picked up at a nearby location.

This solution continuously updates product availability throughout the buying journey by responding to changes in catalog, pricing, inventory, or shipping settings. These updates are then sent to [Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checkout-overview) and [Intelligent Search](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search), ensuring customers see up-to-date options based on their region.

In this guide, you'll learn how to configure Delivery Promise in your FastStore project.

> To understand how Delivery Promise operates, see the [Understanding Delivery Promise operation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-overview) guide. For more information about Delivery Promise components, see the [Working with Delivery Promise components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) guide.

## Default settings

Delivery Promise is defined in the `deliveryPromise` section of the [discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file.

The default settings are:

discovery.config.js

`1

deliveryPromise: {

2

 enabled: true,

3

 mandatory: false

4

 },

`

* `enabled`: When set to **true**, Delivery Promise activates, allowing the store to provide delivery estimates based on the user's location.
* `mandatory`: When set to **true**, users must provide a postal code. By default, this is **false**, allowing users to browse and add items to the cart without entering their postal code. However, without a postal code, the accuracy of delivery information may be limited.

## Before you begin

### Get the `search-session` app

Check if you have version `0.5.0` or later of the [search-session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-session) app installed.

1. In your terminal, run the `vtex list` command.
2. In the returned results, search for the app.
3. If you don't have this app installed, run the command `vtex install vtex.search-session`.

### Enable the VTEX Intelligent Search app

To enable the Intelligent Search app, check the version of your [Edition Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app) account.

In your terminal, log in to your account by running `vtex login {accountName}` and run `vtex edition get` to see the Edition app version installed. _Remember to replace the values between curly braces with your account name_.

Accounts with `vtex.edition-store@5.x`

If your account is using the `vtex.edition-store@5.x` major version, the VTEX Intelligent Search app is already included, and you need to integrate it via VTEX Admin.

To integrate VTEX Intelligent Search, access **Store Settings > Intelligent Search > Integrations** in the VTEX Admin, and click `START INTEGRATION`.

Accounts with an edition version older than `5.x`
1. In the VTEX IO CLI, log in to your VTEX account by running `vtex login {accountName}`. _Remember to replace the values between curly braces with your account name._
2. If the VTEX Intelligent Search app isn't installed in your account, run the following command:
`1
vtex install vtex.search-resolver@1.x vtex.admin-search@1.x
`

After installing the app, integrate it by going to **Store Settings > Intelligent Search > Integrations** in the VTEX Admin, and clicking `START INTEGRATION`.

Accounts that want to migrate to version `5.x`

If you're using a different major version and want to migrate, please [open a ticket with VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support) and request the installation of Edition app `vtex.edition-store@5.x`.

### Update the `@faststore/cli` package

Run the `yarn upgrade @faststore/cli` command to update the `@faststore/cli` package to the latest version.

### Open a ticket with VTEX Support

Open a ticket with [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support) and request the activation of Delivery Promise in your account.

## Instructions

### Step 1 - Enabling `deliveryPromise`

1. Open your FastStore project using the code editor of your choice.
2. Open the [discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file.
3. Under the [deliveryPromise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options%23deliverypromise) section, set the `enabled` value to `true`. Set the `mandatory` value based on your business needs. Learn more in the [Default settings](#default-settings) section.
discovery.config.js
`1
deliveryPromise: {
2
 enabled: true,
3
 mandatory: false,
4
}
`

### Step 2 - Syncing your FastStore project with Headless CMS

Run the `faststore cms-sync` command to sync the `cms` folder of your FastStore project with [Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview).

The expected response is the message `CMS synced successfully...`. The native regionalization components and sections will be automatically updated. You can check them in the VTEX Admin:

* **Regionalization component:** Go to **Storefronts > Headless CMS > Global Sections > NavBar > Navigation > Regionalization**.
* **Region Bar section:** Go to **Storefronts > Headless CMS > Global Sections > Region Bar**.
* **Region Modal section:** Go to **Storefronts > Headless CMS > Global Sections > Region Modal**.

You only need to [add a new section](#step-3-adding-region-popover-section): `Region Popover`.

### Step 3 - Adding the `Region Popover` section

`RegionPopover` is a section that manages user location inputs. It's used when location data is missing or the store default postal code is applied. `RegionPopover` is available in [@faststore/core](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-overview%23packagejson) and uses the [Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover) component as its UI base.

![{"base64":"  ","img":{"width":2851,"height":1135,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1097984,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/regionpopover___dedb0aad756657e71d4c8d40cb2ef5e7.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/regionpopover___dedb0aad756657e71d4c8d40cb2ef5e7.png)

`RegionPopover` code

packages/core/src/components/region/RegionPopover/RegionPopover.tsx

`` 1

import type { PopoverProps as UIPopoverProps } from '@faststore/ui'

2

import {

3

 Icon as UIIcon,

4

 InputField as UIInputField,

5

 Link as UILink,

6

 Popover as UIPopover,

7

 useUI,

8

} from '@faststore/ui'

9

import { useRef, useState } from 'react'

10

11

import useRegion from '../RegionModal/useRegion'

12

13

import { sessionStore, useSession } from 'src/sdk/session'

14

import { textToTitleCase } from 'src/utils/utilities'

15

import styles from './section.module.scss'

16

17

interface RegionPopoverProps {

18

 title?: UIPopoverProps['title']

19

 closeButtonAriaLabel?: UIPopoverProps['closeButtonAriaLabel']

20

 inputField?: {

21

 label?: string

22

 errorMessage?: string

23

 noProductsAvailableErrorMessage?: string

24

 buttonActionText?: string

25

 }

26

 idkPostalCodeLink?: {

27

 text?: string

28

 to?: string

29

 icon?: {

30

 icon?: string

31

 alt?: string

32

 }

33

 }

34

 textBeforeLocation?: string

35

 textAfterLocation?: string

36

 description?: string

37

 triggerRef?: UIPopoverProps['triggerRef']

38

 onDismiss: UIPopoverProps['onDismiss']

39

 offsetTop?: UIPopoverProps['offsetTop']

40

 offsetLeft?: UIPopoverProps['offsetLeft']

41

 placement?: UIPopoverProps['placement']

42

}

43

44

function RegionPopover({

45

 title = 'Set your location',

46

 closeButtonAriaLabel,

47

 inputField: {

48

 label: inputFieldLabel,

49

 errorMessage: inputFieldErrorMessage,

50

 noProductsAvailableErrorMessage: inputFieldNoProductsAvailableErrorMessage,

51

 buttonActionText: inputButtonActionText,

52

 },

53

 idkPostalCodeLink: {

54

 text: idkPostalCodeLinkText,

55

 to: idkPostalCodeLinkTo,

56

 icon: { icon: idkPostalCodeLinkIcon, alt: idkPostalCodeLinkIconAlt },

57

 },

58

 textBeforeLocation = 'Your current location is:',

59

 textAfterLocation = 'Use the field below to change it.',

60

 description = 'Offers and availability vary by location.',

61

 triggerRef,

62

 offsetTop = 6,

63

 offsetLeft,

64

 placement = 'bottom-start',

65

}: RegionPopoverProps) {

66

 const inputRef = useRef<HTMLInputElement>(null)

67

 const { isValidating, ...session } = useSession()

68

 const { popover: displayPopover, closePopover } = useUI()

69

 const { city, postalCode } = sessionStore.read()

70

 const location = city ? `${textToTitleCase(city)}, ${postalCode}` : postalCode

71

72

 const [input, setInput] = useState<string>('')

73

74

 const { loading, setRegion, regionError, setRegionError } = useRegion()

75

76

 const handleSubmit = async () => {

77

 if (isValidating) {

78

 return

79

 }

80

81

 await setRegion({

82

 session,

83

 onSuccess: () => {

84

 setInput('')

85

 closePopover()

86

 },

87

 postalCode: input,

88

 errorMessage: inputFieldErrorMessage,

89

 noProductsAvailableErrorMessage:

90

 inputFieldNoProductsAvailableErrorMessage,

91

 })

92

 }

93

94

 const idkPostalCodeLinkProps = {

95

 href: idkPostalCodeLinkTo,

96

 children: (

97

 <>

98

 {idkPostalCodeLinkText}

99

 {!!idkPostalCodeLinkIcon && (

100

 <UIIcon

101

 name={idkPostalCodeLinkIcon}

102

 aria-label={idkPostalCodeLinkIconAlt}

103

 width={20}

104

 height={20}

105

 />

106

 )}

107

 </>

108

 ),

109

 }

110

111

 const RegionPopoverContent = (

112

 <>

113

 <span data-fs-region-popover-description>

114

 {postalCode ? (

115

 <>

116

 {textBeforeLocation} <span>{location}</span>. {textAfterLocation}

117

 </>

118

 ) : (

119

 <>{description}</>

120

 )}

121

 </span>

122

 <UIInputField

123

 data-fs-region-popover-input

124

 id="region-popover-input-postal-code"

125

 inputRef={inputRef}

126

 label={inputFieldLabel}

127

 actionable

128

 value={input}

129

 onInput={(e) => {

130

 regionError !== '' && setRegionError('')

131

 setInput(e.currentTarget.value)

132

 }}

133

 onSubmit={handleSubmit}

134

 onClear={() => {

135

 setInput('')

136

 setRegionError('')

137

 }}

138

 buttonActionText={loading ? '...' : inputButtonActionText}

139

 error={regionError}

140

 />

141

 {idkPostalCodeLinkTo && (

142

 <UILink data-fs-region-popover-link {...idkPostalCodeLinkProps} />

143

 )}

144

 </>

145

 )

146

147

 return (

148

 <>

149

 {displayPopover.isOpen && (

150

 <div className={`${styles.section} section-region-popover`}>

151

 <UIPopover

152

 data-fs-region-popover

153

 title={title}

154

 isOpen={displayPopover.isOpen}

155

 content={RegionPopoverContent}

156

 placement={placement}

157

 dismissible

158

 triggerRef={triggerRef}

159

 offsetTop={offsetTop}

160

 offsetLeft={offsetLeft}

161

 closeButtonAriaLabel={closeButtonAriaLabel}

162

 onEntered={() => {

163

 if (!postalCode && inputRef.current) {

164

 inputRef.current.focus()

165

 }

166

 }}

167

 />

168

 </div>

169

 )}

170

 </>

171

 )

172

}

173

174

export default RegionPopover

 ``

Follow the steps below to add the `RegionPopover` section to Headless CMS.

1. In the VTEX Admin, go to **Storefront > Headless CMS > Global Sections**.
2. In the Sections tab, click `+` to open a modal with a list of section options.
3. Search for the **Region Popover** section and click it to add it.
4. Set the `Title` and `Close popover aria-label` fields with your values.
5. Click `Save` to save your changes.
6. Click `Publish` to open a dropdown list with the options `Add to Release` (to schedule the update) and `Publish now` (to publish immediately).

Learn more in [Adding sections to Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-3-adding-content-types-and-sections%23step-3-adding-sections-to-the-headless-cms)

### Step 4 - (Optional) Defining a default postal code

The default postal code is a fallback mechanism when users don't provide a location, aren't logged in, or have no saved address.

To set a default postal code for your store, follow the steps below:

1. Open your FastStore project using the code editor of your choice.
2. Open the [discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file.
3. In the [session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options%23session) object, set your default `postalCode`. See the example below:
discovery.config.js
`1
 session: {
2
 currency: {
3
 code: "USD",
4
 symbol: "$",
5
 },
6
 locale: "en-US",
7
 channel: '{"salesChannel":"1","regionId":""}',
8
 country: "USA",
9
 deliveryMode: null,
10
 addressType: null,
11
 city: null,
12
 postalCode: 10021,
13
 geoCoordinates: null,
14
 person: null,
15
 },
`

## Managing Delivery Promise filters and labels

Delivery Promise [filters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-overview%23filter-options) help shoppers narrow products by delivery/pickup availability for their location, while [badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) visually indicate shipping/pickup availability for the shopper's location when Delivery Promise data exists.

By default, filters and badges are active once Delivery Promise is enabled and implemented in the store. However, you can deactivate them (Global Filter by Pickup Point, [Delivery Option](https://read.calvincode.net/reader?url=https://newhelp.vtex.com/docs/tutorials/delivery-options-beta), and [Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-overview%23badges) and edit their labels in the Headless CMS. To do this, follow these steps.

> For more details on filters and badges, see the [Working with Delivery Promise components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) guide.

1. Access the VTEX Admin and go to **Storefront > Headless CMS**.
2. Click the **Global Sections** Content Type.
3. Click the **Settings** tab.
4. Go to the **Delivery Promise** section and change the labels and settings to suit your scenario.

![{"base64":"  ","img":{"width":1327,"height":742,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3564390,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/dp-managing-filter-labels___8ced78ce723693085b3d8baa857ff5a6.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/dp-managing-filter-labels___8ced78ce723693085b3d8baa857ff5a6.gif)

## Enabling the Availability (In-stock) filter

By default, the [Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-overview%23plp-or-search-page-filters) filter is disabled in the Headless CMS. To enable this feature, follow these steps:

### Setting up `hideUnavailableItems`

1. Open your FastStore project in the code editor of your choice.
2. Open the `discovery.config.js` file.
3. In the `hideUnavailableItems` property, change the value to `false`.
`1
...
2
api: {
3
 storeId: "newstore",
4
 workspace: "master",
5
 environment: "vtexcommercestable",
6
 hideUnavailableItems: false,
7
 incrementAddress: false,
8
},
9
...
`
4. Create a new branch and open a pull request to deploy the change made in the `discovery.config.js` file to production.

### Enabling the filter in the Headless CMS

After changing the `hideUnavailableItems` value to `false`, you can enable this filter in the Headless CMS.

1. Access VTEX Admin and go to **Storefront > Headless CMS**.
2. Click the **Global Sections** Content Type.
3. Click the **Settings** tab.
4. Go to the **Delivery Promise** section and check the field **Should display In Stock filter?**

![{"base64":"  ","img":{"width":953,"height":325,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":35736,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/dp-availability-filter___2fd389aefe66a4014d8bf9828ade58b1.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/dp-availability-filter___2fd389aefe66a4014d8bf9828ade58b1.png)

Contributors

2

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

[Managing product images in specific contexts« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)[Understanding Delivery Promise operationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-overview)

Contributors

2

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

[Default settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23default-settings)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23before-you-begin)

[Get the search-session app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23get-the-search-session-app)[Enable the VTEX Intelligent Search app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23enable-the-vtex-intelligent-search-app)[Update the @faststore/cli package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23update-the-faststorecli-package)[Open a ticket with VTEX Support](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23open-a-ticket-with-vtex-support)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23instructions)

[Step 1 - Enabling deliveryPromise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-1-enabling-deliverypromise)[Step 2 - Syncing your FastStore project with Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-2-syncing-your-faststore-project-with-headless-cms)[Step 3 - Adding the Region Popover section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-3-adding-the-region-popover-section)[Step 4 - (Optional) Defining a default postal code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-4-optional-defining-a-default-postal-code)

[Managing Delivery Promise filters and labels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23managing-delivery-promise-filters-and-labels)

[Enabling the Availability (In-stock) filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23enabling-the-availability-in-stock-filter)

[Setting up hideUnavailableItems](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23setting-up-hideunavailableitems)[Enabling the filter in the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23enabling-the-filter-in-the-headless-cms)

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/features/delivery-promise/implementation.mdx)

Copy page

On this page

ON THIS PAGE

[Default settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23default-settings)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23before-you-begin)

[Get the search-session app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23get-the-search-session-app)[Enable the VTEX Intelligent Search app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23enable-the-vtex-intelligent-search-app)[Update the @faststore/cli package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23update-the-faststorecli-package)[Open a ticket with VTEX Support](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23open-a-ticket-with-vtex-support)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23instructions)

[Step 1 - Enabling deliveryPromise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-1-enabling-deliverypromise)[Step 2 - Syncing your FastStore project with Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-2-syncing-your-faststore-project-with-headless-cms)[Step 3 - Adding the Region Popover section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-3-adding-the-region-popover-section)[Step 4 - (Optional) Defining a default postal code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23step-4-optional-defining-a-default-postal-code)

[Managing Delivery Promise filters and labels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23managing-delivery-promise-filters-and-labels)

[Enabling the Availability (In-stock) filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23enabling-the-availability-in-stock-filter)

[Setting up hideUnavailableItems](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23setting-up-hideunavailableitems)[Enabling the filter in the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation/docs/guides/faststore/delivery-promise-implementation%23enabling-the-filter-in-the-headless-cms)

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.abandoned-cart-service)

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

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

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.checkout-ui-settings)

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

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtexbr.pickup-selector)

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

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.session-client)

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

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

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

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.abandoned-cart-service)

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

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

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.checkout-ui-settings)

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

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtexbr.pickup-selector)

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

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.session-client)

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

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

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

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

Store Icons

Official extension

Version: 0.18.0

Latest version: 0.18.0

[![{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":"https://api.travis-ci.com/vtex-apps/store-icons.svg?branch=master"}}](https://read.calvincode.net/reader?url=https://travis-ci.org/vtex-apps/store-icons.svg?branch=master)](https://travis-ci.org/vtex-apps/store-icons)

All Store icons components.

## Table of Contents

* [Store Icons](#store-icons)
   * [Description](#description)
   * [Release schedule](#release-schedule)
   * [Table of Contents](#table-of-contents)
   * [Concept](#concept)
   * [Usage](#usage)
         * [Dedicated Icon](#dedicated-icon)
         * [Generic Icon](#generic-icon)
   * [Icons](#icons)
         * [Props](#props)
         * [Icons List](#icons-list)
                  * [Brand](#brand)
                  * [High Priority Actions](#high-priority-actions)
                  * [Middle Priority Actions](#middle-priority-actions)
                  * [Informational](#informational)
                  * [Navigation](#navigation)
                  * [Status Indicators](#status-indicators)
   * [Customize](#customize)
         * [Overwriting the default IconPack](#overwriting-the-default-iconpack)
         * [Nomenclature](#nomenclature)
                  * [Icon Intention](#icon-intention)
   * [Troubleshooting](#troubleshooting)
   * [Contributing](#contributing)
   * [Tests](#tests)

## Concept

This project is based on [SVG fragment identifiers](https://read.calvincode.net/reader?url=https://css-tricks.com/svg-fragment-identifiers-work/). All store icons are served by Render SDK, and with HTML tag `<use>` we can render a fragment from our icon pack. If you want to know the complete list of fragment SVG's, [see here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md)

## Usage

First of all, add into the dependencies of your `manifest.json` and use it as an npm module:

`1

"dependencies": {

2

 "vtex.store-icons": "0.x"

3

}

`

There are two different ways to use the icons available here. If you're developing a store's theme, you should use the `icon` block for the icon you want to render, which behaves just like any other block and expects to receive the props exposed by its [API](#props). But if you're developing custom components and want to use icons defined here, just follow the instructions below.

### Dedicated Icon

Import the desired icon and use it into your code, for example:

`1

import { IconMenu } from 'vtex.store-icons'

2

3

const YourComponent = (props) => <IconMenu />

`

You can see [here](#icon-list) a list of every available icon.

### Generic Icon

The API provides a generic icon, The `Icon` component. You can choose from any other icon passing only the `id` from the respective one you want to add.

For example:

`1

import { Icon } from 'vtex.store-icons'

2

3

const YourComponent = (props) => <Icon id="hpa-cart" />

`

⚠ This component is meant to be used on icons there aren't common throughout the store. Choose [dedicated](#dedicated-icon) components whenever possible.

## Icons

### Props

Any icon can receive the following props:

| Property        | Description                                | Type    | Default value |
| --------------- | ------------------------------------------ | ------- | ------------- |
| id              | The ID for the desired icon                | String  | ''            |
| size            | Desired size                               | Number  | 16            |
| isActive        | desc                                       | Boolean | true          |
| activeClassName | The className it should have if active     | String  | 🚫            |
| mutedClassName  | The className it should have if not active | String  | 🚫            |

Obs: **...props**: It is important to notice that any other `<svg>` prop passed will work with an icon as well.

#### Enhanced Props

Some components support modifiers. These are props that define the icon type, orientation, state or shape.

| Modifier    | Possible values       |
| ----------- | --------------------- |
| type        | filled line outline   |
| orientation | up down left right    |
| state       | on off                |
| shape       | square rounded circle |

### Icon List

#### Brand

| Component                                                                                | id     | Type | Orientation | State | Shape             |        |
| -------------------------------------------------------------------------------------------- | ------ | ---- | ----------- | ----- | ----------------- | ------ |
| [IconSocial](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSocial.js) | social | 🚫   | 🚫          | 🚫    | square \| rounded | circle |

#### High Priority Actions

| Component                                                                                | id              | Type | Orientation | State | Shape |
| ------------------------------------------------------------------------------------------------------------ | --------------- | ---- | ----------- | ----- | ----- |
| [IconArrowBack](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconArrowBack.js)           | arrow-back      | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconAssistantSales](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconAssistantSales.js) | assistant-sales | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconProfile](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconProfile.js)               | profile         | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconCart](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCart.js)                     | cart            | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconSearch](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSearch.js)                 | search          | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconDelete](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconDelete.js)                 | delete          | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconMenu](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMenu.js)                     | menu            | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconLocationMarker](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconLocationMarker.js) | location-marker | 🚫   | 🚫          | 🚫    | 🚫    |

#### Medium Priority Actions

| Component                                                                                | id          | Type              | Orientation | State     | Shape     |    |
| ---------------------------------------------------------------------------------------------------- | ----------- | ----------------- | ----------- | --------- | --------- | -- |
| [IconEyesight](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconEyesight.js)     | eyesight    | filled \| outline | 🚫          | on \| off | 🚫        |    |
| [IconMinus](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMinus.js)           | minus       | filled \| outline | line        | 🚫        | 🚫 brands |    |
| [IconPlus](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blobrandseact/IconPlus.js)                       | plus        | filled \| outline | line        | 🚫        | 🚫        | 🚫 |
| [IconSingleItem](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSingleItem.js) | single-item | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconList](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconList.js)             | list        | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconGallery](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGallery.js)       | gallery     | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconRemove](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconRemove.js)         | remove      | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconSwap](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSwap.js)             | swap        | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconHeart](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconHeart.js)           | heart       | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconGlobe](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGlobe.js)           | globe       | 🚫                | 🚫          | 🚫        | 🚫        |    |
| [IconBookmark](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconBookmark.js)     | bookmark    | filled \| outline | 🚫          | 🚫        | 🚫        |    |
| [IconPlay](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconPlay.js)             | play        | filled \| outline | 🚫          | 🚫        | 🚫        |    |
| [IconPause](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconPause.js)           | pause       | filled \| outline | 🚫          | 🚫        | 🚫        |    |

#### Navigation

| Component                                                                                | id    | Type | Orientation | State | Shape |    |    |
| ------------------------------------------------------------------------------------------ | ----- | ---- | ----------- | ----- | ----- | -- | -- |
| [IconCaret](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCaret.js) | caret | 🚫   | up \| down  | left  | right | 🚫 | 🚫 |

#### Status Indicators

| Component                                                                                | id         | Type              | Orientation | State | Shape |    |
| -------------------------------------------------------------------------------------------------- | ---------- | ----------------- | ----------- | ----- | ----- | -- |
| [IconClose](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconClose.js)         | close      | filled \| outline | 🚫          | 🚫    | 🚫    |    |
| [IconCheck](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCheck.js)         | check      | filled \| outline | line        | 🚫    | 🚫    | 🚫 |
| [IconVolumeOn](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconVolumeOn.js)   | volume-on  | filled \| outline | line        | 🚫    | 🚫    | 🚫 |
| [IconVolumeOff](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconVolumeOff.js) | volume-off | filled \| outline | line        | 🚫    | 🚫    | 🚫 |

## Customize

In the [usage](#usage) section, we discuss two ways of using icons. These ways extend to customization, so, prefer to change an existing Icon so that you can use the [dedicated](#dedicated-icon) version. You can check how to override and name icons below.

### Overwriting the default IconPack

As mentioned before, all icon IDs are stored at the [iconpack.svg](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md) file. You can overwrite the default one by:

1. On your [store-theme](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme/tree/master/styles) create a new folder called `iconpacks`
2. Create a file called `iconpack.svg`
3. Declare your icon IDs (use the default `iconpack` as an example in how to do that properly).

### Nomenclature

The naming convention is: [intention](#icon-intention)\-[id](#icon-list)\--[?modifiers](#enhanced-props)

Where the `modifiers` follows the rule:`?type`\--`?orientation`\--`?state`\--`?shape`

**🤓 ? stands for optional inputs**

#### Icon Intention

`bnd` **Brand** \- Display logos, brands or advertisements.

`hpa` **High priority actions** \- Actions that are important to the global context.

`mpa` **Mild priority actions** \- Actions that are important only to the current component context.

`inf` **Informational** \- Represents information display or actions that, when triggered, reveal further details about the current context.

`nav` **Navigation** \- Actions that triggers navigation.

`sti` **Status indicators** \- Indicates the current item/component semantic status.

## CSS Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles          |
| -------------------- |
| 'arrowBackIcon'      |
| 'assistantSalesIcon' |
| 'caretIcon'          |
| 'cartIcon'           |
| 'checkIcon'          |
| 'closeIcon'          |
| 'deleteIcon'         |
| 'equalsIcon'         |
| 'eyeSightIcon'       |
| 'filterIcon'         |
| 'globeIcon'          |
| 'gridIcon'           |
| 'heartIcon'          |
| 'homeIcon'           |
| 'inlineGridIcon'     |
| 'locationInputIcon'  |
| 'locationMarkerIcon' |
| 'menuIcon'           |
| 'minusIcon'          |
| 'plusIcon'           |
| 'profileIcon'        |
| 'removeIcon'         |
| 'searchIcon'         |
| 'singleGridIcon'     |
| 'socialIcon'         |
| 'starIcon'           |
| 'swapIcon'           |
| 'playIcon'           |
| 'pauseIcon'          |
| 'fullscreenIcon'     |
| 'volumeOnIcon'       |
| 'volumeOffIcon'      |

[Session Client GraphQL API« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.session-client/session-client-graphql-api)[Store SitemapNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-sitemap)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)[ICONPACKVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons@0.18.0/ICONPACK)[BaselineVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons@0.18.0/script/baseline)

ON THIS PAGE

[Table of Contents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23table-of-contents)

[Concept](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23concept)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23usage)

[Dedicated Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23dedicated-icon)[Generic Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23generic-icon)

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23props)[Icon List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23icon-list)

[Customize](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23customize)

[Overwriting the default IconPack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23overwriting-the-default-iconpack)[Nomenclature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23nomenclature)

[CSS Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-icons/docs/apps/vtex.store-icons%23css-customization)

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