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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

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

VTEX Telemarketing

Official extension

Version: 2.12.1

Latest version: 2.12.1

## Description

The VTEX Telemarketing app is a store component that enables a call center operator impersonate a costumer in the store, and this app is used by store theme.

:loudspeaker: **Disclaimer:** Don't fork this project, use, contribute, or open issue with your feature request.

## Release schedule

| Release | Status              | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
| ------- | ------------------- | --------------- | --------------------- | ----------- | ------------------- |
| \[2.x\] | **Current Release** | 2018-11-08      | 2.x                   |             |                     |
| \[1.x\] | **Maintenance LTS** | 2018-08-15      | 2018-11-08            | March 2019  | 1.x                 |

See our [LTS policy](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23lts-policy) for more information.

## Table of Contents

* [Usage](#usage)
   * [Blocks API](#blocks-api)
         * [Configuration](#configuration)
   * [Styles API](#styles-api)
         * [CSS namespaces](#css-namespaces)
* [Troubleshooting](#troubleshooting)
* [Contributing](#contributing)
* [Tests](#tests)

## Usage

This app uses our store builder with the blocks architecture. To know more about the Store Builder [click here](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder%23structuring-and-configuring-our-store-with-object-object).

We add the telemarketing as a block in our [Store Header](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-header/blob/master/store/interfaces.json).

To configure or customize this app, you need to import it in your dependencies in `manifest.json`.

`1

 dependencies: {

2

 "vtex.telemarketing": "2.x"

3

 }

`

Then, add `telemarketing` block into your app theme as we do in our [Store theme app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme/blob/master/store/blocks.json).

:loudspeaker: **Disclaimer:** This component will only be displayed for the users that have the role of `2 - Televendas (Call center operator)` in their access profile.

To give an user the permission of call center operator you need to follow these steps on VTEX admin management page:

* Access the page: Account Management -> Access Profiles -> Click in New Profile -> Select `2 - Televendas (Call center operator)`
* Add the email of the users that are responsable for impersonating customers(call center operators).

### Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within telemarketing and describes if they are required or optional.

`1

{

2

 "telemarketing": {

3

 "component": "index"

4

 }

5

}

`

As you can see, this app has no required or optional block.

#### Configuration

This app has no configuration yet.

### Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the `styles` builder and create an app styling CSS file.

1. Add the `styles` builder to your `manifest.json`:

`1

 "builders": {

2

 "styles": "1.x"

3

 }

`

1. Create a file called `vtex.telemarketing.css` inside the `styles/css` folder. Add your custom styles:

`1

.container {

2

 margin-top: 10px;

3

}

`

#### Customization

| CSS Handles             |
| ----------------------- |
| container               |
| popoverArrowUp          |
| popoverBox              |
| popoverContentContainer |
| popoverContainer        |
| login                   |
| loginForm               |
| loginFormMessage        |
| emailInput              |
| clientName              |
| clientNameBar           |
| logout                  |
| logoutForm              |
| popoverHeaderIcon       |
| popoverHeaderEmail      |
| loginButton             |
| loginAsText             |
| popoverHeader           |
| loginFormContainer      |
| logoutInfoContainer     |
| emailContainer          |
| emailField              |
| emailValue              |
| documentContainer       |
| documentField           |
| documentValue           |
| phoneContainer          |
| phoneField              |
| phoneValue              |
| logoutButtonsContainer  |
| wrapper                 |
| telemarketingBar        |
| attendantContainer      |
| attendantEmail          |

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)

## Troubleshooting

You can check if others are passing through similar issues [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/telemarketing/issues). Also feel free to [open issues](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/telemarketing/issues/new) or contribute with pull requests.

## Contributing

Check it out [how to contribute](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23contributing) with this project.

## Tests

To execute our tests go to `react/` folder and run `yarn test`

### Travis CI

[![{"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/telemarketing.svg?branch=master"}}](https://read.calvincode.net/reader?url=https://travis-ci.org/vtex-apps/telemarketing.svg?branch=master)](https://travis-ci.org/vtex-apps/telemarketing) [![{"base64":"  ","img":{"width":99,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":724,"url":"https://s3.amazonaws.com/assets.coveralls.io/badges/coveralls_77.svg"}}](https://read.calvincode.net/reader?url=https://coveralls.io/repos/github/vtex-apps/telemarketing/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/telemarketing?branch=master)

[Store Sitemap« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.store-sitemap)[Assembly OptionsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/guides/assembly-options-app)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23description)

[Release schedule](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23release-schedule)

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

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

[Blocks API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23blocks-api)[Styles API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23styles-api)

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

[Contributing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23contributing)

[Tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23tests)

[Travis CI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.telemarketing/docs/apps/vtex.telemarketing%23travis-ci)

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] How do I use the VTEX seller selector 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.seller-selector/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-newsletter)

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

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.store-newsletter)

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

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Seller Selector

Official extension

Version: 0.6.0

Latest version: 0.6.0

Seller Selector displays the number of [**sellers**](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-a-seller--5FkLvhZ3Few4CWWIuYOK2w) your marketplace has for each product. It enables users to compare prices from each seller and add the desired product to their cart.

![{"base64":"  ","img":{"width":1919,"height":498,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40796,"url":"https://user-images.githubusercontent.com/53904010/78715148-595eea00-78f3-11ea-90fa-dc38c37a80d8.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/53904010/78715148-595eea00-78f3-11ea-90fa-dc38c37a80d8.png)

## Configuration

1. Install the Seller Selector app to your store with the following command:

`1

vtex install vtex.seller-selector@0.x

`

1. Add the Seller Selector app to your theme's dependencies in the `manifest.json` as shown below:

`1

"dependencies": {

2

 "vtex.seller-selector": "0.x"

3

}

`

1. Add the `link-seller` block, exported by the `vtex.seller-selector` app, inside your product page (`store.product` template). When rendered, the block will create a link to the Seller Selector main page. For example:

`1

 "flex-layout.col#right-col": {

2

 "props": {

3

 "preventVerticalStretch": true,

4

 "rowGap": 0

5

 },

6

 "children": [

7

 "product-name",

8

+ "link-seller"

9

 "product-price#product-details",

10

 "product-separator",

11

 "flex-layout.row#buy-button",

12

 "availability-subscriber",

13

 "shipping-simulator",

14

 "share#default"

15

 ]

16

 },

`

By declaring the `link-seller` block, a page containing all available sellers will be displayed automatically. However, you can configure the Seller Selector page layout, using props for each one of the blocks used to build it behind the scenes.

### Advanced Configuration

Behind the scenes, the Seller Selector page uses the following default implementation:

`1

{

2

 "store.sellers": {

3

 "blocks": [

4

 "seller-table"

5

 ]

6

 },

7

 "seller-table": {

8

 "children": [

9

 "vtex.store-components:product-name",

10

 "seller-simulate-shipping",

11

 "seller-head",

12

 "seller-body"

13

 ]

14

 },

15

 "seller-head": {

16

 "children": [

17

 "seller-head-cell#Seller",

18

 "seller-head-cell#Price",

19

 "seller-head-cell#Shipping",

20

 "seller-head-cell#PriceWithShipping",

21

 "seller-head-cell#BuyButton"

22

 ]

23

 },

24

 "seller-head-cell#Seller": {

25

 "props": {

26

 "title": "Seller"

27

 }

28

 },

29

 "seller-head-cell#Price": {

30

 "props": {

31

 "title": "Price"

32

 }

33

 },

34

 "seller-head-cell#Shipping": {

35

 "props": {

36

 "title": "Shipping"

37

 }

38

 },

39

 "seller-head-cell#PriceWithShipping": {

40

 "props": {

41

 "title": "Price With Shipping"

42

 }

43

 },

44

 "seller-head-cell#BuyButton": {

45

 "props": {

46

 "title": "Add To Cart"

47

 }

48

 },

49

 "seller-body": {

50

 "children": [

51

 "seller-row"

52

 ]

53

 },

54

 "seller-row": {

55

 "children": [

56

 "seller-name",

57

 "seller-price",

58

 "seller-shipping",

59

 "seller-price-with-shipping",

60

 "seller-add-to-cart"

61

 ]

62

 },

63

 "seller-add-to-cart":{

64

 "blocks":[

65

 "add-to-cart-button"

66

 ]

67

 }

68

}

`

| Block name                 | Description                                                                                |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| seller-table               | Layout block that provides a table to build the Seller Selector page with other blocks. It is possible to build the page using three main blocks: seller-simulate-shipping, seller-head and seller-body (declared as children of seller-head).                                        |
| seller-simulate-shipping   | Builds a form so users can add a postal code and then simulate the shipping costs to the desired address.                                                                                |
| seller-head                | Builds a header to be used on the Seller Selector table. You can pass to it the seller-head-cell block as children.                                                                                |
| seller-head-cell           | Defines a title for each column in the table header.                                                                                |
| seller-body                | Defines the page main content. It is responsible for displaying all sellers' data in the table body.                                                                                |
| seller-row                 | Used inside the Seller Selector table to separate seller's data into columns. You can use the blocks listed below (seller-name, seller-price, seller-shipping, seller-price-with-shipping, seller-add-to-cart) as seller-row's children in order to provide all needed seller's data. |
| seller-name                | Displays the seller name.                                                                                |
| seller-price               | Displays the seller price for a given product.                                                                                |
| seller-shipping            | Displays shipping cost considering the sellers' data.                                                                                |
| seller-price-with-shipping | Displays the purchase final cost (shipping cost + product price).                                                                                |
| seller-add-to-cart         | Displays a Buy button that adds a given seller's product to the shopping cart. It is possible to use two different blocks inside of it buy-button or add-to-cart-button                                                                                |
| buy-button                 | Default buy button, will be used if nothing is provided in the blocks section of seller-add-to-cart                                                                                |
| add-to-cart-button         | Buy button to use with Minicart.V2 and GoCommerce Stores                                                                                |

#### `link-seller` props

| Prop name | Type   | Description                    | Default value              |
| --------- | ------ | ------------------------------ | -------------------------- |
| message   | string | Text displayed on link counter | store/seller-link.linkText |

| Message variables | Type   | Description                         | Example                                                                       |
| ----------------- | ------ | ----------------------------------- | ----------------------------------------------------------------------------- |
| sellerQuantity    | number | Number of sellers sell this product | View {**sellerQuantity**, plural, one {1 more seller} other {# more sellers}} |

This block uses the [ICU Message Format](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/), making it possible to fully edit the text message and variables displayed on block.

#### `seller-table` props

| Prop name                     | Type   | Description                                     | Default value |
| ----------------------------- | ------ | ----------------------------------------------- | ------------- |
| limitShownShippingInformation | number | Max number of shipping options to be displayed. | 3             |

#### `seller-add-to-cart` props

| Prop name     | Type    | Description                                                                                | Default value |
| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| isOneClickBuy | boolean | Defines if users will keep navigating in the same page once the Buy button was clicked on (true) or if they will be redirected (false) | false         |

#### `seller-head-cell` props

| Prop name | Type   | Description                                         | Default value |
| --------- | ------ | --------------------------------------------------- | ------------- |
| title     | string | Text displayed on the table header for each column. | undefined     |

## Modus operandi

The Seller Selector app fetch seller's data automatically from the [admin's Catalog ](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configuring-the-seller--tutorials%5F392). Behind the scenes, the blocks exported from the app use the product context in which they are inserted to identify the seller's data in the SKU registry. Based on this, they are able to display seller data without having to declare each desired seller in your theme.

## 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             |
| ----------------------- |
| linkSellerContainer     |
| linkSeller              |
| linkSellerText          |
| linkSellerNumber        |
| sellerMasterContainer   |
| sellerBuyContainer      |
| sellerList              |
| sellerBodyCell          |
| sellerHead              |
| sellerHeadCell          |
| sellerHeadText          |
| sellerName              |
| sellerPrice             |
| sellerPriceShipping     |
| sellerPriceShippingText |
| sellerRow               |
| sellerShipping          |
| sellerShippingText      |
| sellerRow               |
| simulateShipping        |
| simulateShippingSearch  |
| simulateShippingSpinner |

[Querying personal MasterData Information with SafeData« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.safedata)[Similar Products VariantsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.similar-products-variants)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.seller-selector%23configuration)

[Advanced Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.seller-selector%23advanced-configuration)

[Modus operandi](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.seller-selector/docs/apps/vtex.seller-selector%23modus-operandi)

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

Was this helpful?

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


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

[User] Provide a guide on guides faststore organisms filter slider 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-filter-slider/docs/guides)

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

FilterSlider

The mobile `Filter` view that is rendered inside a `SlideOver` component.

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

The mobile `Filter` view that is rendered inside a `SlideOver` component.The `FilterSlider` component is a compound of the following:

* `FilterSlider`: `SlideOver` that wraps the `Filter` for small screen dimensions.
* `Filter`: wraps an `Accordion` along with the component title.
* `FilterFacets`: wraps an `AccordionItem` with its `AccordionButton` and an `AccordionPanel` for every Facet.
* `FilterFacetBoolean`: wraps the list of the `FilterFacetBooleanItem`.
* `FilterFacetBooleanItem`: wraps a `Checkbox` with its `Label` and the `Badge` that represents the child of the `FilterFacetBoolean`.
* `FilterFacetRange`: wraps a `PriceRange` for a given Facet with the Range type.

Example

Code

Open Filters

---

## Usage

### Import the component

`1

import {

2

 FilterSlider,

3

 Filter,

4

 FilterFacets,

5

 FilterFacetBoolean,

6

 FilterFacetBooleanItem,

7

 FilterFacetRange,

8

} from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/organisms/FilterSlider/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).

---

## Design tokens

### Content

| Local token                         | Default value/Global token linked                                                                         |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------- |
| \--fs-filter-slider-content-height  | calc(100vh - var(--fs-filter-slider-footer-height))                                                       |
| \--fs-filter-slider-content-padding | var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3)) |

### Title

| Local token                           | Default value/Global token linked |
| ------------------------------------- | --------------------------------- |
| \--fs-filter-slider-title-font-size   | var(--fs-text-size-4)             |
| \--fs-filter-slider-title-font-weight | var(--fs-text-weight-bold)        |
| \--fs-filter-slider-title-line-height | 1.12                              |

### Footer

| Local token                           | Default value/Global token linked |
| ------------------------------------- | --------------------------------- |
| \--fs-filter-slider-footer-width      | 100%                              |
| \--fs-filter-slider-footer-height     | 5rem                              |
| \--fs-filter-slider-footer-padding    | var(--fs-spacing-3)               |
| \--fs-filter-slider-footer-bkg-color  | var(--fs-color-neutral-0)         |
| \--fs-filter-slider-footer-box-shadow | 0 0 6px rgb(0 0 0 / 20%)          |

### Footer Buttons

| Local token                                          | Default value/Global token linked |
| ---------------------------------------------------- | --------------------------------- |
| \--fs-filter-slider-footer-button-clear-width        | 40%                               |
| \--fs-filter-slider-footer-button-clear-margin-right | var(--fs-spacing-3)               |
| \--fs-filter-slider-footer-button-apply-width        | 60%                               |

---

## Data attributes

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

`data-fs-filter-slider`

`data-fs-filter-slider-content`

`data-fs-filter-slider-title`

`data-fs-filter-slider-footer`

`data-fs-filter-slider-footer-button-apply`

`data-fs-filter-slider-footer-button-clear`

---

## Props

### FilterSlider

| Name | Type | Description | Default |
| ---- | ---- | ----------- | ------- |

Contributors

3

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

[EmptyState« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-empty-state)[FilterNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter)

Contributors

3

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

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

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

[Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23content)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23title)[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23footer)[Footer Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23footer-buttons)

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

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

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

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/filter-slider.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23content)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23title)[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23footer)[Footer Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-filter-slider/docs/guides/faststore/organisms-filter-slider%23footer-buttons)

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

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

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

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