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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Card

Displays products, messages, or store information.

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

A basic card that divides the content into a header and body, making it ideal for showcasing products, messages, or any other store information.

Example

Code

Card with Icon

#  Message

---

## Usage

### Import the component

`1

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

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/molecules/Card/styles.scss";

`

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

---

## Examples

Example

Code

Card with Icon

#  First Product

---

#  Second Product

Example

Code

Card without Icon

#  Message

---

## Design tokens

| Local token                   | Default value/Global token linked |
| ----------------------------- | --------------------------------- |
| \--fs-card-border-radius      | var(--fs-border-radius)           |
| \--fs-card-border-width       | var(--fs-border-width)            |
| \--fs-card-border-color       | var(--fs-border-color-light)      |
| \--fs-card-header-padding     | var(--fs-spacing-3)               |
| \--fs-card-header-bkg-color   | var(--fs-color-neutral-bkg)       |
| \--fs-card-header-font-weight | var(--fs-text-weight-bold)        |
| \--fs-card-header-icon-color  | var(--fs-color-main-2)            |
| \--fs-card-body-padding       | var(--fs-spacing-3)               |

---

## Data attributes

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

* `data-fs-card`
* `data-fs-card-header`
* `data-fs-card-title`
* `data-fs-card-body`

---

## Props

| Name           | Type       | Description                                                                            | Default |
| -------------- | ---------- | -------------------------------------------------------------------------------------- | ------- |
| **title\***    | string     | Specifies the text to be loaded into the header.                                       |         |
| **testId**     | string     | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-card |
| **maxWidth**   | string     | Specifies the card max width.                                                          |         |
| **iconName**   | string     | Specifies what icon to use following the FastStore Icon sheet.                         |         |
| **iconAction** | () => void | Function that should be executed when the icon is clicked                              |         |

Contributors

2

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

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

Contributors

2

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

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

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

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

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

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

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

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

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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 add customer profile information to the cart 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/add-customer-profile-information-to-the-cart/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Getting a customer profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/getting-a-customer-profile-by-email)

[Adding customer profile information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart)

[Add shipping address and select delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-shipping-address-and-delivery-option-to-the-cart)

[Adding customer preferences to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-preferences-to-the-cart)

[Adding marketing information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-marketing-information-to-the-cart)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-cart-items)

[Adding payment information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/adding-payment-information-to-the-cart)

[Adding merchant context information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-merchant-context-information-to-the-cart)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/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/add-customer-profile-information-to-the-cart/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Getting a customer profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/getting-a-customer-profile-by-email)

[Adding customer profile information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart)

[Add shipping address and select delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-shipping-address-and-delivery-option-to-the-cart)

[Adding customer preferences to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-preferences-to-the-cart)

[Adding marketing information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-marketing-information-to-the-cart)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-cart-items)

[Adding payment information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/adding-payment-information-to-the-cart)

[Adding merchant context information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-merchant-context-information-to-the-cart)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/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/add-customer-profile-information-to-the-cart/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/checkout-api-overview)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Adding customer profile information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart)

Adding customer profile information to the cart

The shopping cart gathers information on the products the customer chooses while browsing a store, such as prices, shipping costs, payment methods, delivery methods, etc. This data may include item prices, shipping value, payment, and delivery methods, among others.

This guide will describe how to add customer profile information to the shopping cart via API.

## Getting shopping cart information

The first step is to get the `orderFormId` of the shopping cart to which you want to add the customer preferences information. For more information, read the [Getting cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-cart-information-by-id) guide.

## Adding customer profile information to the shopping cart

To add customer profile information to the shopping cart, use the [Add client profile](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/attachments/clientProfileData) endpoint. In this request, you must send the `orderFormId` through the URL address, as shown in the example below:

`https://{accountName}.{environment.com.br}/api/checkout/pub/orderForm/ede846222cd44046ba6c638442c3505a/attachments/clientProfileData`

Additionally, you need to send the request body containing the following customer information:

* **Required**:
   * `email`: Customer email address.
   * `firstName`: Customer first name.
   * `lastName`: Customer last name.
   * `documentType`: Type of document provided by the customer (e.g., CPF in Brazil, SSN in the U.S.).
   * `document`: Document number provided by the customer.
* **Recommended (optional)**:
   * `phone`: Customer phone number.
* **If the client is a legal entity**:
   * `corporateName`: Company name.
   * `tradeName`: Trade name.
   * `corporateDocument`: Corporate document.
   * `stateInscription`: State document number.
   * `corporatePhone`: Business phone number.
   * `isCorporate`: `True`.

After sending the request, the endpoint will return the response body containing the client information in the shopping cart, as in the example below:

`1

...

2

"clientProfileData": {

3

 "email": "customer@examplemail.com",

4

 "firstName": "first-name",

5

 "lastName": "last-name",

6

 "document": "123456789",

7

 "documentType": "cpf",

8

 "phone": "+55110988887777",

9

 "corporateName": "company-name",

10

 "tradeName": "trade-name",

11

 "corporateDocument": "12345678000100",

12

 "stateInscription": "12345678",

13

 "corporatePhone": "+551100988887777",

14

 "isCorporate": false,

15

 "profileCompleteOnLoading": false,

16

 "profileErrorOnLoading": false,

17

 "customerClass": null

18

 }

19

...

`

>  For more information on each field available in the shopping cart, see the [orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields) overview.

## Error codes

The following errors may appear as a message in the response body.

### 400 - Bad Request

* **Message error example (code ORD002)**: `"Invalid order form"`. The `orderFormId` information is not valid.

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "ORD002",

5

 "message": "Invalid order form",

6

 "exception": null

7

 },

8

 "operationId": "5d9f54e6-7db4-46d6-bca9-deeb278b8b98"

9

}

`

* **Message error example (code ORD007)**: `"The email field in the customer profile attachment is invalid"`: This message indicates that the `email` used in the request does not exist or is incorrect.

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "ORD007",

5

 "message": "The email field in the customer profile attachment is invalid",

6

 "exception": null

7

 },

8

 "operationId": "37fcbaf6-9245-46b2-8735-f5fb304d1ac2"

9

}

`

### 404 - Not Found

* **Message error example**: `"The requested URL was not found on the server"`: Check if the URL is correct.

`1

2

404 Not Found

3

The requested URL was not found on this server.

4

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F106821144%3Fv%3D4%26w=64%26q=75)](https://github.com/GeorgeLimaDev)

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/Checkout/cart-attachments-section-quick-start-guides/add-customer-profile-information-to-the-cart.md)

[Getting a customer profile by email« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart//docs/guides/getting-a-customer-profile-by-email)[Add shipping address and select delivery optionNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart//docs/guides/add-shipping-address-and-delivery-option-to-the-cart)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F106821144%3Fv%3D4%26w=64%26q=75)](https://github.com/GeorgeLimaDev)

ON THIS PAGE

[Getting shopping cart information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23getting-shopping-cart-information)

[Adding customer profile information to the shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23adding-customer-profile-information-to-the-shopping-cart)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23error-codes)

[400 - Bad Request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23400-bad-request)[404 - Not Found](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23404-not-found)

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/Checkout/cart-attachments-section-quick-start-guides/add-customer-profile-information-to-the-cart.md)

Copy page

On this page

ON THIS PAGE

[Getting shopping cart information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23getting-shopping-cart-information)

[Adding customer profile information to the shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23adding-customer-profile-information-to-the-shopping-cart)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23error-codes)

[400 - Bad Request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23400-bad-request)[404 - Not Found](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart/docs/guides/add-customer-profile-information-to-the-cart%23404-not-found)

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 ads events 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/ads-events/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/checkout-api-overview)

---

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

---

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

[Getting started with VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/getting-started-with-vtex-ads-api)

[Synchronizing the catalog with VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/synchronizing-the-catalog-with-vtex-ads)

[Retrieving ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/retrieving-ads)

[Ads events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/ads-events)

[Understanding ads events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/understanding-ads-events)

[Ads events notification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/ads-events-notification)

[Impressions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/impressions)

[Views](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/views)

[Clicks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/clicks)

[Conversion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/conversion)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/checkout-api-overview)

---

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

---

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

[Getting started with VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/getting-started-with-vtex-ads-api)

[Synchronizing the catalog with VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/synchronizing-the-catalog-with-vtex-ads)

[Retrieving ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/retrieving-ads)

[Ads events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/ads-events)

[Understanding ads events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/understanding-ads-events)

[Ads events notification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/ads-events-notification)

[Impressions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/impressions)

[Views](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/views)

[Clicks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/clicks)

[Conversion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/conversion)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

[Getting started with VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/getting-started-with-vtex-ads-api)

[Ads events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events/docs/guides/ads-events)

Ads events

Overview of event types and how they’re used for campaign analytics.

To accurately track campaign performance and apply the appropriate billing model — whether based on clicks (CPC), impressions (CPM), or conversions (CPA) — you must notify VTEX Ads whenever a relevant ad event occurs.

The following event types are required for effective reporting:

* **Impressions**: When an ad is rendered on the screen.
* **View**: When a banner ad is visibly seen by the user (banner ads only).
* **Clicks**: When a user clicks on an ad.
* **Conversions**: When a user completes a defined conversion action after interacting with an ad.

Contributors

1

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

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 Ads/getting-started-with-vtex-ads-api/ads-events.md)

[Digital Signage« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events//docs/guides/digital-signage)[Understanding ads eventsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ads-events//docs/guides/understanding-ads-events)

Contributors

1

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

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 Ads/getting-started-with-vtex-ads-api/ads-events.md)

Copy page

On this page

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 node builder 7x migration guide 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/node-builder-7x-migration-guide/docs/guides)

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

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

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

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

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/app-development-guides)

[Services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-service)

[Calling commerce APIs on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/calling-commerce-apis-on-vtex-io)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-clients)

Handling events

[Path patterns](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/service-path-patterns)

[Configuring dynamic routes in VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/configuring-dynamic-routes-in-vtex-io-services)

[Developing service configuration apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-developing-service-configuration-apps)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

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

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/app-development-guides)

[Services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-service)

[Calling commerce APIs on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/calling-commerce-apis-on-vtex-io)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-clients)

Handling events

[Path patterns](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/service-path-patterns)

[Configuring dynamic routes in VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/configuring-dynamic-routes-in-vtex-io-services)

[Developing service configuration apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-developing-service-configuration-apps)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/app-development)

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/app-development-guides)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide)

Node builder 7.x migration guide

Learn how to update your Node app to builder version 7.x.

With the [Node builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-node-builder) update to version `7.x`, IO apps using this builder benefit from the Node.js 20 engine and TypeScript 5.x libraries, improving performance and security. However, this also means these apps need to be adjusted for the latest features.

Check the demo video below showing how to migrate your app to Node builder `7.x`.

## Instructions

To update your app to use the new builder version, follow the instructions below:

1. Update the VTEX IO CLI to version `4.1.0` or newer.
   1. In a terminal, run `vtex -v` to check your VTEX IO CLI version. If you do not have VTEX IO CLI installed, you can find the instructions in [Installing VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install).
   2. If your version is older than `4.1.0`, run `vtex autoupdate` to update your VTEX IO CLI.
2. Make sure `node/package.json` has the `typescript` property in `devDependencies`. 3\. In your app folder, open the `node/package.json` file. 4\. In the `devDependencies` property, check if the `typescript` package is declared. If it is not, add it with version `5.x`. It should look like this:
node/package.json
`1
"devDependencies": {
2
 ...
3
 "typescript": "5.x"
4
},
`
> If the app already has `typescript` declared in `devDependencies`, you don’t need to change its version manually. When linking the app, the package version is overwritten automatically.
3. Update the `manifest.json` with `node 7.x`.
   1. In your app folder, open the `manifest.json` file.
   2. Change the `node` builder version to `7.x`. It should look like this:
   manifest.json
   `1
   "builders": {
   2
    ...
   3
    "node": "7.x"
   4
   },
   `
4. Test the app.
   1. Open a terminal in the root folder of your app.
   2. Make sure you are in a [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace). You can create a new one or switch to an existing one.
   3. Run `vtex link`. You will notice that the `node/package.json` will be updated with the new versions of `typescript` (`5.5.3`) and `@node/types` (`20.x`).
   4. Check errors and fix them if they appear. Your app might not be fully compatible with the newer TypeScript and Node.js engine versions, and syntax, typing, or dependency errors might occur. See the [Troubleshooting](#heading=h.2w3bbhmrvkih) section for instructions about the most common errors.
5. Create and deploy a new app version following the steps in [Deploying a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available).
   1. In the [Release a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-releasing-a-new-app-version) step, we recommend creating a **minor** version since this update is not exclusively fixing issues as in a **patch**, and a **major** version would require additional work.
   > For apps in the [App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-app-store), creating a new **major** version will require the app to go through the [homologation process](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-2-managing-the-homologation-process).
   2. Follow the other steps (Publish, Test, Deploy, and Promote) as needed. Some apps are used only on one account, while others should deploy the new version to multiple accounts.

If you need help migrating your app to Node builder `7.x`, open a ticket with [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support).

## Troubleshooting

When migrating your app to the new builder version, some issues might occur. The following sections show the most common issues and what can be done to solve them.

### Typing errors

When linking your app, you might get an error in the following format:

`Argument of type <type>| undefined' is not assignable to a parameter of type '<type>'.`

This means that the argument is being declared as a certain type and is recognized as `undefined`.

**Solution**: You must ensure the argument is not `undefined`, or update the [field type to be optional](https://read.calvincode.net/reader?url=https://www.typescriptlang.org/docs/handbook/2/everyday-types.html%23optional-properties).

### "yarn lint" at the project root

Errors may occur in the following scenario:

1. There’s a lint configuration at the root of the project. It should be in files such as `.eslintrc` and `.eslintignore`.
2. The `package.json` file in the root is configured with an old version of TypeScript. For instance, the file has TypeScript version `3.9.6`, but Node builder `7.x` uses `5.5.3`.
3. Something used in the code (a class, a library, etc.) doesn’t exist in the old TypeScript version.

**Solution**: Update the TypeScript version in the root `package.json`. We recommend using version `5.5.3`, since it’s used in Node builder `7.x`.

**Side effect**: If the app uses the `eslint-config-vtex` package, you will get a warning in the console about version incompatibility.

### Alerts related to different TypeScript versions

When linking your app, you might get errors like the following examples:

* `@vtex/tsconfig@0.6.0" has incorrect peer dependency "typescript@^`
* `eslint-config-vtex@10.1.0" has incorrect peer dependency "typescript@^3.3.3333"`

These alerts may appear because some of the app's dependencies may run with an old TypeScript version.

> Errors in this scenario might be due to some VTEX libraries not being updated with TypeScript `5.x`. They should be updated gradually over time.

**Solution**: Update the `package.json` files of the dependencies manually with the new TypeScript version. We recommend using version `5.5.3`, since it’s the same used in Node builder `7.x`.

### Error with MetricsAggregator

If you’re accessing `global.metrics` in your code, defined by the `node-vtex-api` library, you should get the error:

`Property 'metrics' does not exist on type 'typeof globalThis'.`

This happens because of a breaking change between versions `12.x` and `20.x` of `@types/node`.

**Solution:** Use `global` as `any`, replacing `global` with `(global as any)` in your code. Example: `(global as any).metrics`.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/back-end-development-guides/node-builder-7x-migration-guide.md)

[Developing service configuration apps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide//docs/guides/vtex-io-documentation-developing-service-configuration-apps)[GraphQL in VTEX IONext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide//docs/guides/graphql-in-vtex-io)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23instructions)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23troubleshooting)

[Typing errors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23typing-errors)["yarn lint" at the project root](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23yarn-lint-at-the-project-root)[Alerts related to different TypeScript versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23alerts-related-to-different-typescript-versions)[Error with MetricsAggregator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23error-with-metricsaggregator)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/back-end-development-guides/node-builder-7x-migration-guide.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23instructions)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23troubleshooting)

[Typing errors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23typing-errors)["yarn lint" at the project root](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23yarn-lint-at-the-project-root)[Alerts related to different TypeScript versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23alerts-related-to-different-typescript-versions)[Error with MetricsAggregator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/node-builder-7x-migration-guide/docs/guides/node-builder-7x-migration-guide%23error-with-metricsaggregator)

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