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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

BuyButton

Sends the user to the checkout/cart step directly.

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

The `BuyButton` component intends to send the user to the checkout/cart step directly.

Example

Code

Buy Now

---

## Usage

### Import the component

`1

import { BuyButton } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/atoms/BuyButton/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-buy-button-text-color          | var(--fs-color-action-text)       |
| \--fs-buy-button-text-color-hover    | var(--fs-color-action-text)       |
| \--fs-buy-button-text-color-active   | var(--fs-color-action-text)       |
| \--fs-buy-button-bkg-color           | var(--fs-color-action-bkg)        |
| \--fs-buy-button-bkg-color-hover     | var(--fs-color-action-bkg-hover)  |
| \--fs-buy-button-bkg-color-active    | var(--fs-color-action-bkg-active) |
| \--fs-buy-button-border-color        | var(--fs-color-action-bkg)        |
| \--fs-buy-button-border-color-hover  | var(--fs-color-action-bkg-hover)  |
| \--fs-buy-button-border-color-active | var(--fs-color-action-bkg-active) |
| \--fs-buy-button-shadow-hover        | var(--fs-button-shadow-hover)     |

---

## Data attributes

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

`data-fs-buy-button`

This component inherits [Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button) CSS selectors and styles.

---

## Props

| Name             | Type                     | Description                                                                            | Default                                |    |                          |                             |                     |             |                                                     |
| ---------------- | ------------------------ | -------------------------------------------------------------------------------------- | -------------------------------------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | --------------------------------------------------- |
| **testId**       | string                   | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-buy-button                          |    |                          |                             |                     |             |                                                     |
| **variant**      | "primary" \| "secondary" | "tertiary"                                                                             | Specifies the component color variant. |    |                          |                             |                     |             |                                                     |
| **size**         | "small" \| "regular"     | Specifies the size variant.                                                            |                                        |    |                          |                             |                     |             |                                                     |
| **inverse**      | false \| true            | Defines the use of inverted colors.                                                    |                                        |    |                          |                             |                     |             |                                                     |
| **disabled**     | false \| true            | Specifies that this button should be disabled.                                         |                                        |    |                          |                             |                     |             |                                                     |
| **icon**         | string \| number         | false                                                                                | true                                   | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon. |
| **loading**      | false \| true            | Boolean that represents a loading state.                                               |                                        |    |                          |                             |                     |             |                                                     |
| **loadingLabel** | string                   | Specifies a label for loading state.                                                   |                                        |    |                          |                             |                     |             |                                                     |
| **iconPosition** | "left" \| "right"        | Specifies where the icon should be positioned                                          |                                        |    |                          |                             |                     |             |                                                     |

---

## Best Practices

### ✅ Do's

* Use this special Button only to send the user to the checkout/cart step directly. For general purposes, use the standard [Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button).

Contributors

3

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

[Breadcrumb« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button/docs/guides/faststore/molecules-breadcrumb)[CardNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button/docs/guides/faststore/molecules-card)

Contributors

3

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

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

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

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

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

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

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

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

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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

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 customizing your stores icons in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/troubleshooting)

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-styling)

[Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization)

[Contributing with new CSS Handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-contributing-with-new-css-handles)

[Customizing your store's icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons)

[Customizing your store’s typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-typography)

[Interactively inspecting storefront blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/how-to-interactively-inspect-blocks-on-a-store-framework-store)

[Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides)

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

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

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

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

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

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-styling)

[Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization)

[Contributing with new CSS Handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-contributing-with-new-css-handles)

[Customizing your store's icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons)

[Customizing your store’s typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-typography)

[Interactively inspecting storefront blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/how-to-interactively-inspect-blocks-on-a-store-framework-store)

[Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/store-framework-styling)

[Customizing your store's icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons)

Customizing your store's icons

The [VTEX Styleguide](https://read.calvincode.net/reader?url=https://styleguide.vtex.com) provides a [default iconography](https://read.calvincode.net/reader?url=https://styleguide.vtex.com/%23/Icons) used across all Store Framework components, which is implemented via the [Store Icons](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons) app.

While these icons are suitable for most stores, you can customize them to better align with your store's branding. Follow the steps below to override the default icons.

## Before you begin

Ensure that your Store Theme is using the [styles builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder) at version 1.8.1 or higher.

## Instructions

### Step 1 - Creating an icon pack

1. In your Store Theme, create a new folder named `iconpacks` within the `styles` folder.
2. Inside the `iconpacks` folder, create a file named `iconpack.svg`.
3. Copy the content of the [iconpack.svg](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/master/styles/iconpacks/iconpack.svg?short%5Fpath=62ebf4b) file and paste it into your `iconpack.svg` file.

### Step 2 - Customizing icons

The `iconpack.svg` file contains all the store's icons, with each icon having a unique `id` and grouped inside a `<g>` tag. These `id`s allow you to reference and modify individual icons.

Each icon is identified by an `id` within its `<g>` tag (e.g., `hpa-cart` for the cart icon). You can reference and modify a specific icon in the store’s code using its fragment identifierl, like `#hpa-cart`.

To customize an icon, find its corresponding `<g>` tag by `id` in the `iconpack.svg` file and adjust its content (shapes, paths, etc.). You don't need to recreate the entire icon — just modify the parts you want to change.

For example, to customize the cart icon (`hpa-cart`), you only need to modify the elements within its `<g>` tag:

styles/iconpacks/iconpack.svg

`1

<g id="hpa-cart">

2

 <path d="M15.0503 3.0002H4.92647C4.81221 3.00072 4.7012 2.96234 4.6118 2.89142C4.52239 2.8205 4.45996 2.72129 4.43483 2.6102L4.01342 0.800203C3.96651 0.570928 3.84041 0.365306 3.65708 0.219131C3.47375 0.0729566 3.24479 -0.00451449 3.01006 0.000203439H0.501677C0.368624 0.000203439 0.241021 0.0528819 0.146938 0.14665C0.0528551 0.240418 0 0.367595 0 0.500203L0 1.5002C0 1.63281 0.0528551 1.75999 0.146938 1.85376C0.241021 1.94753 0.368624 2.0002 0.501677 2.0002H1.80604C1.92077 1.9978 2.03274 2.03548 2.12253 2.10671C2.21232 2.17794 2.27429 2.27823 2.29768 2.3902L4.01342 10.2002C4.06032 10.4295 4.18642 10.6351 4.36975 10.7813C4.55308 10.9274 4.78204 11.0049 5.01677 11.0002H13.0436C13.2478 10.9891 13.4436 10.9161 13.605 10.791C13.7664 10.6659 13.8856 10.4947 13.9466 10.3002L15.9533 4.3002C15.9995 4.15468 16.0116 4.00057 15.9888 3.84965C15.9659 3.69874 15.9088 3.55504 15.8216 3.42956C15.7344 3.30408 15.6196 3.20015 15.4859 3.12573C15.3522 3.0513 15.2032 3.00837 15.0503 3.0002Z" fill="currentColor"/>

3

 <path d="M5.02682 16.0002C6.13509 16.0002 7.03353 15.1048 7.03353 14.0002C7.03353 12.8956 6.13509 12.0002 5.02682 12.0002C3.91855 12.0002 3.02011 12.8956 3.02011 14.0002C3.02011 15.1048 3.91855 16.0002 5.02682 16.0002Z" fill="currentColor"/>

4

 <path d="M13.0737 16.0002C14.182 16.0002 15.0804 15.1048 15.0804 14.0002C15.0804 12.8956 14.182 12.0002 13.0737 12.0002C11.9655 12.0002 11.067 12.8956 11.067 14.0002C11.067 15.1048 11.9655 16.0002 13.0737 16.0002Z" fill="currentColor"/>

5

</g>

`

> To find each icon’s unique `id`, refer to the [Icon Pack list](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-icons/blob/cbbb1b82bfca247a811d146b1e2cafb642db1928/docs/ICONPACK.md) This allows you to customize individual icons without affecting the entire icon set.

### Step 3 - Applying your changes

Once you've made the desired changes, [link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) your app to see the updated icons reflected in the store.

![{"base64":"  ","img":{"width":164,"height":90,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":4130,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-customizing-your-stores-icons-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-customizing-your-stores-icons-2.png)

> If the changes don't appear after linking, ensure the `styles` builder version is 1.8.1 or higher.

## Best practices

* Icons should not exceed `20x20` pixels.
* Each [workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) can only have one app installed that includes `iconpack` customizations.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/styling-your-store/vtex-io-documentation-customizing-your-stores-icons.md)

[Contributing with new CSS Handles« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons//docs/guides/vtex-io-documentation-contributing-with-new-css-handles)[Customizing your store’s typographyNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons//docs/guides/vtex-io-documentation-customizing-your-stores-typography)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23instructions)

[Step 1 - Creating an icon pack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23step-1-creating-an-icon-pack)[Step 2 - Customizing icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23step-2-customizing-icons)[Step 3 - Applying your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23step-3-applying-your-changes)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23best-practices)

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/Storefront-Guides/styling-your-store/vtex-io-documentation-customizing-your-stores-icons.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23instructions)

[Step 1 - Creating an icon pack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23step-1-creating-an-icon-pack)[Step 2 - Customizing icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23step-2-customizing-icons)[Step 3 - Applying your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23step-3-applying-your-changes)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-icons/docs/guides/vtex-io-documentation-customizing-your-stores-icons%23best-practices)

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 external marketplace update order status 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/external-marketplace-update-order-status/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-guide)

[Marketplace / Seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-architecture)

[Store setup for VTEX Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-vtex-seller-setup)

[Creating an integration app from a Template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-app-template)

[Catalog Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-catalog)

[Catalog logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-logs)

[Get product list for an initial load](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-product-load)

[How to get a new product to offer in the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-new-products)

[How to get product updates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-product-updates)

[Product and Category Mappings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-catalog-mapping)

[How to keep prices updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-price-update)

[How to keep stock updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-stock-update)

[Order Integration overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-orders)

[Recommendations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-recommendations)

[New Order Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-collect-orders)

[Update Order Status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status)

[How to validate if items are available for delivery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-delivery-validation)

[Sending invoice and tracking code to the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-invoice-tracking)

[How to update a canceled order’s status in VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-canceled-orders)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/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/external-marketplace-update-order-status/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-guide)

[Marketplace / Seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-architecture)

[Store setup for VTEX Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-vtex-seller-setup)

[Creating an integration app from a Template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-app-template)

[Catalog Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-catalog)

[Catalog logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-logs)

[Get product list for an initial load](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-product-load)

[How to get a new product to offer in the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-new-products)

[How to get product updates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-product-updates)

[Product and Category Mappings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-catalog-mapping)

[How to keep prices updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-price-update)

[How to keep stock updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-stock-update)

[Order Integration overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-orders)

[Recommendations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-recommendations)

[New Order Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-collect-orders)

[Update Order Status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status)

[How to validate if items are available for delivery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-delivery-validation)

[Sending invoice and tracking code to the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-invoice-tracking)

[How to update a canceled order’s status in VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-canceled-orders)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/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/external-marketplace-update-order-status/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides)

Integration Guides

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-integration-guide)

[Update Order Status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status)

Update Order Status

> If you used our previous method for integrating orders, you can still find their documentation in [Order Logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/deprecated-order-logs) and [How to collect orders from sales channels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/deprecated-how-to-collect-orders-from-sales-channels). The previous method, however, will not be maintained. If you are integrating orders for the first time, we recommend you use the instructions in this article.

The order flow describes the status, possibilities, and actions throughout the life cycle of an order. With the flow, retailers can also track the mapped order status on the platform. Learn more in [Order flow and status](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/order-flow-and-status--tutorials%5F196%23order-status-details).

It’s important to note that when sending a request to update the order status, if the order is not currently in the correct status at VTEX to advance to the requested one, an error will be returned. That means that the connector has to manage when a status should be updated or not. For example:

* If the order is in the `waiting-for-manual-authorization` status at VTEX, that means the order has a price divergence, and we need to wait for the seller to either reject this order (cancel) or authorize it. Sending an order approval while the order is in this status will fail (with a code `EOI011`) since the seller hasn’t authorized the integration of the order yet.
* In this case, it’s recommended for the connector to try to approve the order at a later time, after receiving the error from Channel Order API, and keep trying until the seller takes action and the status change.
* Another option is to use [Order hooks and feeds](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orders-feed) from our OMS VTEX module. That way the connector can know when the order status was updated and the approval can be sent.

## API Reference: Update order status

Use the request example below to update the status of an order. The description and requirement of each of the fields present in the request body are found in our [Update Order Status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/marketplace-protocol-external-marketplace-orders%23put-/api/order-integration/orders/status) API Reference.

### Request body

`1

{

2

 "marketplaceOrderId": string,

3

 "connectorName": string,

4

 "connectorEndpoint": string,

5

 "marketplaceOrderStatus": string

6

}

`

### Order Notification Results

* **Error**
   * EOI000 - Unknown error
   * EOI001 - Unmapped error
   * EOI008 - Cannot approve an order that is not integrated yet
   * EOI009 - Order out of valid status to approve
* **Success**
   * SOI002 - Order approved

### Response

`1

{

2

 "marketplaceOrderId": "123456789",

3

 "accountName": null,

4

 "code": "SOI003",

5

 "flow": "ApproveOrder",

6

 "success": true,

7

 "operationId": null,

8

 "errors": null,

9

 "fields": null,

10

 "message": "Order successfully enqueued"

11

}

`

### Notification

`1

{

2

 "marketplaceOrderId": "123456789",

3

 "accountName": "connections",

4

 "code": "SOI002",

5

 "flow": "ApproveOrder",

6

 "success": true,

7

 "operationId": "ca254d31-c547-4693-9532-72e060264a88",

8

 "errors": null,

9

 "fields": {

10

 "mainOrderId": "MKP-123456789",

11

 "franchiseOrderId": null

12

 },

13

 "message": "Order approved successfully"

14

}

`

Contributors

2

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

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

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/Integration-Guides/external-marketplace-integration-guide/external-marketplace-update-order-status.md)

[New Order Integration« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status//docs/guides/external-marketplace-integration-collect-orders)[How to validate if items are available for deliveryNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status//docs/guides/external-marketplace-integration-delivery-validation)

Contributors

2

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

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

ON THIS PAGE

[API Reference: Update order status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23api-reference-update-order-status)

[Request body](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23request-body)[Order Notification Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23order-notification-results)[Response](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23response)[Notification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23notification)

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/Integration-Guides/external-marketplace-integration-guide/external-marketplace-update-order-status.md)

Copy page

On this page

ON THIS PAGE

[API Reference: Update order status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23api-reference-update-order-status)

[Request body](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23request-body)[Order Notification Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23order-notification-results)[Response](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23response)[Notification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-update-order-status/docs/guides/external-marketplace-update-order-status%23notification)

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