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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

RatingField

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

The `RatingField` component allows users to submit ratings when submitting product reviews. It wraps the [Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-rating) component, which displays the rating system, and the associated [Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-label) component, which provides a text description for the rating field.

Example

Code

Rate the product from 1 to 5 stars

Rate the product from 1 to 5 starsThis field is required.

---

## Usage

### Import the component

`1

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

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

`

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

---

## Examples

### Variants

#### Error

Example

Code

Rate the product from 1 to 5 starsThis field is required.

---

## Design tokens

### Design tokens: Label

| Local token                          | Default value/Global token linked |
| ------------------------------------ | --------------------------------- |
| \--fs-rating-field-label-color       | var(--fs-color-text-light)        |
| \--fs-rating-field-label-size        | var(--fs-text-size-2)             |
| \--fs-rating-field-label-line-height | var(--fs-text-size-4)             |

### Design tokens: Error

| Local token                                  | Default value/Global token linked |
| -------------------------------------------- | --------------------------------- |
| \--fs-rating-field-error-message-size        | var(--fs-text-size-legend)        |
| \--fs-rating-field-error-message-line-height | 1.1                               |
| \--fs-rating-field-error-message-color       | var(--fs-color-danger-text)       |

## Data attributes

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

`data-fs-rating-field`

`data-fs-rating-field-label`

`data-fs-rating-field-error-message`

---

## Props

| Name          | Type                               | Description                                                                                | Default         |    |                          |                             |                     |             |                                                                                |
| ------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | -------------------------------------------------------------------------------- |
| **testId**    | string                             | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).                             | fs-rating-field |    |                          |                             |                     |             |                                                                                |
| **id**        | string                             | ID to identify input and corresponding label.                                                                      |                 |    |                          |                             |                     |             |                                                                                |
| **label\***   | string                             | The text displayed to identify the input rating.                                                                   |                 |    |                          |                             |                     |             |                                                                                |
| **error**     | string                             | The error message displayed when an error occurs.                                                                  |                 |    |                          |                             |                     |             |                                                                                |
| **ratingRef** | MutableRefObject<HTMLUListElement> | Component's ref.                                                                                |                 |    |                          |                             |                     |             |                                                                                |
| **length**    | number                             | The length of child elements.                                                                                | 5               |    |                          |                             |                     |             |                                                                                |
| **value**     | number                             | The current value of the rating, based on the quantity of child elements.                                          | 0               |    |                          |                             |                     |             |                                                                                |
| **icon**      | string \| number                   | false                                                                                | true            | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon to represent the rating score unit (e.g.: a <Icon name="Star" /> component) |
| **onChange**  | (value: number) => void            | Function to be triggered when Rating option change. This should only be used if you and an actionable rating list. |                 |    |                          |                             |                     |             |                                                                                |
| **disabled**  | false \| true                      | Specifies that the actionable rating should be disabled.                                                           |                 |    |                          |                             |                     |             |                                                                                |

Contributors

2

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

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

[Rating« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-rating-field/docs/guides/faststore/molecules-rating)[RegionBarNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-rating-field/docs/guides/faststore/molecules-region-bar)

Contributors

2

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

ON THIS PAGE

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

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

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

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

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

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

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

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

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-rating-field/docs/guides/faststore/molecules-rating-field%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 faststore routing managing urls with redirects and rewrite paths 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/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/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/routing-managing-urls-with-redirects-and-rewrite-paths/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/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/routing-managing-urls-with-redirects-and-rewrite-paths/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/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/routing-managing-urls-with-redirects-and-rewrite-paths/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore)

Managing URLs with redirects and rewrite paths

Learn how to configure redirects and rewrites in your FastStore project to manage user access to your content.

In this guide, you will learn how to configure redirects and rewrites in your FastStore project. These tools help you manage user access to your content by automatically directing users from one URL to another or mapping custom URLs to existing page templates.

Redirects automatically take users from one URL to another. They are useful when pages have been moved, renamed, or removed. For example, if a page has been moved or renamed, the redirect ensures the user is taken to the new location.

Rewrites allow you to map custom URLs to existing page templates without changing the URL in the browser. This is useful when you want to hide complex or dynamic URL structures from users while maintaining clean and SEO-friendly URLs. For example, you can map a custom URL, such as `/sale`, to an existing Product Listing Page (PLP) template.

In summary:

* Redirects change both the URL the user sees and the destination.
* Rewrites keep the URL the same but change the destination internally.

These two tools enhance content organization, help maintain a good user experience, and ensure search engines continue to index the correct content.

## Redirect behavior and caveats

Before configuring redirects, it's important to understand how they behave in FastStore and what caveats apply.

### Native routes take precedence

FastStore prioritizes native pages (e.g., product, collection, and brand pages) over redirect rules. If a redirect's source path matches a native page, the redirect will be ignored. For example, if `/fall-sale` is a live native collection page, a redirect rule from `/fall-sale` to `/fall` will not work. The collection page will render instead. To make the redirect work, you must unpublish or disable the native page (`/fall-sale`). To disable a collection page, follow these steps:

1. Access the Admin and go to **Catalog > Collections**.
2. Click on the collection name you want to disable.
3. Click `COLLECTION SETTINGS`.
4. In **Schedule**, change the **End date** to a date before the **Start date**.
5. Click `Save`.
> For more information on how to manage a collection, see the [Delete and edit a collection](https://read.calvincode.net/reader?url=https://newhelp.vtex.com/docs/tutorials/creating-collections-beta%23delete-and-edit-a-collection) guide.

If the source path of this native page is published by the Headless CMS, you must also unpublish it. To unpublish in the Headless CMS, follow these steps:

1. Access the Admin and go to **Storefront > Headless CMS**.
2. Click on the page name you want to unpublish.
3. Click `Unpublish` and choose `Unpublish now`.
> You can also schedule to unpublish the page by clicking `Add to Release`.
4. Click `Unpublish`.
5. Click `Save`.

> For more information on how to manage a page in the Headless CMS, see the [Managing pages in the Headless CMS](https://read.calvincode.net/reader?url=https://newhelp.vtex.com/en/docs/tutorials/managing-pages) guides.

### Query strings are not forwarded by default

Query string parameters (e.g., `?key=value`) are not forwarded in redirects by default. For example, a rule `/from` → `/to` will redirect `/from?key=value` to `/to`, dropping the `?key=value` portion.

## Creating redirects

FastStore allows you to configure redirects through the [discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file. This configuration is based on [Next.js redirects](https://read.calvincode.net/reader?url=https://nextjs.org/docs/pages/api-reference/next-config-js/redirects).

> Projects hosted on Vercel have redirect limits, such as a maximum of 1,024 redirects in the array and a maximum string length of 4,096 for `source` and `destination` properties. (For details, see Vercel's [Redirects](https://read.calvincode.net/reader?url=https://vercel.com/docs/edge-network/redirects%23configuration) article.) If you need to configure more than 1,024 redirects, see the [(Beta) Enabling redirects using the enableRedirects flag](#beta-enabling-redirects-using-the-enableredirects-flag) section for an alternative workflow.

1. Open your FastStore project in your preferred code editor and go to the `discovery.config.js` file within your project directory.
2. Inside `discovery.config.js`, add the `redirects` function. This function will define your redirect rules, for example:
`1
account: "{accountName}",
2
…
3
async redirects() {
4
 const redirects = require('./src/redirects.json');
5
 return redirects;
6
},
`
> The `redirects` function requires the `redirects.json` file, which you will create in the next step. This file contains the redirect definitions.
3. Go to the `src` folder, create the `redirects.json` file, and add the following:
`1
[
2
 {
3
 "source": "/office",
4
 "destination": "/about",
5
 "permanent": true
6
 }
7
]
`
| Property name | Description                                                                                |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| source        | Original URL pattern that triggers the redirect. In this example, any URL starting with /office will be redirected.                                                     |
| destination   | New URL to which users are sent. Here, /about is the destination for users coming from /office.                                                                         |
| permanent     | The type of redirect. Set to true for a permanent (308 status code) redirect, which search engines will cache. Set to false for a temporary (307 status code) redirect. |
> For more information about each property, refer to the [Next.js](https://read.calvincode.net/reader?url=https://nextjs.org/docs/pages/api-reference/next-config-js/redirects) documentation.
4. Run `yarn dev` to start your project in development mode.
5. Open a browser and go to the old URL (e.g., `/office`). If the redirect is set up correctly, you should be automatically redirected to the new URL (e.g., `/about`).

## (Beta) Enabling redirects using the `enableRedirects` flag

For projects requiring more than 1,024 redirects, you can enable the `enableRedirects` flag in the `discovery.config.js` file. This flag lets you manage redirects through the [Redirects](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/managing-url-redirects) feature in the VTEX Admin.

> This workflow, which uses both a code configuration and the [Redirects](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/managing-url-redirects) interface, is currently in beta.

1. Update your FastStore project to version `3.2.0` or higher. To do this, open your project in a code editor.
2. Open a terminal and run the following command to update the FastStore packages to the latest version:
`1
yarn upgrade -L --scope @faststore
`
3. With your FastStore project open, navigate to the `discovery.config.js` file in the project directory.
4. Within the `experimental` section, add `enableRedirects: true` to enable the redirects feature in the project, for example:
discovery.config.js
`1
…
2
experimental: {
3
 ...
4
 enableRedirects: true,
5
},
6
…
`
5. Run `yarn dev` to check for and address any errors before deploying this change to production.
6. Create a new branch and open a pull request to deploy the changes made in the `discovery.config.js` file to production.

Once the change is live, you can manage the store's redirects in VTEX Admin by following the instructions in [Managing URL redirects](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/managing-url-redirects--3UJuFrU8imSVWg134mkvJV).

## Creating rewrites

FastStore leverages [Next.js rewrites](https://read.calvincode.net/reader?url=https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites) to create custom routes while using existing Product Listing Page (PLP) templates. This allows you to map specific URLs to templates defined in Headless CMS, providing flexibility in content organization and URL structure.

For more information on using rewrites with a PLP template, refer to the [Using rewrites with PLP template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template%23product-listing-page-plp-template-selection-criteria) section in the Multiple Page Templates documentation.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/routing/managing-urls-with-redirects-and-rewrite-paths.mdx)

[Adding available installment information in PDP« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/api-extensions-use-cases-adding-installment-information-in-the-product-details-page)[Managing performanceNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/managing-performance-overview)

Contributors

1

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

ON THIS PAGE

[Redirect behavior and caveats](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23redirect-behavior-and-caveats)

[Native routes take precedence](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23native-routes-take-precedence)[Query strings are not forwarded by default](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23query-strings-are-not-forwarded-by-default)

[Creating redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23creating-redirects)

[(Beta) Enabling redirects using the enableRedirects flag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23beta-enabling-redirects-using-the-enableredirects-flag)

[Creating rewrites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23creating-rewrites)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/routing/managing-urls-with-redirects-and-rewrite-paths.mdx)

Copy page

On this page

ON THIS PAGE

[Redirect behavior and caveats](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23redirect-behavior-and-caveats)

[Native routes take precedence](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23native-routes-take-precedence)[Query strings are not forwarded by default](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23query-strings-are-not-forwarded-by-default)

[Creating redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23creating-redirects)

[(Beta) Enabling redirects using the enableRedirects flag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23beta-enabling-redirects-using-the-enableredirects-flag)

[Creating rewrites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths%23creating-rewrites)

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] How do I use the VTEX store components infocard app? Provide documentation and configuration details.

[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/apps/vtex.store-components/InfoCard/docs/guides)

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

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

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

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

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/apps/vtex.my-account)

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/apps/vtex.my-account)

---

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

---

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

Info Card

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

Version: 3.178.5

Latest version: 3.178.5

The `info-card` component groups information on a single topic. It often includes text, an image, and a call-to-action button.

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

## Configuration

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

`1

 "dependencies": {

2

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

3

 }

`

1. Add the `info-card` block to the desired page template.
2. Add the `info-card` block to the same template file using the props stated in the [Props](#props) table. For example:

`1

 "info-card": {

2

 "props": {

3

 "id": "info-card-example",

4

 "isFullModeStyle": false,

5

 "textPosition": "left",

6

 "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",

7

 "headline": "Clearance Sale",

8

 "callToActionText": "DISCOVER",

9

 "callToActionUrl": "/sale/d",

10

 "blockClass": "info-card-example",

11

 "textAlignment": "center",

12

 "fetchpriority": "auto",

13

 "preload": true

14

 }

15

 },

`

### Props

| Prop name              | Type              | Description                                                                                | Default value |
| ---------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass             | String            | Extra class name for custom styling.                                                                                | null          |
| callToActionLinkTarget | LinkTargetEnum    | Where to display the call-to-action component's linked URL, as the name for a browsing context (a tab, window, or iframe). | "\_self"      |
| callToActionMode       | CallToActionEnum  | Mode of the call-to-action component.                                                                                | "button"      |
| callToActionText       | string            | Text displayed inside the call-to-action component.                                                                        | ""            |
| callToActionUrl        | string            | URL of the call-to-action component.                                                                                | ""            |
| headline               | string            | Headline of the Info Card.                                                                                | null          |
| htmlId                 | string            | ID of the container element.                                                                                | null          |
| imageUrl               | string            | Path to the image used on desktop devices.                                                                                | ""            |
| imageActionUrl         | string            | Redirect URL used when the image component is clicked.                                                                     | ""            |
| isFullModeStyle        | boolean           | Style of the Info Card component. If true, the image component is used as the background, and text is displayed over it.   | false         |
| linkTarget             | LinkTargetEnum    | Where to display the linked URL when the Info Card component is clicked.                                                   | "\_self"      |
| mobileImageUrl         | string            | Path to the image used on mobile devices. If empty, the desktop image is used.                                             | null          |
| subhead                | string            | Text to be displayed underneath the headline. If not provided, it will not be rendered.                                    | null          |
| bodyText               | string            | Text to be displayed underneath the subhead. If not provided, it will not be rendered.                                     | null          |
| textAlignment          | TextAlignmentEnum | Text alignment inside the component: left, center or right. This prop is ignored if isFullModeStyle is true.               | "left"        |
| textMode               | TextModeEnum      | Text mode used to process the text from headline and subhead props.                                                        | "html"        |
| textPosition           | TextPositionEnum  | Position of the text component: left, center or right.                                                                     | "left"        |
| fetchpriority          | string            | The fetch priority hint ('high', 'low' or 'auto').                                                                         |               |
| auto                   |                   |                                                                                |               |
| preload                | boolean           | Preloads the first image in a list, prioritizing the image display over other assets.                                      |               |
| false                  |                   |                                                                                |               |

#### `TextPositionEnum` possible values

| Enum name | Enum value | Description                                                                            |
| --------- | ---------- | -------------------------------------------------------------------------------------- |
| Left      | 'left'     | Text will be on the left. If isFullModeStyle is false, the image will be on the right. |
| Center    | 'center'   | Text will be in the center. Not applicable if isFullModeStyle is false.                |
| Right     | 'right'    | Text will be on the right. If isFullModeStyle is false, the image will be on the left. |

#### `CallToActionEnum` possible values

| Enum name | Enum value | Description                                                      |
| --------- | ---------- | ---------------------------------------------------------------- |
| None      | none       | Does not render any call-to-action components.                   |
| Button    | button     | Renders the call-to-action component as a button.                |
| Link      | link       | Renders the call-to-action component as a text in a link format. |

#### `LinkTargetEnum` possible values

These values are the same ones supported by HTML5 anchor tags. For more information, please read the [MDN](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) documentation.

| Enum name      | Enum value | Description                                                                                |
| -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Self (default) | \_self     | Opens the link in the current browsing context.                                                                                |
| Blank          | \_blank    | Opens the link in a new tab, but users can configure browsers to open a new window instead.                                                                   |
| Parent         | \_parent   | Opens the link in the parent browsing context of the current one. If there is no parent, it behaves as \_self.                                                |
| Top            | \_top      | Opens the link in the topmost browsing context (the "highest" context that is an ancestor of the current one). If there is no ancestor, it behaves as \_self. |

#### `TextModeEnum` possible values

| Enum name | Enum value | Description                                                                                |
| --------- | ---------- | -------------------------------------------------------------------------------------------------------------------- |
| HTML      | html       | Uses HTML text for headline and subhead props.                                                                       |
| Rich Text | rich-text  | Uses markdown text and the [rich-text block](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/rich-text) for headline and subhead props. |

## Customization

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

| CSS Handles                 |
| --------------------------- |
| infoCardCallActionContainer |
| infoCardCallActionText      |
| infoCardContainer           |
| infoCardHeadline            |
| infoCardImage               |
| infoCardImageContainer      |
| infoCardImageLinkWrapper    |
| infoCardSubhead             |
| infoCardBodyText            |
| infoCardTextContainer       |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/apps/vtex.store-components)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/InfoCard/docs/apps/vtex.store-components/InfoCard%23props)

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

Was this helpful?

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

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/vtex-shipping-network)

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

[Integrating external orders via API to be used with VTEX Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/integrate-external-orders-vtex-tracking)

[VTEX Pick and Pack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/vtex-pick-and-pack)

[Multilevel Omnichannel Inventory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/multilevel-omnichannel-inventory)

[Pickup point](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/setting-up-white-label-seller-as-pickup-point)

[Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/delivery-promise)

---

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/vtex-tracking/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/vtex-shipping-network)

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

[Integrating external orders via API to be used with VTEX Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/integrate-external-orders-vtex-tracking)

[VTEX Pick and Pack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/vtex-pick-and-pack)

[Multilevel Omnichannel Inventory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/multilevel-omnichannel-inventory)

[Pickup point](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/setting-up-white-label-seller-as-pickup-point)

[Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking/docs/guides/delivery-promise)

---

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/vtex-tracking/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Logistics

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

VTEX Tracking

VTEX Tracking is a VTEX solution focused on last mile delivery tracking.

Learn more about it in our help center [VTEX Tracking overview](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/vtex-tracking-overview--1uDRquVudbPuoK05MtbZGh%23) or check the developer's guide on how to [Integrate external orders via API to be used with VTEX Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/integrating-external-orders-via-api-to-be-used-with-vtex-tracking).

Contributors

1

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

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/Fulfillment/vtex-tracking/vtex-tracking.md)

[VTEX Shipping Network Labels Integration« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking//docs/guides/vtex-shipping-network-labels-integration)[Integrating external orders via API to be used with VTEX TrackingNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-tracking//docs/guides/integrate-external-orders-vtex-tracking)

Contributors

1

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

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/Fulfillment/vtex-tracking/vtex-tracking.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=)