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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Dropdown

Shows a list of options or commands.

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

The `Dropdown` component Displays a set of actions/items to the user, usually used to show a menu of options.

Example

Code

Dropdown

Dropdown Small

---

## Usage

### Import the component

`1

import {

2

 Dropdown,

3

 DropdownItem,

4

 DropdownMenu,

5

 DropdownButton,

6

} from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/molecules/Dropdown/styles.scss'

`

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

---

## Design tokens

### Compound Components

#### Dropdown Item

| Local token                             | Default value/Global token linked                                               |
| --------------------------------------- | ------------------------------------------------------------------------------- |
| \--fs-dropdown-item-min-height          | 2.375rem                                                                        |
| \--fs-dropdown-item-padding             | var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1) |
| \--fs-dropdown-item-text-size           | var(--fs-text-size-base)                                                        |
| \--fs-dropdown-item-text-weight         | var(--fs-text-weight-regular)                                                   |
| \--fs-dropdown-item-color               | var(--fs-color-link)                                                            |
| \--fs-dropdown-item-bkg-color           | var(--fs-color-tertiary-bkg-light)                                              |
| \--fs-dropdown-item-bkg-color-hover     | var(--fs-color-primary-bkg-light)                                               |
| \--fs-dropdown-item-border-bottom-color | var(--fs-border-color-light)                                                    |
| \--fs-dropdown-item-icon-min-width      | 1.125rem                                                                        |
| \--fs-dropdown-item-icon-margin-right   | var(--fs-spacing-0)                                                             |
| \--fs-dropdown-item-icon-margin-top     | calc(-1 \* var(--fs-spacing-1))                                                 |

#### Dropdown Menu

| Local token                       | Default value/Global token linked |
| --------------------------------- | --------------------------------- |
| \--fs-dropdown-menu-bkg-color     | var(--fs-color-tertiary-bkg)      |
| \--fs-dropdown-menu-border-radius | var(--fs-border-radius)           |
| \--fs-dropdown-menu-box-shadow    | var(--fs-shadow-hover)            |

### Design tokens: Small

| Local token                          | Default value/Global token linked                                               |
| ------------------------------------ | ------------------------------------------------------------------------------- |
| \--fs-dropdown-item-small-min-height | 1.75rem                                                                         |
| \--fs-dropdown-item-small-padding    | var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1) |
| \--fs-dropdown-item-small-text-size  | var(--fs-text-size-1)                                                           |

---

## Data attributes

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

#### Dropdown Item

`data-fs-dropdown-item`

#### Dropdown Menu

`data-fs-dropdown-menu`

`data-fs-dropdown-overlay`

`data-fs-dropdown-menu`

`data-fs-dropdown-menu-size="small | regular"`

#### Dropdown Button

`data-fs-dropdown-button`

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

---

## Props

### Dropdown

| Name          | Type          | Description                                                | Default     |
| ------------- | ------------- | ---------------------------------------------------------- | ----------- |
| **onDismiss** | () => void    | Event emitted when the Dropdown is closed.                 |             |
| **isOpen**    | false \| true | A boolean value that represents the state of the Dropdown. |             |
| **id**        | string        | ID to identify Dropdown.                                   | fs-dropdown |

### DropdownItem

| Name               | Type             | Description                                                                                | Default          |    |                          |                             |                     |             |                                                                 |
| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------ | ---------------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | --------------------------------------------------------------- |
| **testId**         | string           | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).                 | fs-dropdown-item |    |                          |                             |                     |             |                                                                 |
| **icon**           | string \| number | false                                                                                | true             | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | @deprecated A React component that will be rendered as an icon. |
| **asChild**        | false \| true    | Replace the default rendered element with the one passed as a child, merging their props and behavior. |                  |    |                          |                             |                     |             |                                                                 |
| **dismissOnClick** | false \| true    | Emit onDismiss event when the component is clicked.                                                    | true             |    |                          |                             |                     |             |                                                                 |

### DropdownMenu

| Name                | Type                                                                       | Description                                                                                | Default                    |      |
| ------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---- |
| **testId**          | string                                                                     | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).                                                         | fs-dropdown-menu           |      |
| **aria-labelledby** | string                                                                     | Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby |                            |      |
| **onDismiss**       | (event: MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>) => void | This function is called whenever the user hits "Escape" or clicks outside the dialog.                                                          |                            |      |
| **size**            | "small" \| "regular"                                                       | Specifies the size variant.                                                                                | regular                    |      |
| **align**           | "left" \| "right"                                                          | "center"                                                                                | Alignment for the dropdown | left |

### DropdownButton

| Name             | Type                 | Description                                                                                | Default            |    |                          |                             |                     |             |                                                                 |
| ---------------- | -------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ | -- | ------------------------ | --------------------------- | ------------------- | ----------- | --------------------------------------------------------------- |
| **testId**       | string               | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).                  | fs-dropdown-button |    |                          |                             |                     |             |                                                                 |
| **asChild**      | false \| true        | Replace the default rendered element with the provided child element, merging their props and behavior. | false              |    |                          |                             |                     |             |                                                                 |
| **loading**      | false \| true        | Boolean that represents a loading state.                                                                |                    |    |                          |                             |                     |             |                                                                 |
| **loadingLabel** | string               | Specifies a label for loading state.                                                                    |                    |    |                          |                             |                     |             |                                                                 |
| **icon**         | string \| number     | false                                                                                | true               | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | @deprecated A React component that will be rendered as an icon. |
| **iconPosition** | "left" \| "right"    | @deprecated Specifies where the icon should be positioned                                               |                    |    |                          |                             |                     |             |                                                                 |
| **size**         | "small" \| "regular" | Specifies the size variant.                                                                             |                    |    |                          |                             |                     |             |                                                                 |
| **disabled**     | false \| true        | Specifies that this button should be disabled.                                                          |                    |    |                          |                             |                     |             |                                                                 |

---

## Accessibility

### Keyboard Interactions

| Key       | Description                                                                                |
| --------- | -------------------------------------------------------------------------------------------- |
| Enter     | When focusing on DropdownButton, the Dropdown menu opens and focuses the first DropdownItem. |
| ArrowDown | When focusing on an item, moves focus to the next DropdownItem.                              |
| ArrowUp   | When focusing on an item, moves focus to the previous DropdownItem.                          |
| Escape    | Closes DropdownMenu and moves focus to DropdownButton.                                       |
| Home      | When DropdownMenu is open, move focus to the first DropdownItem.                             |
| End       | When DropdownMenu is open, move focus to the last DropdownItem.                              |

Contributors

3

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/dropdown.mdx)

[DiscountBadge« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-discount-badge)[GiftNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-gift)

Contributors

3

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

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

ON THIS PAGE

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

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

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

[Compound Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23compound-components)[Design tokens: Small](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23design-tokens-small)

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

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

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdown)[DropdownItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdownitem)[DropdownMenu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdownmenu)[DropdownButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdownbutton)

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

[Keyboard Interactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23keyboard-interactions)

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

Copy page

On this page

ON THIS PAGE

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

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

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

[Compound Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23compound-components)[Design tokens: Small](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23design-tokens-small)

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

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

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdown)[DropdownItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdownitem)[DropdownMenu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdownmenu)[DropdownButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23dropdownbutton)

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

[Keyboard Interactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-dropdown/docs/guides/faststore/molecules-dropdown%23keyboard-interactions)

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 create a new 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/create-a-new-cart/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Simulate a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/simulate-a-shopping-cart)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart)

[Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/get-cart-information-by-id)

[Remove all items from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/remove-all-items-from-cart)

[Remove all personal data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/remove-all-personal-data)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/add-cart-items)

[Update cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/update-cart-items)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/change-price)

[Ignore profile data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/ignore-profile-data)

[Get cart installments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/get-cart-installments-information)

[Add coupons to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/add-coupons-to-the-cart)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/add-service-to-the-cart)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/checkout-error-codes)

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/troubleshooting)

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Simulate a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/simulate-a-shopping-cart)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart)

[Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/get-cart-information-by-id)

[Remove all items from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/remove-all-items-from-cart)

[Remove all personal data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/remove-all-personal-data)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/add-cart-items)

[Update cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/update-cart-items)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/change-price)

[Ignore profile data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/ignore-profile-data)

[Get cart installments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/get-cart-installments-information)

[Add coupons to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/add-coupons-to-the-cart)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/add-service-to-the-cart)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/checkout-error-codes)

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides)

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

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart)

Get current or create a new cart

The shopping cart is where the information on the products chosen by the customer while browsing a store is gathered. This data may include item prices, shipping value, payment, and delivery methods, among others.

This guide will describe how to get the information of your current shopping cart (`orderFormId`) or to create a new cart with the API.

## Accessing current shopping cart information

To access your current shopping cart information, you must use the [Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm) endpoint. In this request, it is not required to send any additional information (path params, query, or body). See this URL example:

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

After sending the request, the endpoint will return the response body containing the information of your current shopping cart, as shown in the example below:

`1

{

2

 "orderFormId": "11c257869e444e7185e61cab475f91bd",

3

 "salesChannel": "1",

4

 "loggedIn": false,

5

 "isCheckedIn": false,

6

 "storeId": null,

7

 "checkedInPickupPointId": null,

8

 "allowManualPrice": false,

9

 "canEditData": true,

10

 "userProfileId": null,

11

 "userType": null,

12

 "ignoreProfileData": false,

13

 "value": 0,

14

 "messages": [],

15

 "items": [

16

 {

17

 "uniqueId": "D1E0949706A3441DA0386929FAB6E7E8",

18

 "id": "2005",

19

 "productId": "3",

20

 "productRefId": "",

21

 "refId": null,

22

 "ean": "978020137962",

23

 "name": "Weightless Waves Mild Lather Cleanser 50 ml",

24

 "skuName": "50 ml",

25

 "modalType": null,

26

 "parentItemIndex": null,

27

 "parentAssemblyBinding": null,

28

 "assemblies": [],

29

 "priceValidUntil": "2023-11-07T22:14:44Z",

30

 "tax": 0,

31

 "price": 3190,

32

 "listPrice": 3190,

33

 "manualPrice": null,

34

 "manualPriceAppliedBy": null,

35

 "sellingPrice": 3107,

36

 "rewardValue": 0,

37

 "isGift": false,

38

 "additionalInfo": {

39

 "dimension": null,

40

 "brandName": "VALDIE&CO",

41

 "brandId": "2000000",

42

 "offeringInfo": null,

43

 "offeringType": null,

44

 "offeringTypeId": null

45

 },

46

 "preSaleDate": null,

47

 "productCategoryIds": "/2/",

48

 "productCategories": {

49

 "2": "Computers"

50

 },

51

 "quantity": 3,

52

 "seller": "cosmetics1",

53

 "sellerChain": [

54

 "cosmetics1"

55

 ],

56

 "imageUrl": "http://cosmetics2.vteximg.com.br/arquivos/ids/155401-55-55/ID-001-MAIN.jpg?v=637109313796670000",

57

 "detailUrl": "/weightless-waves-mild-lather-cleanser/p",

58

 "components": [],

59

 "bundleItems": [],

60

 "attachments": [],

61

 "attachmentOfferings": [],

62

 "offerings": [],

63

 "priceTags": [

64

 {

65

 "name": "discount@price-0e45a4e3-6084-4bf9-bff7-0fe8403699fc#ac2d3d37-5845-45a6-9254-191449d6f100",

66

 "value": -416,

67

 "rawValue": -4.160,

68

 "isPercentual": false,

69

 "identifier": "0e45a4e3-6084-4bf9-bff7-0fe8403699fc",

70

 "owner": "cosmetics2"

71

 }

72

 ],

73

 "availability": "available",

74

 "measurementUnit": "un",

75

 "unitMultiplier": 1.0000,

76

 "manufacturerCode": null,

77

 "priceDefinition": {

78

 "calculatedSellingPrice": 3107,

79

 "total": 15534,

80

 "sellingPrices": [

81

 {

82

 "value": 3107,

83

 "quantity": 4

84

 },

85

 {

86

 "value": 3106,

87

 "quantity": 1

88

 }

89

 ]

90

 }

91

 },

92

...

`

>  If you want access to a specific shopping cart (other than your current one) and you already know its `orderFormId`, you can find it through the [Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm/-orderFormId-) endpoint. See more information at [Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-cart-information-by-id%23accessing-shopping-cart-information) guide.

## Creating the new shopping cart

To create a new shopping cart, in the same way that to obtain the information of the current cart, you must use the [Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm) endpoint. However, in this request, you must also send the query parameter `forceNewCart = true`, as shown in this URL example:

`https://{accountName}.{environment}.com.br/api/checkout/pub/orderForm?forceNewCart=true`

After sending the request, the endpoint will return the response body containing the information about the new shopping cart created, as shown in the example below:

`1

{

2

 "orderFormId": "ede846222cd44046ba6c638442c3505a",

3

 "salesChannel": "1",

4

 "loggedIn": false,

5

 "isCheckedIn": false,

6

 "storeId": null,

7

 "checkedInPickupPointId": null,

8

 "allowManualPrice": false,

9

 "canEditData": true,

10

 "userProfileId": null,

11

 "userType": null,

12

 "ignoreProfileData": false,

13

 "value": 0,

14

 "messages": [],

15

 "items": [],

16

 "selectableGifts": [],

17

 "totalizers": [],

18

 "shippingData": null,

19

 "clientProfileData": {

20

 "email": null,

21

 "firstName": null,

22

 "lastName": null,

23

 "document": null,

24

 "documentType": null,

25

 "phone": null,

26

 "corporateName": null,

27

 "tradeName": null,

28

 "corporateDocument": null,

29

 "stateInscription": null,

30

 "corporatePhone": null,

31

 "isCorporate": false,

32

 "profileCompleteOnLoading": null,

33

 "profileErrorOnLoading": null,

34

 "customerClass": null

35

 },

36

...

`

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

## Error codes

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

### 404 - Not Found

* `Message error example: "The requested URL was not found on the server"`: check that the URL data is correct.

`1

<body>

2

 <h1>404 Not Found</h1>

3

 <p>The requested URL was not found on this server.</p>

4

</body>

`

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/_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/Checkout/shopping-cart-section-api-quick-start-guides/create-a-new-cart.md)

[Simulate a shopping cart« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart//docs/guides/simulate-a-shopping-cart)[Get cart information by IDNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart//docs/guides/get-cart-information-by-id)

Contributors

2

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

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

ON THIS PAGE

[Accessing current shopping cart information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart%23accessing-current-shopping-cart-information)

[Creating the new shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart%23creating-the-new-shopping-cart)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart%23error-codes)

[404 - Not Found](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-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/shopping-cart-section-api-quick-start-guides/create-a-new-cart.md)

Copy page

On this page

ON THIS PAGE

[Accessing current shopping cart information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart%23accessing-current-shopping-cart-information)

[Creating the new shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart%23creating-the-new-shopping-cart)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-cart%23error-codes)

[404 - Not Found](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/create-a-new-cart/docs/guides/create-a-new-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=)