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

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

---

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

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

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

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-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-search-dropdown/docs/guides/faststore/developer-tools-overview)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-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-search-dropdown/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-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-search-dropdown/docs/guides/getting-started-with-storefront-solutions)

---

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

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

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

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-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-search-dropdown/docs/guides/faststore/developer-tools-overview)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-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-search-dropdown/docs/guides/storefront-best-practices)

---

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

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

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

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

SearchDropdown

Combines `SearchHistory`, `SearchTop` and `SearchAutoComplete` and `SearchProducts` to show all options in `SearchInput`.

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

Combine `SearchHistory`, `SearchTop`, `SearchAutoComplete` and `SearchProducts` to show all options in `SearchInput`. This component is part of the [Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-search) feature.

Example

Code

Waiting for input...

History

Clear History

1. [Headphone](#)
2. [Audio & Video](#)
3. [mh-7000](#)

Top Search

1. [1Notebooks](#)
2. [2Laser Printer](#)
3. [3Bluetooth Keyboard](#)

Searching for: `Appl`

1. [appl**e**](#)
2. [appl**e magic mouse**](#)

Suggested Products

1. [![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)Apple Magic MouseOriginal price:$999Price:$950.04](#)
2. [![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)Apple Magic MouseOriginal price:$999Price:$950.04](#)

---

## Usage

### Import the component

`1

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

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

`

---

## Design tokens

| Local token                                | Default value/Global token linked                                          |
| ------------------------------------------ | -------------------------------------------------------------------------- |
| \--fs-search-dropdown-bkg-color            | var(--fs-color-neutral-0)                                                  |
| \--fs-search-dropdown-box-shadow           | var(--fs-shadow)                                                           |
| \--fs-search-dropdown-width-mobile         | 100vw                                                                      |
| \--fs-search-dropdown-width-desktop        | 100%                                                                       |
| \--fs-search-dropdown-border-width         | var(--fs-border-width)                                                     |
| \--fs-search-dropdown-border-color         | var(--fs-border-color)                                                     |
| \--fs-search-dropdown-border-radius        | 0 0 var(--fs-border-radius) var(--fs-border-radius)                        |
| \--fs-search-dropdown-position-left-mobile | calc(-1 \* var(--fs-control-tap-size))                                     |
| \--fs-search-dropdown-position-left-tablet | calc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1)) |
| \--fs-search-dropdown-position-top-mobile  | calc(var(--fs-search-dropdown-position-top-tablet) + 1px)                  |
| \--fs-search-dropdown-position-top-tablet  | calc(var(--fs-control-tap-size) + var(--fs-border-width))                  |
| \--fs-search-dropdown-position-top-desktop | var(--fs-search-input-height-desktop)                                      |
| \--fs-search-dropdown-section-border-color | var(--fs-border-color-light)                                               |

---

## Data attributes

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

`data-fs-search-dropdown`

`data-fs-search-dropdown-loading-text`

---

## Props

| Name       | Type   | Description                                                                            | Default            |
| ---------- | ------ | -------------------------------------------------------------------------------------- | ------------------ |
| **testId** | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-search-dropdown |

Contributors

3

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

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

Contributors

3

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

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

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

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-dropdown/docs/guides/faststore/molecules-search-dropdown%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/search-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-search-dropdown/docs/guides/faststore/molecules-search-dropdown%23usage)

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

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

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-dropdown/docs/guides/faststore/molecules-search-dropdown%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 vtex io documentation building a product details page in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-building-pages)

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

[Creating a Black Friday page from template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

[Creating a custom search results page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)

[Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-creating-a-new-custom-page)

[Customizing the Header and Footer blocks by page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-building-pages)

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

[Creating a Black Friday page from template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

[Creating a custom search results page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)

[Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-creating-a-new-custom-page)

[Customizing the Header and Footer blocks by page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework)

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/store-framework-building-pages)

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page)

Building a product details page

A product details page (PDP) is the page in an ecommerce website that displays information about a specific product, including dimensions, color, price, reviews, shipping, and other relevant details that consumers may want to check before purchasing.

The PDP is defined within the `store.product` block in the Store Theme app, and it's built with a series of child blocks. The `store.product` block accepts all blocks allowed by the `store` and `flex-layout` blocks as child dependencies, as well as block in the following list:

Blocks accepted by `store.product`
* `availability-subscriber`
* `buy-button`
* `blog-related-posts`
* `breadcrumb`
* `product-add-to-list-button`
* `product-assembly-options`
* `product-availability`
* `product-brand`
* `product-details`
* `product-description`
* `product-highlights`
* `product-identifier`
* `product-images`
* `product-kit`
* `product-name`
* `product-price`
* `product-rating-inline`
* `product-rating-summary`
* `product-reviews`
* `product-teaser.product`
* `product-quantity`
* `product-questions-and-answers`
* `product-separator`
* `product-specifications`
* `share`
* `shipping-simulator`
* `sku-selector`

## Before you begin

To build a responsive PDP, you need to use [flex-layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout). For more information, read [this](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-flex-layout) guide.

## Practical example

Consider the following example of a PDP built using the `store.product` and `flex-layout` blocks:

Click here to see the code sample

`1

{

2

 "store.product": {

3

 "children": [

4

 "flex-layout.row#product-breadcrumb",

5

 "flex-layout.row#product-main",

6

 "shelf.relatedProducts"

7

 ]

8

 },

9

 "flex-layout.row#product-breadcrumb": {

10

 "props": {

11

 "marginTop": 4

12

 },

13

 "children": ["breadcrumb"]

14

 },

15

 "flex-layout.row#product-main": {

16

 "props": {

17

 "colGap": 7,

18

 "rowGap": 7,

19

 "marginTop": 4,

20

 "marginBottom": 7,

21

 "paddingTop": 7,

22

 "paddingBottom": 7

23

 },

24

 "children": ["flex-layout.col#product-image", "flex-layout.col#right-col"]

25

 },

26

 "flex-layout.col#product-image": {

27

 "props": {

28

 "width": "60%",

29

 "rowGap": 0

30

 },

31

 "children": ["product-images"]

32

 },

33

 "product-images": {

34

 "props": {

35

 "displayThumbnailsArrows": true

36

 }

37

 },

38

 "flex-layout.col#right-col": {

39

 "props": {

40

 "preventVerticalStretch": true,

41

 "rowGap": 0

42

 },

43

 "children": [

44

 "product-name",

45

 "product-rating-summary",

46

 "product-price#product-details",

47

 "product-separator",

48

 "product-quantity",

49

 "product-identifier.product",

50

 "sku-selector",

51

 "flex-layout.row#buy-button",

52

 "availability-subscriber",

53

 "shipping-simulator",

54

 "share#default"

55

 ]

56

 },

57

 "product-price#product-details": {

58

 "props": {

59

 "showInstallments": true,

60

 "showSavings": true

61

 }

62

 },

63

 "flex-layout.row#buy-button": {

64

 "props": {

65

 "marginTop": 4,

66

 "marginBottom": 7

67

 },

68

 "children": ["buy-button"]

69

 },

70

71

 "share#default": {

72

 "props": {

73

 "social": {

74

 "Facebook": true,

75

 "WhatsApp": true,

76

 "Twitter": false,

77

 "Pinterest": true

78

 }

79

 }

80

 }

81

}

`

![{"base64":"  ","img":{"width":2848,"height":1454,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":737950,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-0.png)

Note that in the code sample, the `store.product` child dependencies define five blocks, the first two being `flex-layout.row`.

> Keep in mind that the `flex-layout` block may be affected if you are using mobile mode. For more information, read the [Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-flex-layout) documentation.

### First row of Flex Layout

In the first row of the `flex-layout` block, the [breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.breadcrumb) block is rendered as follows:

![{"base64":"  ","img":{"width":2050,"height":170,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":23447,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-1.png)

`1

"flex-layout.row#product-breadcrumb": {

2

 "props": {

3

 "marginTop": 4

4

 },

5

 "children": ["breadcrumb"]

6

 },

`

To customize the breadcrumb, you can declare the `breadcrumb` block and configure its properties based on your preferences. For example:

`1

"breadcrumb": {

2

 "props": {

3

 "showOnMobile": true

4

 }

5

}

`

### Second row of Flex Layout

The second row of the `flex-layout` block renders the main information about the product.

It renders the product image (`flex-layout.col#product-image`) in the left column and the name, price, SKU selector, and buy button in the right column(`flex-layout.col#right-col`):

`1

 "flex-layout.row#product-main": {

2

 "props": {

3

 "colGap": 7,

4

 "rowGap": 7,

5

 "marginTop": 4,

6

 "marginBottom": 7,

7

 "paddingTop": 7,

8

 "paddingBottom": 7

9

 },

10

 "children": ["flex-layout.col#product-image", "flex-layout.col#right-col"]

11

 },

`

To customize the `flex-layout.col#product-image` and `flex-layout.col#right-col` sections, you can declare these blocks and configure their properties based on your preferences as below:

`1

"flex-layout.col#product-image": {

2

 "props": {

3

 "width": "60%",

4

 "rowGap": 0

5

 },

6

 "children": ["product-images"]

7

 },

8

 "product-images": {

9

 "props": {

10

 "displayThumbnailsArrows": true

11

 }

12

 },

13

 "flex-layout.col#right-col": {

14

 "props": {

15

 "preventVerticalStretch": true,

16

 "rowGap": 0

17

 },

18

 "children": [

19

 "product-name",

20

 "product-price#product-details",

21

 "product-separator",

22

 "product-quantity",

23

 "product-identifier.product",

24

 "sku-selector",

25

 "flex-layout.row#buy-button",

26

 "shipping-simulator",

27

 "share#default"

28

 ]

29

 },

`

#### Left column

The left column of the second row contains the [product-images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/productimages) block because this was the first `flex-layout.col` block to be declared.

![{"base64":"  ","img":{"width":640,"height":548,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":133964,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-2.png)

.

#### Right column

The right column of the second row displays the price, buy button, and other relevant product details. In practice, it's composed of the following blocks:

![{"base64":"  ","img":{"width":1562,"height":1385,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":111028,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-3.png)

* [product-name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/productname): Displays the product name, along with its SKU name, if desired.
* [product-price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-price): Displays a properly formatted selling price. You can set it to display the list price (if different), installments, etc. Below is an example of a product price displaying both the sale and the list price.
* `product-separator`: Renders a line separator.
* [product-quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-quantity): Displays a quantity selector that allows customers to choose how many items they want to add to the cart.
* [product-identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-identifier): Displays the product identification number. It accepts different props, such as the label to display before/after the identifier.
* [sku-selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/skuselector): Allows the user to choose a SKU, automatically hiding impossible combinations or indicating combinations that are currently unavailable.
* [add-to-cart-button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button): Adds an item to the cart. You can customize it to display a success message, redirect users to the cart page, etc.
* [shipping-simulator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/shippingsimulator): Allows users to enter their postal code to then display the available shipping options and their respective prices for the order.
* [share](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share): Allows product sharing on social media. You can customize its props to control which options will be displayed to the user.

### Related products

After the `flex-layout` rows, you need to declare the `shelf.relatedProducts` block in your `store.product` block. This block is a [shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-shelf/) that displays products related to the one the customer is browsing. These products are defined through Catalog in the Admin.

`1

"shelf.relatedProducts": {

2

 "props": {

3

 "recommendation": "view",

4

 "productList": {

5

 "titleText": "Who saw also saw",

6

 "itemsPerPage": 3

7

 }

8

 }

9

}

`

When related products are identified, they are displayed as follows:

![{"base64":"  ","img":{"width":2386,"height":1380,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":243128,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-product-details-page-4.png)

The `shelf.relatedProducts` block accepts different recommendation types, such as `similars`, `view`, `buy`, `accessories`, `viewAndBought`, and `suggestions`.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-building-a-product-details-page.md)

[Building pages« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page//docs/guides/store-framework-building-pages)[Building a search results page with multiple layoutsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page//docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23before-you-begin)

[Practical example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23practical-example)

[First row of Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23first-row-of-flex-layout)[Second row of Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23second-row-of-flex-layout)[Related products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23related-products)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-building-a-product-details-page.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23before-you-begin)

[Practical example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23practical-example)

[First row of Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23first-row-of-flex-layout)[Second row of Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23second-row-of-flex-layout)[Related products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page/docs/guides/vtex-io-documentation-building-a-product-details-page%23related-products)

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 api response codes 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/api-response-codes/docs/guides)

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

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

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

Guides

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

---

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

[List of REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/getting-started-list-of-rest-apis)

[Making your first request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/making-your-first-request)

[Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/authentication)

[Response status codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/api-response-codes)

Error handling and best practices

---

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

---

Integration Guides

---

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

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

[List of REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/getting-started-list-of-rest-apis)

[Making your first request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/making-your-first-request)

[Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/authentication)

[Response status codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/api-response-codes)

Error handling and best practices

---

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

---

Integration Guides

---

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

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

[Response status codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/docs/guides/api-response-codes)

API response status codes

Understand the outcome of your interactions with VTEX Core Commerce APIs by delving deeper into HTTP status codes.

Every interaction with [VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference) returns an HTTP status code that indicates whether the request succeeded, failed, or demands particular actions for subsequent actions.

| Status code               | Description                                                                                |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 200 OK                    | The request was successfully processed by VTEX.                                                                                |
| 201 Created               | The request has been fulfilled, and a new resource has been created. This response is typically sent after POST requests and some PUT requests.                                                                                |
| 202 Accepted              | The request has been received, but the processing has not been completed yet.                                                                                |
| 204 No Content            | The request was processed successfully by the VTEX server, but there is no content to return.                                                                                |
| 205 Reset Content         | The VTEX server has accepted the request but will not return any content. The client must reset the document from which the original request was sent.                                                                                |
| 400 Bad Request           | The VTEX server could not decode the request body, generally due to malformed syntax or an incorrect Content-Type header.                                                                                |
| 401 Unauthorized          | The caller was not authorized to perform the request due to missing or incorrect authentication credentials. Refer to [Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authentication) for more information.                                                                                |
| 403 Forbidden             | The request is valid, but the VTEX server refuses to process the request. Ensure you have the appropriate [roles](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc?%26utm%5Fsource=autocomplete) to perform the desired action.                                                                                |
| 404 Not Found             | The requested resource cannot be located. Refer to [VTEX API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference) for correct endpoint naming.                                                                                |
| 405 Method Not Allowed    | The HTTP method used to access the endpoint is incorrect. Refer to [VTEX API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference) for more information on the supported methods.                                                                                |
| 429 Too Many Requests     | The application exceeded request rate limits.                                                                                |
| 500 Internal Server Error | An internal server error has occurred. Please verify the headers of the HTTP request. If the request is directed to an external server, check with the provider. For VTEX-related issues, visit the [VTEX status page](https://read.calvincode.net/reader?url=https://status.vtex.com/) for real-time outages and incident reports. If the issue persists, contact [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/support) for assistance. |
| 502 Bad Gateway           | The VTEX server acting as a gateway or proxy received an invalid response from the upstream server. Please try again later.                                                                                |
| 503 Service Unavailable   | The VTEX server is temporarily unavailable. Check the [VTEX status page](https://read.calvincode.net/reader?url=https://status.vtex.com/) for real-time outages and incident reports. Try again later, or if the issue persists, reach out to [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/support).                                                                                |
| 504 Gateway Timeout       | The VTEX server acting as a gateway or proxy timed out while attempting to complete the request. Please try again later, or if the issue persists, reach out to [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/support).                                                                                |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes/_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/Getting-Started/api-response-codes.md)

[Refresh token flow for headless implementations« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes//docs/guides/refresh-token-flow-for-headless-implementations)[Handling errors and exceptionsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/api-response-codes//docs/guides/handling-errors-and-exceptions)

Contributors

1

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

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/Getting-Started/api-response-codes.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=)