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

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-product-card)

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

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-tooltip)

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-product-card)

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

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-tooltip)

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Modal

Dialog windows that sit on top of an application's main view.

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

`Modal` is a dialog window that sits on top of an application's main view.

The `Modal` component consists of the following:

* `Modal`: Provides a dialog window with a card-style base.
* `ModalHeader`: Wraps the Modal header. It may contain a title, description, and a close button. (Optional)
* `ModalBody`: Wraps the Modal body content. (Optional)
* `ModalFooter`: Wraps the Modal footer that contains buttons for canceling or submitting.

Example

Code

Open Modal

---

## Usage

### Import the component

`1

import { Modal, ModalHeader, ModalBody, ModalFooter } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

| Local token                         | Default value/Global token linked           |
| ----------------------------------- | ------------------------------------------- |
| \--fs-modal-position-top            | 30vh                                        |
| \--fs-modal-position-right          | var(--fs-spacing-4)                         |
| \--fs-modal-position-left           | var(--fs-spacing-4)                         |
| \--fs-modal-max-width               | calc(var(--fs-grid-breakpoint-desktop) / 3) |
| \--fs-modal-min-height              | var(--fs-spacing-5)                         |
| \--fs-modal-margin                  | auto                                        |
| \--fs-modal-background-color        | var(--fs-color-body-bkg)                    |
| \--fs-modal-border-radius           | var(--fs-border-radius)                     |
| \--fs-modal-width-tablet            | calc(100vw / 3)                             |
| \--fs-modal-min-width-tablet        | calc(var(--fs-grid-breakpoint-desktop) / 3) |
| \--fs-modal-transition-timing       | var(--fs-transition-timing)                 |
| \--fs-modal-transition-property     | transform                                   |
| \--fs-modal-transition-in-function  | ease-in                                     |
| \--fs-modal-transition-out-function | ease-in                                     |

### Header

| Local token                                    | Default value/Global token linked                                               |
| ---------------------------------------------- | ------------------------------------------------------------------------------- |
| \--fs-modal-header-padding                     | var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4) |
| \--fs-modal-header-title-margin-bottom         | .625rem                                                                         |
| \--fs-modal-header-title-size                  | var(--fs-text-size-lead)                                                        |
| \--fs-modal-header-title-weight                | var(--fs-text-weight-bold)                                                      |
| \--fs-modal-header-title-line-height           | 1.2                                                                             |
| \--fs-modal-header-description-size            | var(--fs-text-size-body)                                                        |
| \--fs-modal-header-description-line-height     | 1.5                                                                             |
| \--fs-modal-header-description-color           | var(--fs-color-text-light)                                                      |
| \--fs-modal-header-close-button-position-top   | 0                                                                               |
| \--fs-modal-header-close-button-position-right | 0                                                                               |

### Body

| Local token              | Default value/Global token linked                           |
| ------------------------ | ----------------------------------------------------------- |
| \--fs-modal-body-padding | var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5) |

### Footer

| Local token                        | Default value/Global token linked         |
| ---------------------------------- | ----------------------------------------- |
| \--fs-modal-footer-padding         | var(--fs-spacing-3) 0 var(--fs-spacing-3) |
| \--fs-modal-footer-box-shadow      | 0 -1px 15px 0 rgb(0 0 0 / 10.2%)          |
| \--fs-modal-footer-actions-padding | var(--fs-spacing-1) var(--fs-spacing-4)   |
| \--fs-modal-footer-actions-gap     | var(--fs-spacing-3)                       |

---

## Data attributes

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

`data-fs-modal`

`data-fs-modal-state="in | out"`

`data-fs-modal-header`

`data-fs-modal-header-close-button`

`data-fs-modal-header-title`

`data-fs-modal-header-description`

`data-fs-modal-body`

`data-fs-modal-footer`

`data-fs-modal-footer-actions`

`data-fs-modal-footer-actions-direction`

`data-fs-modal-footer-actions-wrap`

---

## Props

All modal-related components support all attributes that are also supported by the `<div>` tag.

The following props are also supported:

### Modal

| Name                     | Type             | Description                                                                                | Default  |    |                       |                          |                             |                     |             |                                     |
| ------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -- | --------------------- | ------------------------ | --------------------------- | ------------------- | ----------- | ----------------------------------- |
| **testId**               | string           | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).                                                         | fs-modal |    |                       |                          |                             |                     |             |                                     |
| **aria-labelledby**      | string           | Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby |          |    |                       |                          |                             |                     |             |                                     |
| **isOpen**               | false \| true    | A boolean value that represents the state of the Modal.                                                                                | true     |    |                       |                          |                             |                     |             |                                     |
| **onDismiss**            | () => void       | Event emitted when the modal is closed.                                                                                |          |    |                       |                          |                             |                     |             |                                     |
| **onEntered**            | () => void       | Callback function when the modal is opened.                                                                                |          |    |                       |                          |                             |                     |             |                                     |
| **overlayProps**         | Props            | Props forwarded to the \`Overlay\` component.                                                                                |          |    |                       |                          |                             |                     |             |                                     |
| **children\***           | string \| number | false                                                                                | true     | {} | ModalChildrenFunction | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children. |
| **disableEscapeKeyDown** | false \| true    | Disable being closed using the Escape key.                                                                                | false    |    |                       |                          |                             |                     |             |                                     |

### ModalHeader

| Name              | Type                                      | Description                                     | Default |
| ----------------- | ----------------------------------------- | ----------------------------------------------- | ------- |
| **title\***       | string                                    | Title for header modal.                         |         |
| **description**   | string                                    | Description for header modal.                   |         |
| **closeBtnProps** | Partial<Omit<IconButtonProps, "onClick">> | Props for the Close Button component.           | {}      |
| **onClose**       | () => void                                | Function called when dismiss button is clicked. |         |

### ModalBody

| Name           | Type             | Description | Default |    |                          |                             |                     |             |                                    |
| -------------- | ---------------- | ----------- | ------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | ---------------------------------- |
| **children\*** | string \| number | false       | true    | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children |

### ModalFooter

| Name           | Type                       | Description                                  | Default    |    |                          |                             |                     |             |                                    |
| -------------- | -------------------------- | -------------------------------------------- | ---------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | ---------------------------------- |
| **children\*** | string \| number           | false                                        | true       | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children |
| **direction**  | "horizontal" \| "vertical" | Layout direction. Default is \`horizontal\`. | horizontal |    |                          |                             |                     |             |                                    |
| **wrap**       | false \| true              | Allows wrapping. Default is \`true\`         | true       |    |                          |                             |                     |             |                                    |

Contributors

4

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

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

[LinkButton« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-link-button)[NavbarLinksNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-navbar-links)

Contributors

4

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

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

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

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

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23header)[Body](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23body)[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23footer)

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

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

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modal)[ModalHeader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modalheader)[ModalBody](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modalbody)[ModalFooter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modalfooter)

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/molecules/modal.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23header)[Body](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23body)[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23footer)

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

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

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modal)[ModalHeader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modalheader)[ModalBody](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modalbody)[ModalFooter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal/docs/guides/faststore/molecules-modal%23modalfooter)

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 authenticating with your weni by vtex account 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/authenticating-with-your-weni-by-vtex-account/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/data-protection-plus)

---

Weni by VTEX

Weni by VTEX CLI

[Using the Weni by VTEX CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/using-the-weni-by-vtex-cli)

[Weni by VTEX CLI Command Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/weni-by-vtex-cli-command-reference)

[Authenticating with your Weni by VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account)

[Managing your Weni by VTEX projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/managing-your-weni-by-vtex-projects)

[Understanding the core concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/weni-by-vtex-understanding-the-core-concepts)

[Working with Weni by VTEX agents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/working-with-weni-by-vtex-agents)

[Fetching and filtering logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/weni-by-vtex-fetching-and-filtering-logs)

[Using Weni Run to execute tool tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/using-weni-run-to-execute-tool-tests)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/data-protection-plus)

---

Weni by VTEX

Weni by VTEX CLI

[Using the Weni by VTEX CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/using-the-weni-by-vtex-cli)

[Weni by VTEX CLI Command Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/weni-by-vtex-cli-command-reference)

[Authenticating with your Weni by VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account)

[Managing your Weni by VTEX projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/managing-your-weni-by-vtex-projects)

[Understanding the core concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/weni-by-vtex-understanding-the-core-concepts)

[Working with Weni by VTEX agents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/working-with-weni-by-vtex-agents)

[Fetching and filtering logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/weni-by-vtex-fetching-and-filtering-logs)

[Using Weni Run to execute tool tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/using-weni-run-to-execute-tool-tests)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides)

Weni by VTEX

Weni by VTEX CLI

[Authenticating with your Weni by VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account)

Authenticating with your Weni by VTEX account

Learn how to authenticate with Weni by VTEX CLI.

Learn how to authenticate with Weni by VTEX CLI and manage your credentials.

### Login Process

Weni by VTEX CLI uses OAuth2 for authentication. When you run the login command:

`1

weni login

`

The following happens:

1. A local web server starts on your machine
2. Your default browser opens to the Weni by VTEX login page
3. After successful login, you're redirected back to the local server
4. The CLI receives and stores your authentication token

By default, the local server listens on `http://localhost:50051/sso-callback`.

### Token Storage

Your authentication token is stored securely in your home directory. Never share or expose your authentication information.

### Token Refresh

If an API request returns an authentication error, the CLI will prompt you to log in again. Run `weni login` to obtain a new token or to authenticate with a different account.

### Logout

To log out and remove your authentication:

1. Delete your configuration file

Then, run `weni login` again to authenticate with different credentials

### Troubleshooting

#### Common Issues

1. **Browser Doesn't Open**
   * Use the URL displayed in the terminal
   * Check if you have a default browser configured
2. **Authentication Failures**
   * Verify your internet connection
   * Check if your account has the necessary permissions

#### Security Best Practices

1. **Keep Your Token Safe**
   * Don't share your configuration file
   * Use appropriate file permissions
   * Don't expose the token in scripts or logs
2. **Regular Authentication Checks**
   * Periodically verify your authentication status
   * Update your credentials if you suspect any security issues

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F170467615%3Fv%3D4%26w=64%26q=75)](https://github.com/mariananantua)

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/Weni-by-VTEX/CLI/authenticating-with-your-weni-by-vtex-account.md)

[Weni by VTEX CLI Command Reference« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account//docs/guides/weni-by-vtex-cli-command-reference)[Managing your Weni by VTEX projectsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account//docs/guides/managing-your-weni-by-vtex-projects)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F170467615%3Fv%3D4%26w=64%26q=75)](https://github.com/mariananantua)

ON THIS PAGE

[Login Process](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23login-process)

[Token Storage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23token-storage)[Token Refresh](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23token-refresh)[Logout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23logout)[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23troubleshooting)

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/Weni-by-VTEX/CLI/authenticating-with-your-weni-by-vtex-account.md)

Copy page

On this page

ON THIS PAGE

[Login Process](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23login-process)

[Token Storage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23token-storage)[Token Refresh](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23token-refresh)[Logout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23logout)[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authenticating-with-your-weni-by-vtex-account/docs/guides/authenticating-with-your-weni-by-vtex-account%23troubleshooting)

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 organisms banner text 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-banner-text/docs/guides)

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

BannerText

Displays brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button.

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

The `BannerText` is used for advertising brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button.The final `BannerText` component is a compound of the following:

* `BannerText`: wraps the BannerText component.
* `BannerTextContent`: the content of the banner, including a title, caption, and Link.

Example

Code

## Explore more about our amazing products

[See more](/)

---

## Usage

### Import the component

`1

import { BannerText, BannerTextContent } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/organisms/BannerText/styles.scss";

`

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

---

## Examples

### Variants

#### Primary

Example

Code

## Explore more about our amazing products

[See more](/)

#### Secondary

Example

Code

## Explore more about our amazing products

All the amazing products from the brands we partner with.

[See more](/)

### Color variants

#### Main

Example

Code

## Explore more about our amazing products

[See more](/)

#### Light

Example

Code

## Explore more about our amazing products

[See more](/)

#### Accent

Example

Code

## Explore more about our amazing products

[See more](/)

---

## Design tokens

| Local token                       | Default value/Global token linked |
| --------------------------------- | --------------------------------- |
| \--fs-banner-text-padding-mobile  | var(--fs-spacing-6) 5%            |
| \--fs-banner-text-padding-desktop | var(--fs-spacing-9) 15%           |

### Button Link

| Local token                              | Default value/Global token linked |
| ---------------------------------------- | --------------------------------- |
| \--fs-banner-text-button-link-min-width  | 11.25rem                          |
| \--fs-banner-text-button-link-margin-top | var(--fs-spacing-6)               |

### Title

| Local token                    | Default value/Global token linked |
| ------------------------------ | --------------------------------- |
| \--fs-banner-text-title-size   | var(--fs-text-size-lead)          |
| \--fs-banner-text-title-weight | var(--fs-text-weight-bold)        |
| \--fs-banner-text-line-height  | 1.2                               |

### Design tokens: Primary

| Local token                   | Default value/Global token linked |
| ----------------------------- | --------------------------------- |
| \--fs-hero-primary-title-size | var(--fs-text-size-title-page)    |

### Design tokens: Secondary

| Local token                                     | Default value/Global token linked |
| ----------------------------------------------- | --------------------------------- |
| \--fs-banner-text-secondary-title-size          | var(--fs-text-size-4)             |
| \--fs-banner-text-secondary-caption-size        | var(--fs-text-size-base)          |
| \--fs-banner-text-secondary-caption-weight      | var(--fs-text-weight-regular)     |
| \--fs-banner-text-secondary-caption-line-height | 1.5                               |

### Design tokens: Main

| Local token                       | Default value/Global token linked |
| --------------------------------- | --------------------------------- |
| \--fs-banner-text-main-bkg-color  | var(--fs-color-primary-bkg)       |
| \--fs-banner-text-main-text-color | var(--fs-color-primary-text)      |

### Design tokens: Light

| Local token                        | Default value/Global token linked   |
| ---------------------------------- | ----------------------------------- |
| \--fs-banner-text-light-bkg-color  | var(--fs-color-secondary-bkg-light) |
| \--fs-banner-text-light-text-color | var(--fs-color-text-display)        |

### Design tokens: Accent

| Local token                         | Default value/Global token linked      |
| ----------------------------------- | -------------------------------------- |
| \--fs-banner-text-accent-bkg-color  | var(--fs-color-highlighted-bkg)        |
| \--fs-banner-text-accent-text-color | var(--fs-banner-text-light-text-color) |

---

## Data attributes

You can target and override `BannerText` styles using the following data attributes:`data-fs-banner-text`

`data-fs-banner-text-variant="primary" | "secondary"`

`data-fs-banner-text-color-variant="main" | "light" | "accent"`

`data-fs-banner-text-content`

`data-fs-banner-text-heading`

`data-fs-banner-text-link`

---

## Props

All banner text related components support all attributes also supported by the `<div>` tag. Besides those attributes, the following props are also supported:

### BannerText

| Name             | Type                     | Description                                                                            | Default                                              |      |
| ---------------- | ------------------------ | -------------------------------------------------------------------------------------- | ---------------------------------------------------- | ---- |
| **variant**      | "primary" \| "secondary" | Specifies the component direction variant.                                             | primary                                              |      |
| **colorVariant** | "main" \| "light"        | "accent"                                                                               | Specifies the component's color variant combination. | main |
| **testId**       | string                   | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-banner-text                                       |      |

### BannerTextContent

| Name                | Type          | Description                                                                            | Default                |
| ------------------- | ------------- | -------------------------------------------------------------------------------------- | ---------------------- |
| **title\***         | string        | The content for the h2 tag.                                                            |                        |
| **caption\***       | string        | The content for the p tag below the h2.                                                |                        |
| **link\***          | string        | The href used at the link.                                                             |                        |
| **linkText\***      | string        | The label used at the link.                                                            |                        |
| **linkTargetBlank** | false \| true | Specify if the link opens in a new tab.                                                |                        |
| **testId**          | string        | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-banner-text-content |

Contributors

3

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

[Organisms« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-overview)[CartSidebarNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-cart-sidebar)

Contributors

3

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

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

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

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23variants)[Color variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23color-variants)

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

[Button Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23button-link)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23title)[Design tokens: Primary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-primary)[Design tokens: Secondary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-secondary)[Design tokens: Main](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-main)[Design tokens: Light](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-light)[Design tokens: Accent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-accent)

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

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

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23bannertext)[BannerTextContent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23bannertextcontent)

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/banner-text.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23variants)[Color variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23color-variants)

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

[Button Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23button-link)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23title)[Design tokens: Primary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-primary)[Design tokens: Secondary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-secondary)[Design tokens: Main](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-main)[Design tokens: Light](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-light)[Design tokens: Accent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23design-tokens-accent)

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

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

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23bannertext)[BannerTextContent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-banner-text/docs/guides/faststore/organisms-banner-text%23bannertextcontent)

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