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

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-empty-state)

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

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

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

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-image-gallery)

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

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

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

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-payment-methods)

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

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-region-modal)

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

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-slide-over)

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-empty-state)

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

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

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

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-image-gallery)

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

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

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

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-payment-methods)

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

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-region-modal)

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

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-slide-over)

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

PriceRange

Sliders that allows users to select a maximum and minimum price.

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

The `PriceRange` component is a [Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-slider) that allows users to select a maximum and minimum price from a range.

Example

Code

$0$500

$100$250

Min

Max

---

## Usage

### Import the component

`1

import { PriceRange } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/organisms/PriceRange/styles.scss';

`

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

---

## Data attributes

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

`data-fs-price-range`

`data-fs-price-range-inputs`

---

## Props

| Name                       | Type                                              | Description                                                                             | Default        |               |                                          |
| -------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------- | -------------- | ------------- | ---------------------------------------- |
| **variant**                | "selling" \| "listing"                            | "spot"                                                                                | "savings"      | "installment" | The current use case variant for prices. |
| **formatter\***            | PriceFormatter                                    | Formatter function that transforms the raw price value and render the result.           |                |               |                                          |
| **aria-label**             | string                                            | Defines a string value that labels the current element.                                 |                |               |                                          |
| **onChange**               | (value: { min: number; max: number; }) => void    | Callback that fires when the slider value changes.                                      |                |               |                                          |
| **testId**                 | string                                            | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).  | fs-price-range |               |                                          |
| **min\***                  | Range                                             | The minimum value of the slider.                                                        |                |               |                                          |
| **max\***                  | Range                                             | The maximum value of the slider.                                                        |                |               |                                          |
| **step**                   | number                                            | Specifies the number interval to be used in the inputs.                                 | 1              |               |                                          |
| **onEnd**                  | (value: { min: number; max: number; }) => void    | Callback that fires when the slider value ends changing.                                |                |               |                                          |
| **getAriaValueText**       | (value: number, thumb?: "min" \| "max") => string | A function used to set a human-readable value text based on the slider's current value. |                |               |                                          |
| **minValueLabelComponent** | (minValue: number) => ReactNode                   | Component that renders min value label above the left thumb.                            |                |               |                                          |
| **maxValueLabelComponent** | (maxValue: number) => ReactNode                   | Component that renders max value label above the right thumb.                           |                |               |                                          |

Contributors

3

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

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

Was this helpful?

Yes

No

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

[PaymentMethods« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-payment-methods)[ProductGridNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-price-range/docs/guides/faststore/organisms-product-grid)

Contributors

3

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

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

ON THIS PAGE

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

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

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

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

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

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

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

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

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

On this page

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


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

[User] Provide a guide on guides vtex io documentation segmenting the search result in VTEX.

[Assistant]
Documentation

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

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/how-search-parameters-work)

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/search-control-fulltextsearchbox)

[Consult store search terms information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/consult-store-search-terms-information)

[Consult product search information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/consult-product-search-information)

[Get banner list for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/get-banner-list-for-a-specific-search)

[Get a list of the possible facets for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-io-documentation-segmenting-the-search-result)

[Access Control List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/access-control-list)

[Delivery promise for headless stores (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/delivery-promise-for-headless-stores)

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/how-search-parameters-work)

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/search-control-fulltextsearchbox)

[Consult store search terms information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/consult-store-search-terms-information)

[Consult product search information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/consult-product-search-information)

[Get banner list for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/get-banner-list-for-a-specific-search)

[Get a list of the possible facets for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-io-documentation-segmenting-the-search-result)

[Access Control List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/access-control-list)

[Delivery promise for headless stores (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/delivery-promise-for-headless-stores)

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

Search

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result/docs/guides/vtex-io-documentation-segmenting-the-search-result)

Segmenting the search result

In some situations, such as B2B accounts, you may want to present custom search results for each of your customers. To this end, this tutorial will guide you on how to segment the search result page of your store.

Take the following example in which different results for the same search are obtained based on the customer's email.

![{"base64":"  ","img":{"width":1022,"height":403,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":2628533,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-segmenting-the-search-result.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-segmenting-the-search-result.gif)

> This app only works on your store's final domain when the customer is logged in. If the customer navigates without authentication, the filter will not be inserted into their session. Note that, in the `myvtex` environment, the app always functions because authentication is enforced at all times.

> If you are using the [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-suite) solution, the configuration described in this guide is not necessary, because the [B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-organizations) app allows product collections to be assigned to organizations.

## Instructions

To create segmented search results, we'll create a new VTEX IO app from the [vtex.search-segment-resolver](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-segment-resolver) boilerplate and customize it to establish our own segmentation rules.

1. Clone the `vtex.search-segment-resolver` app into your machine:
`1
git clone https://github.com/vtex-apps/search-segment-resolver
`
2. Open the `search-segment-resolver` project in any code editor of your preference.
3. Go to the `manifest.json` file and replace the `vendor` value with the name of your VTEX account.
4. Go to the `node/resolvers` folder and open the `searchSegment.ts` file.
> The `segmentSearch` function is responsible for providing a JSON array of facets. For example, if you want to segment the search by the `shoes` category, the `segmentSearch` function returns `[{"key": "category-1", "value": "shoes"}]`.
5. Replace the `searchSegment` definition with your own segmentation rules. Take the following example in which we segmented the search result to filter by the `123`collection for `vtex.com.br` emails and by the `456` collection otherwise:
`1
export const queries = {
2
 searchSegment: async (ctx: any, args: SearchSegmentInput, __: Context) => {
3
 const userEmail = args.userEmail
4
 const domain = userEmail.split('@')[1]
5

6
 return domain === 'vtex.com.br' ? [{ key: 'productClusterIds', value: '123' }] : [{ key: 'productClusterIds', value: '456' }]
7
 },
8
}
`
Notice that the `searchSegment` function receives the `args` variable, which has the `SearchSegmentInput` type:
`1
interface SearchSegmentInput {
2
 // User email
3
 userEmail?: string
4
 // Whether the user is authenticated or not
5
 isAuthenticated?: boolean
6
 // Array of selected facets (optionally you can control it by the session itself)
7
 selectedFacets?: SelectedFacet[]
8
}
`
> Filtering by facets in the final domain without the customer’s authentication requires adding the facet to the `public` namespace, a configuration that this app does not handle by default. You need to ensure this step is completed manually by following the [Sessions System](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sessions-system-overview%23changing-information-from-a-session) guide if required.
6. [Create a development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace) and [link your app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) to test if your segmentation rules are working as expected.
7. Once you finish your tests, follow all the necessary steps to [make your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available) before promoting it to master.

Contributors

3

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

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Search/vtex-io-documentation-segmenting-the-search-result.md)

[Get a list of the possible facets for a specific search« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result//docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)[Access Control ListNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-segmenting-the-search-result//docs/guides/access-control-list)

Contributors

3

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

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

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

ON THIS PAGE

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Search/vtex-io-documentation-segmenting-the-search-result.md)

Copy page

On this page

ON THIS PAGE

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

On this page

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


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

[User] Provide a guide on guides faststore api extensions troubleshooting 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/api-extensions-troubleshooting/docs/guides)

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

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

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

Storefront Development

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

---

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

Troubleshooting

## GraphQL changes not visible during development

If your GraphQL changes aren't visible during development, the changes you have made since you started the development server (`yarn dev`) are probably not optimized. Follow these steps to trigger the optimization:

* Run `yarn generate` (recommended) or `yarn run faststore generate-graphql`.
> This optimization can also be performed while the development server is running.
* Alternatively, you can stop and restart the development server using `yarn dev`.

## Deploy preview/production GraphQL schema different from development

If you notice differences between the GraphQL schema in your deploy preview or production environment compared to your development setup, it may be due to the schema not being optimized since the development server's initiation. The build process optimizes the schema before deployment to accurately reflect the schema declared in the store's code.

To fix the issue, refer to the [GraphQL changes not visible during development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-extension/troubleshooting%23graphql-changes-not-visible-during-development) topic.

## Type generation errors and warnings

Some errors can occur during GraphQL optimizations and type generation. Here's how to troubleshoot them:

`error Failed to run 'yarn generate:schema'. Please check your setup.`

**\- Possible cause:** Malformed files in your GraphQL Schema Extensions definitions.

**\- Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders for syntax or definition errors.

`error GraphQL was not optimized and TS files were not updated. Changes in the GraphQL layer did not take effect`

**\- Possible Cause:** Malformed files or GraphQL types within your GraphQL layer, including errors in GraphQL Schema Extensions, declared queries, and fragments.

**\- Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders and component (.ts, tsx) files declaring queries and fragments in your project for syntax or definition errors.

`warn Failed to format generated files. 'yarn format:generated' thrown errors`

After generating GraphQL Optimization and types files, they are formatted for readability. This step is recommended but not mandatory. If it fails, your changes to the GraphQL layer will still be visible. Therefore, it is a warning, not an error.

### Error details

To access more detailed error information, use the `--debug` flag when manually running the `yarn generate` command to see detailed errors on why the generation has failed.

## GraphQL changes not visible in production/deploy preview

During the build step, the GraphQL optimization and type files are always generated fresh, which means they always reflect the most recent changes in the code.

If your changes are not visible in production, this means you must not have committed them to the branch you're currently working on. If you see different GraphQL schema, queries, or data during development, refer to the [GraphQL changes not visible during development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-extension/troubleshooting%23graphql-changes-not-visible-during-development) topic.

Contributors

2

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

Was this helpful?

Yes

No

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

Contributors

2

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

ON THIS PAGE

[GraphQL changes not visible during development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23graphql-changes-not-visible-during-development)

[Deploy preview/production GraphQL schema different from development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23deploy-previewproduction-graphql-schema-different-from-development)

[Type generation errors and warnings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23type-generation-errors-and-warnings)

[Error details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23error-details)

[GraphQL changes not visible in production/deploy preview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23graphql-changes-not-visible-in-productiondeploy-preview)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

[GraphQL changes not visible during development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23graphql-changes-not-visible-during-development)

[Deploy preview/production GraphQL schema different from development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23deploy-previewproduction-graphql-schema-different-from-development)

[Type generation errors and warnings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23type-generation-errors-and-warnings)

[Error details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23error-details)

[GraphQL changes not visible in production/deploy preview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-troubleshooting/docs/guides/faststore/api-extensions-troubleshooting%23graphql-changes-not-visible-in-productiondeploy-preview)

On this page

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


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

[User] Provide a guide on guides vtex store icons in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

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

---

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

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.tsxon` 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/master/react/IconSocial.tsx) | 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/master/react/IconArrowBack.tsx)           | arrow-back      | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconAssistantSales](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconAssistantSales.tsx) | assistant-sales | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconProfile](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconProfile.tsx)               | profile         | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconCart](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconCart.tsx)                     | cart            | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconSearch](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconSearch.tsx)                 | search          | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconDelete](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconDelete.tsx)                 | delete          | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconMenu](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconMenu.tsx)                     | menu            | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconLocationMarker](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconLocationMarker.tsx) | 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/master/react/IconEyeSight.tsx) | `eyesight` | filled | outline | 🚫 | on | off | 🚫 | | [IconMinus](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconMinus.tsx) | `minus` | filled | outline | line | 🚫 | 🚫 brands | | [IconPlus](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconPlus.tsx) | `plus` | filled | outline | line | 🚫 | 🚫 | 🚫 | brands | | [IconSingleGrid](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconSingleGrid.tsx) | `single-item` | 🚫 | 🚫 | 🚫 | 🚫 | | [IconRemove](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconRemove.tsx) | `remove` | 🚫 | 🚫 | 🚫 | 🚫 | | [IconSwap](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconSwap.tsx) | `swap` | 🚫 | 🚫 | 🚫 | 🚫 | | [IconHeart](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconHeart.tsx) | `heart` | 🚫 | 🚫 | 🚫 | 🚫 | | [IconGlobe](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconGlobe.tsx) | `globe` | 🚫 | 🚫 | 🚫 | 🚫 | | [IconBookmark](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconBookmark.tsx) | `bookmark` | filled | outline | 🚫 | 🚫 | 🚫 | | [IconPlay](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconPlay.tsx) | `play` | filled | outline | 🚫 | 🚫 | 🚫 | | [IconPause](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconPause.tsx) | `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/master/react/IconCaret.tsx) | `caret` | 🚫 | up | down | left | right | 🚫 | 🚫 | true | false |

#### Status Indicators

| Component                                                                                | id         | Type              | Orientation | State | Shape |    |
| --------------------------------------------------------------------------------------------- | ---------- | ----------------- | ----------- | ----- | ----- | -- |
| [IconClose](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconClose.tsx)         | close      | filled \| outline | 🚫          | 🚫    | 🚫    |    |
| [IconCheck](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconCheck.tsx)         | check      | filled \| outline | line        | 🚫    | 🚫    | 🚫 |
| [IconVolumeOn](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconVolumeOn.tsx)   | volume-on  | filled \| outline | line        | 🚫    | 🚫    | 🚫 |
| [IconVolumeOff](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/react/IconVolumeOff.tsx) | 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://developers.vtex.com/docs/guides/vtex-io-documentation-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'      |

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/functional-apps/vtex-store-icons.md)

Contributors

1

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

ON THIS PAGE

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

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

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

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

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

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

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

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

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/functional-apps/vtex-store-icons.md)

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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

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

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

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