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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Alert

Displays short messages related to the behavior of a system, feature, or page.

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

Example

Code

Dismissible Alert message

[With Link](#)

Alert message

[With Link](#)

Icon with Alert message

Alert message

---

## Usage

### Import the component

`1

import { Alert } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

### Dismissible

Example

Code

Get 10% off today: NEW10

### With Link

Example

Code

Get 10% off today: NEW10

[Buy now](#)

### With Icon

Example

Code

Get 10% off today: NEW10

### Plain

Example

Code

Get 10% off today: NEW10

---

## Design tokens

| Local token               | Default value/Global token linked |
| ------------------------- | --------------------------------- |
| \--fs-alert-height        | var(--fs-spacing-7)               |
| \--fs-alert-padding-left  | var(--fs-spacing-3)               |
| \--fs-alert-padding-right | var(--fs-alert-padding-left)      |
| \--fs-alert-bkg-color     | var(--fs-color-highlighted-bkg)   |
| \--fs-alert-text-color    | var(--fs-color-highlighted-text)  |
| \--fs-alert-text-size     | var(--fs-text-size-1)             |

### Desing tokens: Icon

| Local token                   | Default value/Global token linked |
| ----------------------------- | --------------------------------- |
| \--fs-alert-icon-width        | var(--fs-spacing-4)               |
| \--fs-alert-icon-height       | var(--fs-alert-icon-width)        |
| \--fs-alert-icon-margin-right | var(--fs-spacing-1)               |
| \--fs-alert-icon-color        | var(--fs-alert-text-color)        |

### Desing tokens: Link

| Local token                    | Default value/Global token linked |
| ------------------------------ | --------------------------------- |
| \--fs-alert-link-color         | var(--fs-alert-text-color)        |
| \--fs-alert-link-color-visited | var(--fs-alert-text-color)        |

### Design tokens: Dismissible

| Local token                      | Default value/Global token linked |
| -------------------------------- | --------------------------------- |
| \--fs-alert-button-text-color    | var(--fs-alert-text-color)        |
| \--fs-alert-button-bkg-color     | var(--fs-alert-bkg-color)         |
| \--fs-alert-button-border-radius | var(--fs-border-radius)           |

---

## Data attributes

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

`data-fs-alert`

`data-fs-alert-content`

`data-fs-alert-link`

`data-fs-alert-button`

`data-fs-alert-dismissible="true"`

---

## Props

| Name            | Type                                                 | Description                                                                            | Default  |    |                          |                             |                     |             |                                              |
| --------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------- | -------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | -------------------------------------------- |
| **testId**      | string                                               | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-alert |    |                          |                             |                     |             |                                              |
| **icon**        | string \| number                                     | false                                                                                | true     | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon component for additional customization. |
| **dismissible** | false \| true                                        | Enables dismissible feature.                                                           |          |    |                          |                             |                     |             |                                              |
| **link**        | LinkProps<"a">                                       | Extends all Link Props.                                                                |          |    |                          |                             |                     |             |                                              |
| **onClose**     | (event: MouseEvent<HTMLElement, MouseEvent>) => void | Function called when dismiss button is clicked.                                        |          |    |                          |                             |                     |             |                                              |

---

## Best Practices

### ✅ Do's

* Write short messages to inform about the behavior of a system, feature, or page. Consider using 30 to 40 characters max.

### ❌ Don'ts

* Don't use long texts. Important information can be lost.

Contributors

3

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

[Accordion« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-accordion)[BreadcrumbNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-breadcrumb)

Contributors

3

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

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

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

[Dismissible](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23dismissible)[With Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23with-link)[With Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23with-icon)[Plain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23plain)

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

[Desing tokens: Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23desing-tokens-icon)[Desing tokens: Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23desing-tokens-link)[Design tokens: Dismissible](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23design-tokens-dismissible)

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

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

[Best Practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23best-practices)

[✅ Do's](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23-dos)[❌ Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23-donts)

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

Copy page

On this page

ON THIS PAGE

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

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

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

[Dismissible](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23dismissible)[With Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23with-link)[With Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23with-icon)[Plain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23plain)

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

[Desing tokens: Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23desing-tokens-icon)[Desing tokens: Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23desing-tokens-link)[Design tokens: Dismissible](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23design-tokens-dismissible)

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

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

[Best Practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23best-practices)

[✅ Do's](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23-dos)[❌ Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-alert/docs/guides/faststore/molecules-alert%23-donts)

On this page

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


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

[User] How do I use the VTEX checkout ui settings app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-settings/docs/api-reference)

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

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-settings/docs/storefront-development)

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-settings/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-settings/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

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

Checkout UI Settings

Official extension

Version: 0.1.0

Latest version: 0.1.0

The Checkout UI Settings app is responsible for **customizing your store's Checkout UI through scripts**.

The main advantage of using the app instead of the [store's admin](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en) for this customization is that your Checkout scripts will behave as configurations for platform apps.

In practice, it means that Checkout UI Settings allows A/B testing in your store's scripts, in addition to the possibility of quick rollbacks for old scripts (i.e. scripts pertaining to older Checkout UI Settings app's versions).

## Configuration

1. Using your terminal and the [VTEX IO Toolbelt](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/vtex-io-cli-installment-and-command-reference), log into the desired account;
2. Run `vtex list` to access the list of apps that are already installed on the account you're working on. If the Checkout UI Settings option already exists, you can skip to step 7 of this step-by-step;
3. If the Checkout UI Settings app was not found in the list of installed apps, run the `vtex init` command;
4. Select the `checkout-ui-settings` option;
5. Open the `checkout-ui-settings` app in whichever code editor you prefer;
6. In the `manifest.json` file, change the predefined default value `vendor` to the name of the account in which you want to install the app;
7. In the `checkout-ui-custom` folder, create the files in which the scripts will be included, just as you would do in the [admin's interface](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en%23configure-code). Notice that a few defaults files already exist in the `checkout-ui-custom` folder, files which you can use to insert the scripts;
8. According to the Checkout customization you are looking for, open the most suitable file and insert the desired scripts;
9. Save your changes. Then, [publish](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/publishing-an-app) the app's new version;
10. Still logged into the desired account, [create a production workspace](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/creating-a-production-workspace) and [install the app](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/installing-an-app);
11. If everything is working as expected, [promote the workspace to master](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/promoting-a-workspace-to-master).

## Modus Operandi

Once the app is deployed and installed in the account, every scripts contained in it will be automatically linked to your store and used to [build the templates](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en%23configuring-templates-from-the-code-menu) to customize your Checkout.

:warning: **Scripts used by Checkout are linked to the Checkout UI Settings version that's installed in your store**. If a prior app version was already installed and your want to change the scripts linked to it, you'll need to repeat the already existing code and thereafter launch the app's new version containing the changes you just did. Housekeeper is responsible for updating app versions in the accounts it's installed in.

[Checkout UI Custom« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-settings/docs/apps/vtex.checkout-ui-custom)[MessagesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-settings/docs/apps/vtex.messages)

See also

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

ON THIS PAGE

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

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

Was this helpful?

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


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

[User] Provide a guide on guides setting up the zoom 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/setting-up-the-zoom/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/store-framework)

---

(Legacy) CMS Portal

[Migrating your storefront from Legacy CMS Portal to Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/vtex-io-documentation-migrating-storefront-from-legacy-to-io)

[Can I order my product as I want?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/can-i-order-my-product-as-i-want)

[List of controls for templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/list-of-controls-for-templates)

[Setting up the zoom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom)

[Creating gift lists](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/creating-gift-lists)

[Validating a layout before moving it to production](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/validating-a-layout-before-moving-it-to-production)

[How to use the page title control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/how-to-use-the-page-title-control)

[How product name control works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/how-product-name-control-works)

[Configure the price history control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/configure-the-price-history-control)

[Shelf template controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/shelf-template-controls)

[Control to disable the canonical tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/control-to-disable-the-canonical-tag)

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/store-framework)

---

(Legacy) CMS Portal

[Migrating your storefront from Legacy CMS Portal to Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/vtex-io-documentation-migrating-storefront-from-legacy-to-io)

[Can I order my product as I want?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/can-i-order-my-product-as-i-want)

[List of controls for templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/list-of-controls-for-templates)

[Setting up the zoom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom)

[Creating gift lists](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/creating-gift-lists)

[Validating a layout before moving it to production](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/validating-a-layout-before-moving-it-to-production)

[How to use the page title control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/how-to-use-the-page-title-control)

[How product name control works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/how-product-name-control-works)

[Configure the price history control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/configure-the-price-history-control)

[Shelf template controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/shelf-template-controls)

[Control to disable the canonical tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/control-to-disable-the-canonical-tag)

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/storefront-best-practices)

---

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

(Legacy) CMS Portal

[Setting up the zoom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom)

Setting up the zoom

A tool very commonly used in online stores is the zoom.

It allows the customer to see a detailed image by passing the mouse over a photo of the product. Let us see how to set up and implement this function.

![{"base64":"  ","img":{"width":778,"height":332,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":286167,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/setting-up-the-zoom-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/setting-up-the-zoom-0.png)

## Setting up the CSS

The first thing to do is to set up the CSS of the page to be opened with an approximate image of the product at the moment the user passes the mouse over the photos of the product. To do this, save a file with the CSS of the page and upload it to your store’s server.

Below we reproduce an excerpt of CSS that you can use as a starting point for this purpose. Copy and paste it into a text editor and save it as “zoom.css”, for example.

`1

.zoomPad{position:relative;float:left;z-index:99;cursor:crosshair} .zoomPreload{-moz-opacity:.8;opacity:.8;filter:alpha(opacity=80);color:#333;font-size:12px;font-family:Tahoma;text-decoration:none;border:1px solid #CCC;background-color:#fff;padding:8px;text-align:center;background-image:url(/arquivos/ajax-loader.gif);background-repeat:no-repeat;background-position:center center;z-index:110;width:100%;height:100%;position:absolute;top:0;left:0;} .zoomPup{overflow:hidden;background-color:#FFF;-moz-opacity:.6;opacity:.6;filter:alpha(opacity=60);z-index:120;position:absolute;border:1px solid #CCC;z-index:101;cursor:crosshair} .zoomOverlay{position:absolute;left:0;top:0;background:#FFF;z-index:5000;width:100%;height:100%;display:none;z-index:101} .zoomWindow{position:absolute; left:445px !important; top:40px; background:#FFF; z-index:6000; height:auto; z-index:10000; z-index:110;} .zoomWrapper{position:relative;border:1px solid #999;z-index:110; width:531px !important; height:400px !important;} .zoomWrapperTitle{display:block;background:#999;color:#FFF;height:18px;line-height:18px;width:100%;overflow:hidden;text-align:center;font-size:10px;position:absolute;top:0;left:0;z-index:120;-moz-opacity:.6;opacity:.6;filter:alpha(opacity=60)} .zoomWrapperImage{display:block;position:relative;overflow:hidden;z-index:110; height:400px !important;} .zoomWrapperImage img{border:0;display:block;position:absolute;z-index:101} .zoomIframe{z-index:-1;filter:alpha(opacity=0);-moz-opacity:.8;opacity:.8;position:absolute;display:block}

`

Next we are going to send the saved CSS file to the server. To do this, click on **CMS** \> Access **Layout** \> Click on **CMS** folder > Access **Files Manager** \> Access **.css** \> in the window that opens on the right, click on **Add**.

Then find the CSS file you saved and send it to the server, clicking on **Localizar** ("Find") and then on **Salvar arquivo** ("Save File")

![{"base64":"  ","img":{"width":1243,"height":737,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":61950,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/setting-up-the-zoom-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/setting-up-the-zoom-1.png)

Your file will then be listed in the window, as shown above.

## Activate the zoom in the page template

Once you have done the above, you have to insert a control to activate the zoom on the product page template. This process also takes place in the **CMS**, but this time you have to locate the product page template, which should be in the **CMS** folder > **HTML Templates**. When you have located the template, you must enter the reference for the .css file we have just uploaded.

For this, you must include a tag such as `<link href="/files/zoom.css" rel="stylesheet" type="text/css">` in the head template, as we would do with any other .css file.

Now all you have to do is insert `zoom="on"` in the product tag, like this:`<vtex.cmc:ProductImage zoom="on">`

## Working conditions

You also have to set up the standard size for the zoom image. You can do this in **CMS** module > **Settings** \> **File Types**. By default, this type of zoom image is set up with 1000×1000 pixels.

![{"base64":"  ","img":{"width":2546,"height":924,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":146402,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/setting-up-the-zoom-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/setting-up-the-zoom-2.png)

Contributors

1

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

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/legacy-cms/setting-up-the-zoom.md)

[List of controls for templates« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom//docs/guides/list-of-controls-for-templates)[Creating gift listsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom//docs/guides/creating-gift-lists)

Contributors

1

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

ON THIS PAGE

[Setting up the CSS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom%23setting-up-the-css)

[Activate the zoom in the page template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom%23activate-the-zoom-in-the-page-template)

[Working conditions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom%23working-conditions)

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/legacy-cms/setting-up-the-zoom.md)

Copy page

On this page

ON THIS PAGE

[Setting up the CSS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom%23setting-up-the-css)

[Activate the zoom in the page template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom%23activate-the-zoom-in-the-page-template)

[Working conditions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-the-zoom/docs/guides/setting-up-the-zoom%23working-conditions)

On this page

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


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

[User] Provide a guide on guides vtex io documentation what is a vtex app in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/troubleshooting)

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/app-development)

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

What is a VTEX App

A VTEX App extends the functionalities of the VTEX platform, helping merchants create comprehensive experiences for different layers of digital commerce, such as:

* Marketing and affiliate programs
* Reviews, ratings, and analytics
* Customer support and notifications
* Marketplaces and channels
* Finance and taxes
* Logistics and productivity
* Privacy and security
* Store design

From enhancing storefronts to composing the VTEX Admin, VTEX Apps can be as unique as possible. VTEX Apps are available for download at the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/), and they can be either free or paid.

## VTEX App Store

The [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/) is a marketplace for VTEX IO plug-and-play solutions. It is where both first-party and third-party apps are published to be downloaded by clients and partners.

## How to use VTEX Apps?

You can use VTEX Apps to:

* Connect to VTEX Commerce APIs and integrate with VTEX modules.
* Integrate third-party solutions to the VTEX IO platform.
* Extend the native VTEX admin.
* Enhance storefront components with the [VTEX Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework).
* Speed up connections with Storefront and Admin apps.

## Developing apps

As a developer, you can develop your own VTEX Apps. VTEX Apps are built and deployed to the VTEX platform with [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io). Hence, by learning VTEX IO, you can create unique digital commerce experiences.

Notice that, besides developing custom solutions for the VTEX ecosystem, you can also publish and share your apps with VTEX merchants on the VTEX App Store, helping them leverage their business. Check out [how to become a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer). For more information about developing apps in this context, please refer to the [VTEX App Store section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-app-store).

### Types of apps

Custom apps complete business solutions, addressing pain points from real customers. With VTEX IO, it's possible to develop:

* **[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io):** React components that compose the [storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework) \- works as an open beta.
* **[Admin apps](https://read.calvincode.net/reader?url=https://learn.vtex.com/docs/course-admin-lang-en):** Modules and functionalities for the [VTEX Admin](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/vtex-admin-start-here--531cHtUCUi3puRXNDmKziw) \- works as a closed beta.
* **[Backend apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-service):** Node or .NET Core services that speed up connections with Storefront or Admin apps - works as a closed beta.
* **[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps):** Integrations that collect user data for a third-party service - works as a closed beta.
* **[Edition apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app):** Bundle of settings, policies, backend and frontend apps encapsulated and exported by a [Sponsor Account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-sponsor-account).

A VTEX App can also be characterized as:

* **Private**: Apps that are not published on the VTEX App Store. They can be installed in multiple accounts, according to their **allowed list**.
* **Public**: Apps published on the VTEX App Store.
* **Single-account**: Apps designed to run for a single account, i.e., in a single store.
* **Multi-account**: Apps designed to run in multiple accounts, i.e., different stores. The vendor’s responsibility is to handle account isolation properly in the application layer.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-what-is-a-vtex-app.md)

[What is VTEX IO« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app//docs/guides/vtex-io-documentation-what-is-vtex-io)[Governance and shared security in VTEX IO appsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app//docs/guides/governance-and-shared-security-in-vtex-io-apps)

See also

[Developing an appApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-developing-an-app)[ConceptsApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/concepts)[App Store GuidelinesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

Contributors

1

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

ON THIS PAGE

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23vtex-app-store)

[How to use VTEX Apps?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23how-to-use-vtex-apps)

[Developing apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23developing-apps)

[Types of apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23types-of-apps)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-what-is-a-vtex-app.md)

Copy page

On this page

ON THIS PAGE

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23vtex-app-store)

[How to use VTEX Apps?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23how-to-use-vtex-apps)

[Developing apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23developing-apps)

[Types of apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app%23types-of-apps)

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