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

[User] Explain the VTEX api reference delivery promise notification api API and how to use it.

[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/api-reference/delivery-promise-notification-api/docs/guides)

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

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

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/storefront-development)

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

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

API Reference

Filter By

Post

Get

Put

Delete

Patch

[Anti-fraud Provider API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/antifraud-provider-protocol/)

---

[Audience API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/audience-api/)

---

[Buyer organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/buyer-organizations/)

---

[Budgets API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/budgets-api/)

---

[Legacy CMS Portal API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/legacy-cms-portal-api/)

---

[Card Token Vault API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/card-token-vault-api/)

---

[Catalog API - Seller Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/catalog-api-seller-portal/)

---

[Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/catalog-api/)

---

[Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/checkout-api/)

---

[Customer Credit API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/customer-credit-api/)

---

[Delivery Promise Notification API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/delivery-promise-notification-api/)

Delivery Promise

---

[GiftCard API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/giftcard-api/)

---

[Giftcard Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/giftcard-provider-protocol/)

---

[GiftCard Hub API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/giftcard-hub-api/)

---

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/headless-cms-api/)

---

[Intelligent Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/intelligent-search-api/)

---

[Intelligent Search Events API - Headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/intelligent-search-events-api-headless/)

---

[License Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/license-manager-api/)

---

[Logistics API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/logistics-api/)

---

[Marketplace API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/marketplace-apis/)

---

[Marketplace Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/marketplace-protocol/)

---

[Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/master-data-api-v2/)

---

[Master Data API - v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/masterdata-api/)

---

[Message Center API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/message-center-api/)

---

[mTLS API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/mtls-api/)

---

[Operational Capacity API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/operational-capacity-api/)

---

[Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/orders-api/)

---

[Organization Units API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/organization-units-api/)

---

[Payment Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/payment-provider-protocol/)

---

[Payments Gateway API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/payments-gateway-api/)

---

[Pick and Pack API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pick-and-pack-api/)

---

[Pick and Pack Last Mile Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pick-and-pack-protocol-api/)

---

[Pick and Pack Order Changes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pick-and-pack-order-changes-api/)

---

[Policies System API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/policies-system-api/)

---

[Pricing API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pricing-api/)

---

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pricing-hub/)

---

[Promotions & Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/promotions-and-taxes-api/)

---

[Promotions & Taxes API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/promotions-and-taxes-api-v2/)

---

[Punchout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/punchout-api/)

---

[Reviews and Ratings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/reviews-and-ratings-api/)

---

[Recommendations BFF API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/recommendations-bff-api/)

---

[SKU Bindings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/sku-bindings-api/)

---

[Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/search-api/)

---

[Session Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/session-manager-api/)

---

[SSL Certificates API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/ssl-certificates-api/)

---

[Storefront Permissions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/storefront-permissions-api/)

---

[Subscriptions API (v3)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/subscriptions-api-v3/)

---

[VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-ads-api/)

---

[VTEX Shipping Network API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-shipping-network-api/)

---

[VTEX Tracking APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/tracking/)

---

[VTEX DO API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-do-api/)

---

[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-id-api/)

---

[Profile System (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/profile-system/)

---

[Orders API - PII Data Architecture (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/orders-api-pii-version/)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/guides)

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

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/updates/release-notes)

API Reference

Filter By

Post

Get

Put

Delete

Patch

[Anti-fraud Provider API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/antifraud-provider-protocol/)

---

[Audience API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/audience-api/)

---

[Buyer organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/buyer-organizations/)

---

[Budgets API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/budgets-api/)

---

[Legacy CMS Portal API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/legacy-cms-portal-api/)

---

[Card Token Vault API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/card-token-vault-api/)

---

[Catalog API - Seller Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/catalog-api-seller-portal/)

---

[Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/catalog-api/)

---

[Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/checkout-api/)

---

[Customer Credit API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/customer-credit-api/)

---

[Delivery Promise Notification API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/delivery-promise-notification-api/)

Delivery Promise

---

[GiftCard API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/giftcard-api/)

---

[Giftcard Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/giftcard-provider-protocol/)

---

[GiftCard Hub API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/giftcard-hub-api/)

---

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/headless-cms-api/)

---

[Intelligent Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/intelligent-search-api/)

---

[Intelligent Search Events API - Headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/intelligent-search-events-api-headless/)

---

[License Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/license-manager-api/)

---

[Logistics API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/logistics-api/)

---

[Marketplace API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/marketplace-apis/)

---

[Marketplace Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/marketplace-protocol/)

---

[Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/master-data-api-v2/)

---

[Master Data API - v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/masterdata-api/)

---

[Message Center API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/message-center-api/)

---

[mTLS API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/mtls-api/)

---

[Operational Capacity API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/operational-capacity-api/)

---

[Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/orders-api/)

---

[Organization Units API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/organization-units-api/)

---

[Payment Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/payment-provider-protocol/)

---

[Payments Gateway API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/payments-gateway-api/)

---

[Pick and Pack API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pick-and-pack-api/)

---

[Pick and Pack Last Mile Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pick-and-pack-protocol-api/)

---

[Pick and Pack Order Changes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pick-and-pack-order-changes-api/)

---

[Policies System API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/policies-system-api/)

---

[Pricing API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pricing-api/)

---

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/pricing-hub/)

---

[Promotions & Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/promotions-and-taxes-api/)

---

[Promotions & Taxes API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/promotions-and-taxes-api-v2/)

---

[Punchout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/punchout-api/)

---

[Reviews and Ratings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/reviews-and-ratings-api/)

---

[Recommendations BFF API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/recommendations-bff-api/)

---

[SKU Bindings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/sku-bindings-api/)

---

[Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/search-api/)

---

[Session Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/session-manager-api/)

---

[SSL Certificates API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/ssl-certificates-api/)

---

[Storefront Permissions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/storefront-permissions-api/)

---

[Subscriptions API (v3)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/subscriptions-api-v3/)

---

[VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-ads-api/)

---

[VTEX Shipping Network API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-shipping-network-api/)

---

[VTEX Tracking APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/tracking/)

---

[VTEX DO API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-do-api/)

---

[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/vtex-id-api/)

---

[Profile System (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/profile-system/)

---

[Orders API - PII Data Architecture (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/orders-api-pii-version/)

---

[PuCreate or change store configuration« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/customer-credit-api%23put-/api/creditcontrol/storeconfig)[PuUpdate external product availabilityNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/delivery-promise-notification-api/docs/api-reference/delivery-promise-notification-api%23put-/delivery-promises/external-sellers/-sellerId-/products)

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


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

[User] Provide a guide on guides faststore overrides components and props v1 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/overrides-components-and-props-v1/docs/guides)

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/headless-cms-overview)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/styling-overview)

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

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-overview)

[Overriding native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-component-props)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-native-component)

[Overriding section styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-section-styles)

[\`getOverriddenSection\` function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-getoverriddensection-function)

[Syncing components with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

[Migrating Overrides v1 to v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-migrating-v1-to-v2)

[Overriding native components and props (v1)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/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/overrides-components-and-props-v1/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/overrides-components-and-props-v1/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/headless-cms-overview)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/styling-overview)

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

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-overview)

[Overriding native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-component-props)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-native-component)

[Overriding section styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-section-styles)

[\`getOverriddenSection\` function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-getoverriddensection-function)

[Syncing components with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

[Migrating Overrides v1 to v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-migrating-v1-to-v2)

[Overriding native components and props (v1)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/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/overrides-components-and-props-v1/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/overrides-components-and-props-v1/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-overview)

Overriding native components and props (v1)

> This guide is for stores using Section overrides v1\. For instructions on how to use Section overrides v2, refer to the [Section overrides v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview)

In this guide, you will learn how to modify a component's behavior using additional properties in your store code and create new components by overriding their native equivalents.

These features are useful when you need a customized behavior for a specific component not available in the [FastStore native options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections).

> We highly recommend considering [overriding props](#override-native-components-props) or utilizing the [theming tools](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-components) provided by `@faststore/core` to achieve the desired behavior. Overriding a component inside a section will compromise the existing integration developed in [@faststore/core](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-overview%23faststorecore) by losing updates for that component.

## Before you begin

### Ensure you have a functioning FastStore project

Make sure you have a functioning FastStore project after following the [FastStore onboarding](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview) and [setting up the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-setting-up-the-project).

### Check the version compatibility of your `faststore/core` package

This feature is available for stores using `@faststore/core` 2.1.36 version and above.

### Choose a native section and the component you want to customize

The [@faststore/core](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-overview%23faststorecore) package provides a set of native sections, each consisting of different components with unique functionalities. Refer to the [List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections%23faststore-native-sections) to explore available native sections.

### Consider two aspects of this feature

Keep in mind the following aspects when using this feature:

* **This feature is experimental**: The feature may not function as expected.
* **Some sections contain multiple instances of the same component**: When overriding a component or passing additional props to it, consider that all instances will be affected by this change.

---

## Override native component's props

Overriding props allows you to customize a component's behavior while preserving its native integration. This approach is useful when you want to modify specific aspects of a native component.

All component customizations in FastStore are performed within a section, and to override props, you need to choose the desired native section and component from the [List of available native sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections%23faststore-native-sections).

For this guide, we'll use the [BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button%23props) component to make the customization.

Here's how the initial component looks like with the `size` prop set as `regular` in the PDP (Product Details Page):

![{"base64":"  ","img":{"width":2858,"height":1582,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3012700,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-pdp-buy-button-initial___a4b7ae9d88ed888da5649b2b6cc1eecd.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/overrides-pdp-buy-button-initial___a4b7ae9d88ed888da5649b2b6cc1eecd.png)

### Instructions

#### Step 1 - Setting up the `overrides` folder

1. After choosing a native section to be customized from the [list of available native sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections), open your FastStore project in any code editor of your preference.
2. Go to the `src` folder, create the `components` folder and inside it, create the `overrides` folder. You can run the following command to create them:

macOS and Linux

Windows

`1

mkdir src/components src/components/overrides

`

1. Inside the `overrides` folder, create a new file named after the chosen native section. For example, if you chose the `ProductDetails` section for customization, create a new file named `ProductDetails.tsx` under the `src/components/overrides` directory.

macOS and Linux

Windows

`1

touch src/components/overrides/ProductDetails.tsx

`

1. Copy and paste the following code snippet into the file:

`1

import { SectionOverride } from '@faststore/core'

2

3

const SECTION = 'ProductDetails' as const

4

5

const override: SectionOverride = {

6

 section: SECTION,

7

 components: {}

8

}

9

10

export { override }

`

> Change the value of the `SECTION` variable to the name of the section you want to override. In the given example, we set the `SECTION` variable to `ProductDetails` to override this specific section.

1. Save your changes.

#### Step 2 - Setting up the override

1. Open the `ProductDetails.tsx` file created in the [Setting up the overrides folder step](#step-1-setting-up-the-overrides-folder) and add the following code:

{8-9}

`1

import { SectionOverride } from '@faststore/core'

2

3

const SECTION = 'ProductDetails' as const

4

5

const override: SectionOverride = {

6

 section: SECTION,

7

 components: {

8

 BuyButton: { props: { size: 'small', iconPosition: 'right' } },

9

 },

10

}

11

12

export { override }

`

This code overrides the `BuyButton` props `size` and `iconPosition`. You'll see a smaller button than the initial one and the cart icon positioned on the right side.

1. Run `yarn dev` in the terminal to start the development server. Access the provided localhost URL in your browser and go to the product details page to see the updated `BuyButton` component:

![{"base64":"  ","img":{"width":2864,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3431632,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-pdp-buy-button-props___898b016bd82c908b5b24c8822be6789a.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/overrides-pdp-buy-button-props___898b016bd82c908b5b24c8822be6789a.png)

> Remember: props changed via Headless CMS overlap the changes made through [override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props%23override-native-components-props). For example, if you change a prop through override and also change it using Headless CMS, the final prop's value will be the one added using CMS.

---

## Overriding a native component

Now that you know how to [override a component's prop](#override-native-components-props), learn how to override a native component to use a custom component.

For example, you may want to replace the current `BuyButton` component from the `ProductDetails` section to meet your business needs.

Currently, when the `BuyButton` is clicked, it opens the `CartSideBar` as its default behavior:

![{"base64":"  ","img":{"width":1435,"height":778,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1562201,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-open-cart___a5853a88238fa31610a93e8a1333bb00.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-open-cart___a5853a88238fa31610a93e8a1333bb00.gif)

For this guide, we will create a custom Buy Button that, once you click on it, displays an `alert` for the customer and the custom Product Title.

### `BuyButton`

#### Step 1 - Create your custom component

1. Inside the `components` folder, create a file named `CustomBuyButton.tsx`. _If you haven't created the `components` folder yet, see the [Setting up the overrides folder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props%23step-1---setting-up-the-overrides-folder) step._

macOS and Linux

Windows

`1

touch src/components/CustomBuyButton.tsx

`

> When creating a custom component, it's important to choose a name that distinguishes it from the native component. For example, `Custom{ComponentName}` \= `CustomBuyButton`.

1. Add the following code into `CustomBuyButton.tsx` file:

CustomBuyButton.tsx

`1

import React from 'react'

2

import { Button as UIButton } from '@faststore/ui'

3

4

export function CustomBuyButton() {

5

 return (

6

 <UIButton

7

 variant="primary"

8

 onClick={() => {

9

 alert('Hello User!')

10

 }}

11

 >

12

 New Buy Button

13

 </UIButton>

14

 )

15

}

`

The provided code imports the [Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button) component from the [@faststore/ui](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/) package. The code defines the `CustomBuyButton` component that displays an alert message when clicked based on the behavior we want. However, you have the flexibility to customize the component to achieve a different behavior if needed.

#### Step 2 - Overriding the component

1. Choose a component to override from the [list of overridable components of each native section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections). In this example, we are overriding the `BuyButton` component in the `ProductDetails` section.
2. Navigate to `src/components/overrides` that we've created [before](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props%23step-1---setting-up-the-overrides-folder).
3. Open the `ProductDetails.tsx` file and update it with the following code:

ProductDetails.tsx

`1

import { SectionOverride } from '@faststore/core'

2

import { CustomBuyButton } from '../CustomBuyButton'

3

4

const SECTION = 'ProductDetails' as const

5

6

const override: SectionOverride = {

7

 section: SECTION,

8

 components: {

9

 BuyButton: { Component: CustomBuyButton },

10

 },

11

}

12

13

export { override }

`

1. Run `yarn dev` in the terminal to start the development server. Access the provided localhost URL in your browser. Navigate to the product details page, you should see the CustomBuyButton component in place of the previous BuyButton component.

![{"base64":"  ","img":{"width":1432,"height":788,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":928448,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-open-alert___b62f8cb5f3f98f6bd0f5502081de6a9b.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-open-alert___b62f8cb5f3f98f6bd0f5502081de6a9b.gif)

By using your custom component, you may need to customize it from scratch. See [Customizing a New Component when using Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-components%23customizing-a-new-component-when-using-override) guide for more details about styling it.

### `Product Title`

1. After [Setting up the overrides folder](#step-1-setting-up-the-overrides-folder), inside the `components` folder, create the `CustomProductTitle.tsx` file.
2. Add the following to the file:

`1

import React from 'react'

2

import { ProductTitle, Tag } from '@faststore/ui'

3

4

5

export default function CustomProductTitle() {

6

 return (

7

 <section>

8

 <ProductTitle title={<h1>New headphones</h1>} />

9

 <Tag variant="warning" label="On sale" onClose={() => {}} />

10

 </section>

11

 )

12

}

`

This code creates a custom `ProductTitle` component displaying the product title and a tag indicating that the product is on sale.

1. In the `overrides` folder, create the `ProductDetails.tsx` file.
2. Add the following code to the `ProductDetails.tsx` file to render the new `CustomProductTitle` component.

`1

import { SectionOverride } from '@faststore/core'

2

3

import CustomProductTitle from '../CustomProductTitle'

4

5

const SECTION = 'ProductDetails' as const

6

7

const override: SectionOverride = {

8

 section: SECTION,

9

 components: {

10

 ProductTitle: { Component: CustomProductTitle },

11

 },

12

}

13

14

export { override }

`

1. Run `yarn dev` in the terminal to start the development server and access the provided localhost URL in your browser.

---

## Overriding components while maintaining default configuration

In specific scenarios, when you want to keep the default integration or component configuration partially, you can use prior integrations within your custom component.

> Note that this will only work if your custom component's props are compatible with the overriding component. We encourage using [FastStore UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/) to leverage existing features, basic styles, and better props compatibility.

Building upon our previous example, we could pass the `BuyButton` props to our new component. This approach allows us to incorporate the icon and cart sidebar integration while introducing additional functionality to the `onClick` function, such as triggering an alert or sending an event to analytics.

CustomBuyButton.tsx

`1

import React from 'react'

2

import { Button as UIButton, ButtonProps } from '@faststore/ui'

3

4

export function CustomBuyButton(props: ButtonProps) {

5

 return (

6

 <UIButton

7

 {...props}

8

 variant="primary"

9

 onClick={(event) => {

10

 alert('You will love this product!')

11

 props.onClick?.(event)

12

 }}

13

 >

14

 New Buy Button

15

 </UIButton>

16

 )

17

}

`

![{"base64":"  ","img":{"width":1436,"height":789,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":923029,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-extra___324292e9c8c20cf10f515876a9b33ed1.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-extra___324292e9c8c20cf10f515876a9b33ed1.gif)

In this example, when clicked, the `CustomBuyButton` component will display an alert message and then open the `CartSideBar`, keeping its default behavior.

This feature can open up numerous possibilities for exploration and customization in your store. Happy exploring! 🎉

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/overrides/components-and-props-v1.mdx)

[Migrating Overrides v1 to v2« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-migrating-v1-to-v2)[Section override - Use casesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/override-use-cases-overview)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23before-you-begin)

[Ensure you have a functioning FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23ensure-you-have-a-functioning-faststore-project)[Check the version compatibility of your faststore/core package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23check-the-version-compatibility-of-your-faststorecore-package)[Choose a native section and the component you want to customize](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23choose-a-native-section-and-the-component-you-want-to-customize)[Consider two aspects of this feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23consider-two-aspects-of-this-feature)

[Override native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23override-native-components-props)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23instructions)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23overriding-a-native-component)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23buybutton)[Product Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23product-title)

[Overriding components while maintaining default configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23overriding-components-while-maintaining-default-configuration)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/overrides/components-and-props-v1.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23before-you-begin)

[Ensure you have a functioning FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23ensure-you-have-a-functioning-faststore-project)[Check the version compatibility of your faststore/core package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23check-the-version-compatibility-of-your-faststorecore-package)[Choose a native section and the component you want to customize](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23choose-a-native-section-and-the-component-you-want-to-customize)[Consider two aspects of this feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23consider-two-aspects-of-this-feature)

[Override native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23override-native-components-props)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23instructions)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23overriding-a-native-component)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23buybutton)[Product Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23product-title)

[Overriding components while maintaining default configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1/docs/guides/faststore/overrides-components-and-props-v1%23overriding-components-while-maintaining-default-configuration)

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 adding a second address to the order 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/adding-a-second-address-to-the-order/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/master-data)

---

Payments

---

Orders

[Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/orders-feed)

[Order modifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/order-modifications)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/order-canceling-improvements)

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/actions-orders)

[Fetching marketplace information with the Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/get-marketplace-data-orders-api)

[Fetching payment details from a Mercado Libre order with Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/get-payment-data-mercado-libre-orders-api)

[Formatting order invoicing time via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/formatting-order-invoicing-time)

[Using VTEX Admin filters on orders via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/using-orders-management-filters-in-api)

[Adding a second address for invoicing an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order)

Subscriptions

---

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/adding-a-second-address-to-the-order/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/master-data)

---

Payments

---

Orders

[Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/orders-feed)

[Order modifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/order-modifications)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/order-canceling-improvements)

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/actions-orders)

[Fetching marketplace information with the Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/get-marketplace-data-orders-api)

[Fetching payment details from a Mercado Libre order with Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/get-payment-data-mercado-libre-orders-api)

[Formatting order invoicing time via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/formatting-order-invoicing-time)

[Using VTEX Admin filters on orders via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/using-orders-management-filters-in-api)

[Adding a second address for invoicing an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order)

Subscriptions

---

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/adding-a-second-address-to-the-order/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides)

Orders

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/actions-orders)

[Adding a second address for invoicing an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order)

Adding a second address for invoicing an order

For B2B businesses, it is common to add to the invoice an address that is different from the one registered for delivery, since the location where the product will be received is often different from the billing address.

VTEX Admin allows you to add a second address only in the case of [Pickup Points](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/pickup-points--2fljn6wLjn8M4lJHA6HP3R) because there will be only one address for the invoice. For other cases, adding a second address must be done via API, using the [orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields) object.

The `orderForm` is the main object processed by VTEX Checkout, and one of the most important data structures in VTEX stores' architecture.

There are two ways to manipulate data from the `orderForm` to enter a second address:

* Using the vtex.js library
* Through API REST

> Although it is possible to create a custom interface superimposed on that of VTEX containing the second address field, we do not recommend it, because it increases the chances of errors in order management.

## vtex.js

The vtex.js is a library of JavaScript functions that will do the API requests. The function used for this is the `sendAttachment`. Fore more information, see the [specific library documentation](https://read.calvincode.net/reader?url=https://github.com/vtex/vtex.js/tree/master/docs/checkout%23sendattachmentattachmentid-attachment-expectedorderformsections).

## API REST

To add a second address to an order via API, make a POST request to the endpoint below:

`/api/checkout/pub/orderForm/{{orderFormId}}/attachments/invoiceData`

The `{{orderFormId}}` value must be replaced by the ID of the orderForm that you want to manipulate.

In the `orderForm` object there is the object` invoiceData`, which contains information about the order's invoice and contains the field `address`. This field must be set with the second address you wish to add. The request body looks like the example below:

`1

{

2

 "address": {

3

 "postalCode": "22250-040",

4

 "city": "Rio de Janeiro",

5

 "state": "RJ",

6

 "country": "BRA",

7

 "street": "Praia Botafogo",

8

 "number": "300",

9

 "neighborhood": "Botafogo",

10

 "complement": null,

11

 "reference": null,

12

 "geoCoordinates": [

13

 -43.18218231201172,

14

 -22.94549560546875

15

 ]

16

 }

17

}

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/_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/Orders/actions-orders/adding-a-second-address-to-the-order.md)

[Using VTEX Admin filters on orders via API« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order//docs/guides/using-orders-management-filters-in-api)[Enabling Manual Prices for Subscriptions v3Next »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order//docs/guides/enabling-manual-prices-for-subscriptions-v3)

Contributors

1

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

ON THIS PAGE

[vtex.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order%23vtexjs)

[API REST](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order%23api-rest)

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/Orders/actions-orders/adding-a-second-address-to-the-order.md)

Copy page

On this page

ON THIS PAGE

[vtex.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order%23vtexjs)

[API REST](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-a-second-address-to-the-order/docs/guides/adding-a-second-address-to-the-order%23api-rest)

On this page

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


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

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

[Assistant]
Documentation

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

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

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-availabilitysubscriber/docs/api-reference)

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

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-availabilitysubscriber/docs/storefront-development)

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-availabilitysubscriber/docs/troubleshooting)

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

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

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

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

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

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

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

---

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

Availability Subscriber

The `availability-subscriber` component shows the availability subscriber form displayed when a product isn't available. This component can be imported and used by any VTEX App.

![{"base64":"  ","img":{"width":1650,"height":612,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":220954,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-availabilitysubscriber-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-availabilitysubscriber-0.png)

This component only collects the emails of the customers that subscribed to receive updates about a specific out-of-stock product. It does not email shoppers automatically when the product gets back in stock.

> Alternatively, check the [Availability Notify component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-availability-notify), which renders a subscription form when a product is unavailable and also emails the shopper when the requested product is back in stock.

## Before you begin

Before configuring the Availability Subscriber component in your theme, make sure you've already configured a **JSON schema in Master Data** to collect the emails correctly. Otherwise, the subscriber form won't be properly saved with the shoppers' emails. Please refer to the [Creating a product availability form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-product-availability-form) guide for more information.

## Configuration

1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `availability-subscriber` block as a child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

+ "availability-subscriber”

4

 ]

5

 }

`

The Availability Subscriber component does not have any props. Hence, once added to your Product Details Page template, the Availability Subscriber component is ready for use.

### Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the blocks available within `AvailabilitySubscriber` and describes if they are mandatory or optional.

`1

 "availability-subscriber": {

2

 "component": "AvailabilitySubscriber"

3

 }

`

For now this block does not have any mandatory or optional blocks.

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles         |
| ------------------- |
| content             |
| error               |
| form                |
| input               |
| inputEmail          |
| inputName           |
| submit              |
| subscriberContainer |
| subscribeLabel      |
| success             |
| title               |

Contributors

1

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

Was this helpful?

Yes

No

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

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-availabilitysubscriber/_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-store-components-availabilitysubscriber/docs/guides/vtex-store-components-availabilitysubscriber%23before-you-begin)

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

[Blocks API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-availabilitysubscriber/docs/guides/vtex-store-components-availabilitysubscriber%23blocks-api)

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-components/vtex-store-components-availabilitysubscriber.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-store-components-availabilitysubscriber/docs/guides/vtex-store-components-availabilitysubscriber%23before-you-begin)

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

[Blocks API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-availabilitysubscriber/docs/guides/vtex-store-components-availabilitysubscriber%23blocks-api)

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

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