[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 managing performance improving store performance with preact 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/managing-performance-improving-store-performance-with-preact/docs/guides)

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/sdk-overview)

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

[Testing server-side rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-testing-server-side-rendering)

[Improving store performance with Preact](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/sdk-overview)

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

[Testing server-side rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-testing-server-side-rendering)

[Improving store performance with Preact](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-overview)

Improving store performance with Preact

Enabling [Preact](https://read.calvincode.net/reader?url=https://preactjs.com/) in your FastStore project can reduce the package size used in the project and improve performance. Preact is a lightweight alternative to [React](https://read.calvincode.net/reader?url=https://react.dev/) that improves performance by reducing the size of the JavaScript bundle. Enabling Preact decreases the overall build size in a FastStore project, resulting in faster page load times and better performance.

| Before Preact                                                                                | After Preact                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":662,"height":502,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":31989,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before-preact___aa7837e2280b911dd89fe3df3171f298.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/before-preact___aa7837e2280b911dd89fe3df3171f298.png) | ![{"base64":"  ","img":{"width":673,"height":487,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30663,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/after-preact___d5254919671e8304591421d3ec542610.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/after-preact___d5254919671e8304591421d3ec542610.png)                              |
| The initial load times for store pages varied significantly, with some pages requiring up to 159 KB of JavaScript to load initially. This resulted in slower performance and longer wait times for users. Additionally, the shared JavaScript bundle was 94.1 KB, further contributing to the initial load size.                                  | Preact optimized store performance by reducing the initial JavaScript load size for all pages. While some pages still required around 100–120 KB of JavaScript, this is an improvement compared to the previous 159 KB. The shared JavaScript bundle was also reduced to 58.7 KB. These optimizations led to faster load times and overall better performance for the store. |

## Before you begin

Before implementing Preact, take the following considerations:

### Update `@faststore/cli` package

Make sure the `@faststore/cli` package from your project is updated to the latest version. To do so, follow the instructions in [Updating the '@faststore/cli' package version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-updating-the-cli-package-version).

### Understand the experimental nature of Preact

Preact is currently an experimental feature, which may have limitations and could cause issues with some store customizations.

* Before using it in the production environment, make sure to test it to ensure compatibility with your store.
* Preact is a lightweight alternative to [React](https://read.calvincode.net/reader?url=https://react.dev/), with reduced feature support. This may lead to compatibility issues with advanced React APIs and some third-party libraries.

## Instructions

1. Open your FastStore project code.
2. Go to `discovery.config.js` file and add the `preact` flag in the `experimental` section:

> The `faststore.config.js` file is the legacy filename for `discovery.config.js`. If you still using the legacy name, please refer to [this release note](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/releases/tag/v3.0.123) to update it.

`1

experimental: {

2

 nodeVersion: 18,

3

 cypressVersion: 12,

4

 preact: true

5

}

`

1. Open the terminal and run `yarn dev` to start the development server with Preact enabled.
2. Run `yarn build` in your terminal to create a production-ready build and compare the size of the built store with Preact enabled. A smaller size indicates potential performance improvement.

Contributors

1

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

[Testing server-side rendering« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-testing-server-side-rendering)[SEONext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/seo-overview)

Contributors

1

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

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23before-you-begin)

[Update @faststore/cli package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23update-faststorecli-package)[Understand the experimental nature of Preact](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23understand-the-experimental-nature-of-preact)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23instructions)

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/managing-performance/improving-store-performance-with-preact.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23before-you-begin)

[Update @faststore/cli package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23update-faststorecli-package)[Understand the experimental nature of Preact](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23understand-the-experimental-nature-of-preact)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact/docs/guides/faststore/managing-performance-improving-store-performance-with-preact%23instructions)

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 3.178.5 AutocompleteResults 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@3.178.5/AutocompleteResults/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AutocompleteResults/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@3.178.5/AutocompleteResults/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@3.178.5/AutocompleteResults/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@3.178.5/AutocompleteResults/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@3.178.5/AutocompleteResults/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@3.178.5/AutocompleteResults/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Autocomplete Result List

[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 `autocomplete-result-list` component displays the autocomplete functionality in the search bar. This component serves mainly to ease the creation of custom autocomplete components for search engines.

![{"base64":"  ","img":{"width":1870,"height":767,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":2137387,"url":"https://user-images.githubusercontent.com/67270558/147763822-a47487e7-35d1-4d42-a30e-2b505209b5f2.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/67270558/147763822-a47487e7-35d1-4d42-a30e-2b505209b5f2.gif)

## Configuration

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

`1

 "dependencies": {

2

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

3

 }

`

1. Add the `autocomplete-result-list` block into the `search-bar` component. For example:

`1

 "search-bar": {

2

 "blocks": [

3

+ "autocomplete-result-list"

4

 ]

5

 }

`

1. Then, declare the `autocomplete-result-list` block using the props stated in the [Props](#props) table.

### Props

> Info
>
> The `autocomplete-result-list` block is commonly used with [Downshift](https://read.calvincode.net/reader?url=https://github.com/downshift-js/downshift). Hence, some of its props are directly related to it.

| Prop name                    | Type             | Description                                                                                | Default value |
| ---------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| attemptPageTypeSearch        | Boolean          | Uses the input term to try to navigate to the proper page type (e.g. a department, a brand, a category) if true.                                                                                | \-            |
| classes                      | CustomCSSClasses | Overrides default CSS handles. To better understand how this prop works, check [this document](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only helpful if you're using this block as a React component. | undefined     |
| closeMenu (Downshift)        | Function         | Closes the menu.                                                                                | \-            |
| customSearchPageUrl          | String           | Template for a custom URL. It accepts a substring ${term} as placeholder to interpolate the searched term (e.g., /search?query=${term}).                                                                                | \-            |
| data                         | Object           | Graphql data response.                                                                                | {}            |
| highlightedIndex (Downshift) | Number           | The index that should be highlighted.                                                                                | \-            |
| getItemProps (Downshift)     | Function         | Returns the props for every menu item element being rendered.                                                                                | \-            |
| getMenuProps (Downshift)     | Function         | Returns the props for the ul or root element of your menu.                                                                                | \-            |
| inputValue                   | String           | Search query.                                                                                | \-            |
| onClearInput                 | Function         | Clears the input.                                                                                | \-            |
| isOpen                       | Boolean          | Identifies if the autocomplete should be opened.                                                                                | \-            |

## Customization

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

| CSS Handles           |
| --------------------- |
| resultsItem           |
| resultsItemImage      |
| resultsItemName       |
| resultsList           |
| searchTerm            |
| spinnerContainer      |
| spinnerInnerContainer |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AutocompleteResults/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@3.178.5/AutocompleteResults/docs/apps/vtex.store-components@3.178.5/AutocompleteResults%23configuration)

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/AutocompleteResults/docs/apps/vtex.store-components@3.178.5/AutocompleteResults%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 io documentation vtex io cli usage in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/code-samples)

---

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

---

Project structure

---

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

[Installing VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-install)

[Updating VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-update)

[Using VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage)

[Managing plugins](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-plugins)

[Command reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-command-reference)

[Uninstalling VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-uninstall)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

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

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

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

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

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

---

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/code-samples)

---

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

---

Project structure

---

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

[Installing VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-install)

[Updating VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-update)

[Using VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage)

[Managing plugins](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-plugins)

[Command reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-command-reference)

[Uninstalling VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-uninstall)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

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

[Using VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage)

Using VTEX IO CLI

## Accessing the list of commands

Start using VTEX IO CLI by running the following command to access a summary of the CLI default commands.

`1

vtex help

`

![{"base64":"  ","img":{"width":2206,"height":3054,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":842259,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-0.png)

> See the [Command Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-command-reference) for more details.

## Logging in to your VTEX account

Log in to your VTEX account by running the following command:

`1

vtex login {accountName}

`

> Remember to replace the value in curly brackets with the values that apply to your scenario.

After running this command, a new tab will open in your browser, asking you to log in to the desired VTEX account with your email.

Once logged in, the web page will display the following message: _“You may now close this window.”_

When you return to the computer terminal, you will have access to a development environment for this VTEX account. You will see some basic information about your account displayed as follows:

![{"base64":"  ","img":{"width":2206,"height":864,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":203122,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-1.png)

> If you decide to work on another account later, run the command `vtex switch {accountName}`, specifying the account name to which you want to switch.

## Creating a new workspace

After logging in to a VTEX account, you will be automatically directed to the `master` workspace, the version publicly available to end users.

To start customizing your storefront or developing a VTEX IO app, you must switch from the master workspace to a development one.

To switch to an existing development workspace or create a new one, run the following command:

`1

vtex use {workspaceName}

`

Notice that if a workspace with the chosen name already exists, you will be directed to it.

![{"base64":"  ","img":{"width":2206,"height":586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":131346,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-2.png)

Otherwise, you will be prompted to confirm whether you want to create a new workspace.

![{"base64":"  ","img":{"width":2206,"height":586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":123342,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-3.png)

From now on, all operations will be performed within the specified workspace.

## Verifying your environment

To verify the account you are currently logged in to and the workspace you are using, run the following command:

`1

vtex whoami

`

## Installing an app

To install an app on your current account and workspace, use the following command:

`1

vtex install {appVendor}.{appName}@{appVersion}

`

> Remember to replace the values in curly brackets with the values that apply to your scenario.

If you try to install an app that has [Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-billing-options), you must first access the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/) and agree to the app terms and conditions.

![{"base64":"  ","img":{"width":2206,"height":1072,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":227809,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-4.png)

1. If you type `Y`, the app page you wish to install from the VTEX App Store will open in your browser.
2. To proceed with the installation, click `GET APP` \> `CONFIRM` to log in to your VTEX store.
3. Read and agree to the app's Terms and Conditions.

> Note that some apps are free, and others may have specific charging methods.

## Starting a new project

To start a new project from pre-defined templates, you can run the following command:

`1

vtex init

`

![{"base64":"  ","img":{"width":2206,"height":1200,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":236701,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-5.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-5.png)

For example, choose the `store` option to start developing a Store Theme app. This will clone the [Store Theme](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store) boilerplate app to your local files.

## Developing locally

To develop locally, navigate to the directory of the app you are working on and run the following command to synchronize your local files with the VTEX platform.

`1

vtex link

`

![{"base64":"  ","img":{"width":2206,"height":1232,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":340494,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-6.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-6.png)

VTEX IO CLI will monitor your files and provide a URL related to that workspace. You will be able to access it through `https://{workspace}--{account}.myvtex.com` by replacing the value between curly braces with the name of the workspace previously created and your VTEX account. For example, `https://marianacaetano--appliancetheme.myvtex.com`.

By accessing this URL, you can observe any local changes made to the linked files.

## Checking the installed apps

To check apps installed on your account, you can run the following command:

`1

vtex list

`

The installed apps are classified as follows:

1. Apps automatically installed by your account [Edition App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app).
2. Apps manually installed on the current workspace.
3. Apps linked to the current workspace.

## Authenticating API requests

You can use the VTEX IO CLI to generate a unique and temporary [user token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23user-token), which can be helpful when running tests with VTEX APIs.

To generate a user token, run the following command:

`1

vtex local token

`

The token will be automatically copied to the clipboard and can be used to authenticate requests for 24 hours. Learn more about [user tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23user-token).

> The authentication of VTEX IO apps does not require this token. If you are developing VTEX IO apps, please refer to the [App authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-authentication%23app-authentication) guide.

## Learning more about a command

Use the `--help` flag as shown below to learn more about a specific command.

`1

vtex [COMMAND] --help

`

![{"base64":"  ","img":{"width":2206,"height":1340,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":257798,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-7.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-vtex-io-cli-usage-7.png)

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/vtex-io-documentation-vtex-io-cli-installation-and-command-reference/vtex-io-documentation-vtex-io-cli-usage.md)

[Updating VTEX IO's CLI« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage//docs/guides/vtex-io-documentation-vtex-io-cli-update)[Managing pluginsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage//docs/guides/vtex-io-documentation-vtex-io-cli-plugins)

Contributors

1

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

ON THIS PAGE

[Accessing the list of commands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23accessing-the-list-of-commands)

[Logging in to your VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23logging-in-to-your-vtex-account)

[Creating a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23creating-a-new-workspace)

[Verifying your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23verifying-your-environment)

[Installing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23installing-an-app)

[Starting a new project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23starting-a-new-project)

[Developing locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23developing-locally)

[Checking the installed apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23checking-the-installed-apps)

[Authenticating API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23authenticating-api-requests)

[Learning more about a command](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23learning-more-about-a-command)

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/Reference/vtex-io-documentation-vtex-io-cli-installation-and-command-reference/vtex-io-documentation-vtex-io-cli-usage.md)

Copy page

On this page

ON THIS PAGE

[Accessing the list of commands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23accessing-the-list-of-commands)

[Logging in to your VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23logging-in-to-your-vtex-account)

[Creating a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23creating-a-new-workspace)

[Verifying your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23verifying-your-environment)

[Installing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23installing-an-app)

[Starting a new project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23starting-a-new-project)

[Developing locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23developing-locally)

[Checking the installed apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23checking-the-installed-apps)

[Authenticating API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23authenticating-api-requests)

[Learning more about a command](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23learning-more-about-a-command)

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 how search parameters work 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/how-search-parameters-work/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work)

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/search-control-fulltextsearchbox)

[Consult store search terms information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/consult-store-search-terms-information)

[Consult product search information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/consult-product-search-information)

[Get banner list for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/get-banner-list-for-a-specific-search)

[Get a list of the possible facets for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/vtex-io-documentation-segmenting-the-search-result)

[Access Control List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/access-control-list)

[Delivery promise for headless stores (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/delivery-promise-for-headless-stores)

---

Storefront Permissions

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work)

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/search-control-fulltextsearchbox)

[Consult store search terms information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/consult-store-search-terms-information)

[Consult product search information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/consult-product-search-information)

[Get banner list for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/get-banner-list-for-a-specific-search)

[Get a list of the possible facets for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/vtex-io-documentation-segmenting-the-search-result)

[Access Control List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/access-control-list)

[Delivery promise for headless stores (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/delivery-promise-for-headless-stores)

---

Storefront Permissions

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work)

How search parameters work

> VTEX has two search options: Legacy Search and Intelligent Search. This article is about Legacy Search. To learn more about the Intelligent Search application, see [this track](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb).

When making a search on VTEX, there are different options for URLs. The URLs of departments and categories are formatted according to the category tree.

![{"base64":"  ","img":{"width":374,"height":280,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":15887,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-0.png)

For example, in the category tree above, the URLs are the following:

* `www.store.com/clothes`
* `www.store.com/clothes/women`
* `www.store.com/clothes/women/shirts`

The URL will always contain the term entered in the search field:

![{"base64":"  ","img":{"width":971,"height":76,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":5237,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-1.png)

`www.store.com/shoes`

The browsing filters also have specific URLs defined by certain parameters in the URL, which can follow one of these options:

* [Default 1](#default-1): Valid only for Legacy CMS Portal stores.
* [Default 2](#default-2): Valid for Legacy CMS Portal and Store Framework stores. Recommended for best performance results.

## Default 1

> This option works only for Legacy CMS Portal stores. Refer to [Default 2](#default-2) for Store Framework stores.

| URL                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| www.store.com/busca/?fq=C:\[DepartmentId/CategoryId/SubcategoryId\]&fq=B:\[BrandId\]&fq=H:\[CollectionId\]&fq=specfct\[ProductFieldId/Sku\]:\[SearchValue\]&ft=\[SearchTerm\] |

Where:

* **C:\[DepartmentId/CategoryId/SubcategoryId\]:** Shows products of a specific category based on the IDs indicated for the department, category, and subcategory. This code appears next to category names in **Products** \> **Catalog** \> **Categories**.
![{"base64":"  ","img":{"width":382,"height":288,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21913,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-2.png)
> The category ID can also be found on your edit page at the end of the URL.
* **B:\[BrandId\]:** Shows products from a specific brand based on the indicated ID. This code is shown at the end of the URL, on the page used for changing the brand, in**Products**\>**Catalog**\>**Brands**.
![{"base64":"  ","img":{"width":2022,"height":450,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":52188,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-3.png)
* **H:\[CollectionId\]**: Shows products of a specific collection based on the indicated ID. This code is indicated when editing a collection in**Store setup** \> **CMS** \> **Layout** \> **CMS** \> **Product Clusters (Collections)**.
![{"base64":"  ","img":{"width":1648,"height":692,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":78821,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-search-parameters-work-4.png)
> There are two ways to configure collections: through the Legacy CMS Portal or the Collections module (Beta). Refer to [Adding collections CMS](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/adding-collections-cms--2YBy6P6X0NFRpkD2ZBxF6L) for more information on how to configure collections through the Legacy CMS Portal.
* **spec\_fct\_\[ProductFieldId/Sku\]:\[SearchValue\]:** Shows products whose product or SKU field value, with the indicated ID, is equal to the entered value. This code can be found on the page for changing a product/SKU field at the end of the URL.
`1
https://store.myvtex.com/admin/Site/ProdutoForm.aspx?id=93
`
Below is an example of how to use this field:
`1
www.store.com.br/busca/?fq=spec_fct_1:110v
`
In the example above, all products whose **Voltage**(ID **1**) field is **110v** would be displayed.
* **ft=\[SearchTerm\]**: This parameter represents a full-text search (for example, searching a specific term in the search field) of the specified term based on the other indicated parameters.

The parameters above can be matched in many ways. However, note that the search order will follow the order of the indicated parameters. In other words, when you use a category parameter followed by a brand parameter, the category will be searched first. Then, a second search will be made for the brand among the category results.

## Default 2

> Store Framework stores must use Default 2.

| URL                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| www.store.com.br/\[CategoryName\]/\[BrandName\]/\[CollectionId\]/\[SearchValue\]?map=c,b,productClusterIds,specificationFilter\_\[ProductFieldId/Sku\] |

Where:

* **/\[CategoryName\]?map=c**: Displays products whose category is specified by the name indicated in the URL.
* **/\[BrandName\]?map=b**: Displays products whose brand is specified by the name indicated in the URL.
* **/\[CollectionId\]?map=productClusterIds**: Displays products whose collection is specified by the ID indicated in the URL.
* **\[SearchValue\]?map=specificationFilter\_\[ProductFieldId/Sku\]**: Displays products whose product/SKU field value, with the indicated ID, is equal to the entered value.

The parameters above can also be matched among them. The order of the values indicated in the `map` parameter will define the interpretation of each value present at the beginning of the URL (between `/`).

Contributors

3

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

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Search/how-search-parameters-work.md)

[How to load test a store« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work//docs/guides/how-to-load-test-a-store)[Search Control – fulltextSearchBoxNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work//docs/guides/search-control-fulltextsearchbox)

Contributors

3

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

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

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

ON THIS PAGE

[Default 1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work%23default-1)

[Default 2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work%23default-2)

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/Search/how-search-parameters-work.md)

Copy page

On this page

ON THIS PAGE

[Default 1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work%23default-1)

[Default 2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-search-parameters-work/docs/guides/how-search-parameters-work%23default-2)

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