[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 store framework routing 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/store-framework-routing/docs/guides)

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

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

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

Storefront Development

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

---

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

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-store-theme)

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

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-dealing-with-events)

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

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing)

[Adding custom headers to your Store Framework store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-adding-custom-headers-to-your-store-framework-store)

[Best practices for associating a custom page with a content type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type)

[Customizing your 404 page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-customizing-your-404-page)

[Enabling 404 pages for invalid single-segment paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-enabling-404-pages-for-invalid-single-segment-paths)

[Managing URL redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-managing-url-redirects)

[Using several service workers in your store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-using-several-service-workers-in-your-store)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-managing-performance)

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

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-store-theme)

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

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-dealing-with-events)

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

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing)

[Adding custom headers to your Store Framework store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-adding-custom-headers-to-your-store-framework-store)

[Best practices for associating a custom page with a content type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type)

[Customizing your 404 page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-customizing-your-404-page)

[Enabling 404 pages for invalid single-segment paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-enabling-404-pages-for-invalid-single-segment-paths)

[Managing URL redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-managing-url-redirects)

[Using several service workers in your store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-using-several-service-workers-in-your-store)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-managing-performance)

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

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

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

---

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

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

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing)

Routing

Learn how routing is managed in VTEX IO Store Framework.

A route maps a URL pattern and an HTTP request method to an action. It defines how the application responds to client requests for specific endpoints.

When using [VTEX IO Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework), you do not need to manage routing and HTTP methods directly. Instead, routing and HTTP request methods are managed by either the [Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rewriter) app or the [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder), depending on the route type. This allows you to focus on creating and managing route paths and page templates.

In Store Framework, different apps and builder manage various types of routes. The table below outlines the primary managers for each route type:

| Route type         | Responsibility | Description                                                                                |
| ------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product routes** | Rewriter app   | Routes related to product pages, forwarded by the Rewriter app to the rendering pipeline.                                                                                |
| **Search routes**  | Rewriter app   | Routes related to search result pages, processed and forwarded by the Rewriter app.                                                                                |
| **Catalog routes** | Rewriter app   | Custom routes for predefined templates (e.g., [department](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store/blob/master/store/routes.json%23L27), [brand](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store/blob/master/store/routes.json%23L21), and [category](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store/blob/master/store/routes.json%23L33) handled by the Rewriter app and mapped to the appropriate page. |
| **Custom routes**  | Store builder  | User-defined routes for custom landing pages or other routes that fall outside of predefined product or category routes, directly managed by the store builder and forwarded to the render server.                                                                                |

The [Rewriter app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rewriter) interprets the requested path, identifies the route type, and then forwards the route path to the rendering pipeline. Learn more in [Rewriter GraphQL API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rewriter@1.63.0/rewriter-graphql-api). Meanwhile, the [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder) forwards custom route paths directly to the render server. To learn how to create a custom page, see the [Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-new-custom-page) guide.

In this section, you will learn how to manage routes in your Store Framework store.

## Before you begin

### Develop your Store Theme

Make sure your store has a [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) developed following the [Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) tutorial.

### Check the builders

Check if the builders are properly installed in your Store Theme. To use builders, your account must have at least version `vtex.builder-hub@0.293.4` installed. Also, you need to specify them in the app's `manifest.json` file. Learn more in [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders).

Make sure the [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder) is configured, as it enables the development of Store Framework storefronts.

### Check Rewriter installation

To check if the [Rewriter app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rewriter) is installed in your store, follow the guide [Listing an account's apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-listing-an-accounts-apps) and search for `vtex.rewriter` in the **Installed apps** list. If it is not, install the app by following the guide [Installing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app).

## Guides in this section

[Best practices for associating a custom page with a content typeConfigure URLs effectively when associating custom pages with content types.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type)[Enabling 404 pagesLearn how to enable and configure 404 error pages for better user experience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-enabling-404-pages)[Managing URL redirectsDiscover how to manage URL redirects to ensure seamless navigation.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-managing-url-redirects)[Using several service workers in your storeExplore how to use multiple service workers to enhance your store’s performance and offline capabilities.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-several-service-workers-in-your-store)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/_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/guides/vtex-io/Storefront-Guides/store-framework-routing.md)

[Overwriting the Messages app« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing//docs/guides/vtex-io-documentation-overwriting-the-messages-app)[Adding custom headers to your Store Framework storeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing//docs/guides/vtex-io-documentation-adding-custom-headers-to-your-store-framework-store)

Contributors

1

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

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23check-the-builders)[Check Rewriter installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23check-rewriter-installation)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23guides-in-this-section)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/store-framework-routing.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23check-the-builders)[Check Rewriter installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23check-rewriter-installation)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-routing/docs/guides/store-framework-routing%23guides-in-this-section)

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 product highlights 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.product-highlights/docs/guides)

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

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

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.breadcrumb)

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

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/guides/google-one-tap-login)

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

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.breadcrumb)

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

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/guides/google-one-tap-login)

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

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Product Highlights

Official extension

Version: 2.3.2

Latest version: 2.3.2

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

The Product Highlights app provides blocks to display highlight badges on products according to the collection or promotion they are linked to.

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

_In the image above, the product has a `Top Seller` highlight._

## Configuration

### Step 1 - Adding the Product Highlights app to your theme dependencies

In your theme `manifest.json` file, add the Product Highlights app as a dependency:

`1

 "dependencies": {

2

+ "vtex.product-highlights": "2.x"

3

}

`

Now, you can use all the blocks exported by the `product-highlights` app. See the full list below:

| Block name                | Description                                                                                |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| product-highlights        | Parent block for defining how the Product Highlights component will be displayed, based on its children blocks (product-highlight-text and product-highlight-wrapper) and props. |
| product-highlight-text    | Renders a span HTML tag with the highlight name. It also provides data attributes and CSS handles for style customizations.                                                      |
| product-highlight-wrapper | You may use this block if you need to render other blocks alongside the highlight name. It renders a div HTML tag and its children blocks, if any.                               |

### Step 2 - Adding the Product Highlights blocks to your theme templates

Copy one of the examples stated below and paste it into your desired theme template, making the necessary changes. If needed, add the `product-highlights` block to the template block list.

* Simple example:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "children": ["product-highlight-text"]

4

 },

5

 "product-highlight-text": {

6

 "props": {

7

 "message": "{highlightName}"

8

 }

9

 }

10

}

`

* Example using the `link` prop:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "children": ["product-highlight-text"]

4

 },

5

 "product-highlight-text": {

6

 "props": {

7

 "message": "{highlightName}",

8

 "link": "/collection/{highlightId}"

9

 }

10

 }

11

}

`

* Example using `product-highlight-wrapper`:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "children": ["product-highlight-wrapper"]

4

 },

5

 "product-highlight-wrapper": {

6

 "children": [

7

 "icon-star", // You can add anything inside a product-highlight-wrapper

8

 "product-highlight-text"

9

 ]

10

 },

11

 "product-highlight-text": {

12

 "props": {

13

 "message": "{highlightName}"

14

 }

15

 }

16

}

`

* Example using the prop `filter` and the prop `type`:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "props": {

4

 "type": "teaser",

5

 "filter": {

6

 "type": "show",

7

 "highlightNames": ["10% Boleto"]

8

 }

9

 },

10

 "children": ["product-highlight-text"]

11

 },

12

 "product-highlight-text": {

13

 "props": {

14

 "message": "{highlightName}",

15

 "blockClass": "boleto"

16

 }

17

 }

18

}

`

> warning
>
> Note that **the Product Highlights blocks require a Product context to work properly, as they handle product data**. Therefore, when declaring these blocks, ensure that they are in a theme template or block where this context is available, such as the `store.product` and `product-summary.shelf`.

#### `product-highlights` props

| Prop name | Type   | Description                                                                                | Default value |
| --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| type      | enum   | The desired type of product highlight to be displayed. Possible values are: collection, promotion, and teaser. collection highlights the product's collection, so it must be used with the [Collection Highlight](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/collection-highlight-control--1tGdb2ndjqy6yWsk2YwKMu?locale=en) feature. promotion and teaser should be used when the product is configured with a [promotion that includes highlights](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/configuring-promotions-with-a-highlightflag--tutorials%5F2295?locale=en). It can be used even if the promotion does not have any restrictions. On the other hand, the teaser must only be used when the promotion has restrictions. ⚠\* Note that nominal promotions will only be displayed in the cart, not on the shelf or product page.\* | collection    |
| filter    | object | Defines which highlights should and should not be displayed by the block.                                                                                | undefined     |

> Technically, the `collection` highlight maps to the [clusterHighlights](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/ea1d7e244e6b00b58e5aa4272fbb16987c483468/graphql/types/Product.graphql%23L29) property; the `promotion` highlight maps to the [discountHighlights](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/ea1d7e244e6b00b58e5aa4272fbb16987c483468/graphql/types/Product.graphql%23L283) property; and the `teaser` highlight maps to the [teasers](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/ea1d7e244e6b00b58e5aa4272fbb16987c483468/graphql/types/Product.graphql%23L284) property.

* **`filter` object:**

| Prop name      | Type       | Description                                                                                | Default value |
| -------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| highlightNames | \[string\] | An array of highlight names that determine which highlights should be hidden or shown based on the type property defined in the product-highlights block.                                                                                | undefined     |
| type           | enum       | Determines whether the highlights for the highlightNames prop should be displayed or hidden on the UI. Possible values are: hide (hides highlights declared in the highlightNames prop) or show (only shows the highlights declared in the highlightNames prop). | undefined     |

#### `product-highlight-text` props

| Prop name  | Type       | Description                                                                                | Default value |
| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass | string     | The block ID you chose to be used for [CSS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property).                                                                                | undefined     |
| message    | string     | Defines the block default text message to be rendered in the UI. You can also use the Admin Site Editor and the markers prop to specify the text message that the block will render on the UI.                                                                                | undefined     |
| markers    | \[string\] | IDs you chose to identify the block's rendered text message and customize it using the Admin Site Editor. Learn how to use them in [Using the Markers prop to customize a block message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message). Note that a block message can also be customized in the Store Theme source code using the message prop. | \[\]          |
| link       | string     | If this prop is set, it creates a link to the string passed. You can interpolate the variables highlightText and highlightId. Example: /collection/{highlightId}.                                                                                | undefined     |

#### `product-highlight-wrapper` props

| Prop name  | Type   | Description                                                                                | Default value |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| blockClass | string | The block ID you chose to be used in [CSS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property). | undefined     |

### Step 3 - Editing the `product-highlight-text` messages

The `product-highlight-text` block uses the [ICU Message Format](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/), enabling comprehensive customization of the rendered text messages.

When using the `message` prop, you will not need to create an advanced configuration: declare the prop directly in your Store Theme app and pass to it the desired text value to be rendered with the block.

The `markers` prop, in turn, requires you to add an extra configuration in the Site Editor of the Admin to properly work. When using this prop, do not forget to check out the block's message variables (shown in the table below) and the [Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message) documentation.

| Message variable | Type   | Description          |
| ---------------- | ------ | -------------------- |
| highlightName    | string | Highlights the name. |

## Customization

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

| CSS handles             |
| ----------------------- |
| productHighlightText    |
| productHighlightWrapper |

| Data attributes     |
| ------------------- |
| data-highlight-name |
| data-highlight-id   |
| data-highlight-type |

[Product Customizer« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-customizer)[Product IdentifierNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-identifier)

See also

[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.product-highlights/docs/apps/vtex.product-highlights%23configuration)

[Step 1 - Adding the Product Highlights app to your theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-highlights%23step-1-adding-the-product-highlights-app-to-your-theme-dependencies)[Step 2 - Adding the Product Highlights blocks to your theme templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-highlights%23step-2-adding-the-product-highlights-blocks-to-your-theme-templates)[Step 3 - Editing the product-highlight-text messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-highlights%23step-3-editing-the-product-highlight-text-messages)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-highlights/docs/apps/vtex.product-highlights%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 search integration guide in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-seller-integration-guide)

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

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/search-integration-guide)

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-overview)

[Specification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-specification)

[Recipe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-recipe)

[Reference Implementations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-reference)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/recaptcha)

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-seller-integration-guide)

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

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/search-integration-guide)

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-overview)

[Specification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-specification)

[Recipe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-recipe)

[Reference Implementations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/external-search-provider-reference)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/recaptcha)

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Integration Guides

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide/docs/guides/search-integration-guide)

Search Protocol

The Search Protocol defines the contract between an external search provider and a VTEX store running on VTEX IO. If a search provider adheres to this protocol, it can replace completely the original VTEX search capabilities without needing to implement any frontend pages or react components.

The main idea is to provide the ability for a search provider to integrate with the minimum amount of work necessary and a VTEX customer to easily switch search providers without having to change anything in the storefront.

[ Overview  A high-level explanation about how the Search Protocol works ](external-search-provider-overview)

[ Specification  Understanding the protocol specification to better work with it ](external-search-provider-specification)

[ Recipe  Follow these steps to integrate with your external search provider ](external-search-provider-recipe)

[ Reference Implementations  Get to know best practices by checking these references. ](external-search-provider-reference)

Contributors

2

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

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/Integration-Guides/search-integration-guide.md)

[Google Pay: processing information for payment providers and anti-fraud« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide//docs/guides/google-pay-processing-information-for-payment-providers-and-anti-fraud)[OverviewNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-integration-guide//docs/guides/external-search-provider-overview)

Contributors

2

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

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/Integration-Guides/search-integration-guide.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=)