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

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

[Queries](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries)

[Mutations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-mutations)

[Objects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-objects)

[Inputs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-inputs)

[Enums](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-enums)

[Scalars](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-scalars)

[Configuring GraphQL cache control for GET requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/faststore-api-configuring-graphql-cache-control)

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

[Queries](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries)

[Mutations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-mutations)

[Objects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-objects)

[Inputs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-inputs)

[Enums](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-enums)

[Scalars](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-scalars)

[Configuring GraphQL cache control for GET requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/faststore-api-configuring-graphql-cache-control)

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Queries

Arguments must be provided by the user.

Arguments preceded by an exclamation mark (`!`) are not nullable.

## Product

| Field           | Argument                                                                                | Type                                                                                | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ----------- |
| **product**     | [StoreProduct](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23storeproduct)!                     | Returns the details of a product based on the specified locator.                                                        |             |
| locator         | \[[IStoreSelectedFacet](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-inputs%23istoreselectedfacet)!\]!   | An array of selected search facets.                                                                                |             |
| **allProducts** | [StoreProductConnection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23storeproductconnection)! | Returns information about all products.                                                                                |             |
| first           | [Int](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23int)!                                       | Product pagination argument, indicating how many items should be returned from the complete result list.                |             |
| after           | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                                  | Product pagination argument, indicating the cursor corresponding with the item after which the items should be fetched. |             |

## Collection

| Field              | Argument                                                                                | Type                                                                                | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ----------- |
| **collection**     | [StoreCollection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23storecollection)!                     | Returns the details of a collection based on the collection slug.                                                          |             |
| slug               | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)!                                       | Collection slug.                                                                                |             |
| **allCollections** | [StoreCollectionConnection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23storecollectionconnection)! | Returns information about all collections.                                                                                |             |
| first              | [Int](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23int)!                                             | Collection pagination argument, indicating how many items should be returned from the complete result list.                |             |
| after              | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                                        | Collection pagination argument, indicating the cursor corresponding with the item after which the items should be fetched. |             |

## Search

| Field          | Argument                                                                                | Type                                                                                | Description |
| -------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------- |
| **search**     | [StoreSearchResult](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23storesearchresult)!        | Returns the result of a product, facet, or suggestion search.                                                            |             |
| first          | [Int](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23int)!                                    | Search pagination argument, indicating how many results should be returned from the complete result list.                |             |
| after          | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                               | Search pagination argument, indicating the cursor corresponding with the item after which the results should be fetched. |             |
| sort           | [StoreSort](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-enums%23storesort)                           | Search results sorting mode.                                                                                |             |
| term           | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                               | Search term.                                                                                |             |
| selectedFacets | \[[IStoreSelectedFacet](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-inputs%23istoreselectedfacet)!\] | Array of selected search facets.                                                                                |             |
| **redirect**   | [StoreRedirect](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23storeredirect)                 | Returns if there's a redirect for a search.                                                                              |             |
| term           | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                               | Search term.                                                                                |             |
| selectedFacets | \[[IStoreSelectedFacet](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-inputs%23istoreselectedfacet)!\] | Array of selected search facets.                                                                                |             |

## Shipping

| Field        | Argument                                                                                | Type                                           | Description |
| ------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
| **shipping** | [ShippingData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23shippingdata)        | Returns information about shipping simulation. |             |
| items        | \[[IShippingItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-inputs%23ishippingitem)!\]! | Shipping Simulation item input.                |             |
| postalCode   | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)!                   | Postal code to freight calculator.             |             |
| country      | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)!                   | Country of postal code.                        |             |

## Sellers

| Field          | Argument                                                                                | Type                                                             | Description |
| -------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------- |
| **sellers**    | [SellersData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-objects%23sellersdata)        | Returns a list of sellers available for a specific localization. |             |
| postalCode     | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                  | Postal code input to calculate sellers.                          |             |
| geoCoordinates | [IGeoCoordinates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-inputs%23igeocoordinates) | Geocoordinates input to calculate sellers.                       |             |
| country        | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)!                 | Country of localization.                                         |             |
| salesChannel   | [String](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-scalars%23string)                  | Sales channel of the navigation.                                 |             |

Contributors

2

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

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

[FastStore API« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/faststore-api-overview)[MutationsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-mutations)

Contributors

2

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

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

ON THIS PAGE

[Product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23product)

[Collection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23collection)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23search)

[Shipping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23shipping)

[Sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23sellers)

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/faststore-api/schema/queries.mdx)

Copy page

On this page

ON THIS PAGE

[Product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23product)

[Collection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23collection)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23search)

[Shipping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23shipping)

[Sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/schema-queries/docs/guides/faststore/schema-queries%23sellers)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore getting started overview 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/getting-started-overview/docs/guides)

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

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

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

Storefront Development

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

---

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

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

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-glossary)

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-glossary)

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

Getting started

Build and deploy your first FastStore storefront from scratch.

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore) is a headless commerce storefront framework built on [Next.js](https://read.calvincode.net/reader?url=https://nextjs.org/). It enables you to build high-performance, customizable ecommerce websites.

## What you'll build in this track

This track guides you through building your first FastStore storefront from scratch. By the end of this track, you’ll have a production-ready storefront deployed at `https://{accountName}.vtex.app/`, fully integrated with the Headless CMS for content management.

Below is an overview of the modules covered in this track:

[1\. Setting up your environmentPrepare your development environment and VTEX account with all required tools, apps, and configurations before starting your FastStore project.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment)[2\. Starting a new FastStore projectUse the WebOps app onboarding flow to create your FastStore project. It automatically sets up a GitHub repository and provides a live preview of your site.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project)[3\. Running the project locallyRun your FastStore project in a local development environment to preview changes in real time.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-3-running-the-project-locally)[4\. Understanding the project structureLearn how the FastStore project is organized, including its main directories, configurations, and code architecture.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-4-understanding-the-project-structure)[5\. Integrating your project with the Headless CMSConnect your FastStore project with the Headless CMS to manage and publish your store’s content efficiently.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-with-the-headless-cms)[6\. Next stepsDiscover additional resources and best practices to optimize your store’s performance and user experience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-6-next-steps)

Contributors

2

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

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

[FastStore versions and support levels« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)[1\. Setting up your environmentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-1-setting-up-your-environment)

Contributors

2

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

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

ON THIS PAGE

[What you'll build in this track](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-overview%23what-youll-build-in-this-track)

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/getting-started/overview.mdx)

Copy page

On this page

ON THIS PAGE

[What you'll build in this track](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-overview/docs/guides/faststore/getting-started-overview%23what-youll-build-in-this-track)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore molecules search products in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/developing-and-overriding-components-overview)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/developing-and-overriding-components-overview)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

SearchProducts

List of `SearchProductItem` to show details of the suggested products.

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

List of `SearchProductItem` to show details of the suggested products. This component is part of the [Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-search) feature.

Example

Code

Suggested Products

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

---

## Usage

### Import the component

`1

import {

2

 SearchProducts,

3

 SearchProductItem,

4

 SearchProductItemImage,

5

 SearchProductItemContent,

6

} from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

`

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

---

## Design tokens

| Local token                               | Default value/Global token linked       |
| ----------------------------------------- | --------------------------------------- |
| \--fs-search-products-padding-top         | var(--fs-spacing-2)                     |
| \--fs-search-products-padding-right       | var(--fs-spacing-3)                     |
| \--fs-search-products-padding-bottom      | var(--fs-search-products-padding-top)   |
| \--fs-search-products-padding-left        | var(--fs-search-products-padding-right) |
| \--fs-search-products-transition-property | var(--fs-transition-property)           |
| \--fs-search-products-transition-function | var(--fs-transition-function)           |
| \--fs-search-products-transition-timing   | var(--fs-transition-timing)             |

### Header

| Local token                                 | Default value/Global token linked            |
| ------------------------------------------- | -------------------------------------------- |
| \--fs-search-products-header-padding-top    | var(--fs-spacing-1)                          |
| \--fs-search-products-header-padding-bottom | var(--fs-search-products-header-padding-top) |

### Title

| Local token                             | Default value/Global token linked |
| --------------------------------------- | --------------------------------- |
| \--fs-search-products-title-size        | var(--fs-text-size-lead)          |
| \--fs-search-products-title-line-height | 1.5                               |

### Item

| Local token                               | Default value/Global token linked         |
| ----------------------------------------- | ----------------------------------------- |
| \--fs-search-product-item-padding-top     | var(--fs-spacing-1)                       |
| \--fs-search-product-item-padding-right   | var(--fs-search-product-item-padding-top) |
| \--fs-search-product-item-bkg-color-hover | var(--fs-color-tertiary-bkg-hover)        |

### Item control

| Local token                                   | Default value/Global token linked |
| --------------------------------------------- | --------------------------------- |
| \--fs-search-product-item-control-actions-gap | var(--fs-spacing-1)               |
| \--fs-search-product-item-control-input-width | 4.625rem                          |

### Item image

| Local token                                   | Default value/Global token linked |
| --------------------------------------------- | --------------------------------- |
| \--fs-search-product-item-image-border-radius | var(--fs-border-radius)           |
| \--fs-search-product-item-image-margin-right  | var(--fs-spacing-3)               |
| \--fs-search-product-item-image-size          | 3.5rem                            |

### Item title

| Local token                                   | Default value/Global token linked |
| --------------------------------------------- | --------------------------------- |
| \--fs-search-product-item-title-margin-bottom | var(--fs-spacing-0)               |
| \--fs-search-product-item-title-size          | var(--fs-text-size-2)             |
| \--fs-search-product-item-title-line-height   | 1.2                               |
| \--fs-search-product-item-title-color         | var(--fs-color-text)              |

### Item price

| Local token                          | Default value/Global token linked |
| ------------------------------------ | --------------------------------- |
| \--fs-search-product-item-price-gap  | var(--fs-spacing-1)               |
| \--fs-search-product-item-price-size | var(--fs-text-size-base)          |

---

## Data attributes

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

`data-fs-search-products`

`data-fs-search-products-header`

`data-fs-search-products-title`

`data-fs-search-product-item`

`data-fs-search-product-item-link`

`data-fs-search-product-item-image`

`data-fs-search-product-item-content`

---

## Props

All search product related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

### SearchProducts

| Name       | Type   | Description                                                                            | Default            |
| ---------- | ------ | -------------------------------------------------------------------------------------- | ------------------ |
| **testId** | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-products |
| **title**  | string | Title attribute for the <section> tag rendered by this component.                      | Suggested Products |

### SearchProductItem

| Name          | Type                                | Description                                                                            | Default                |
| ------------- | ----------------------------------- | -------------------------------------------------------------------------------------- | ---------------------- |
| **testId**    | string                              | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-search-product-item |
| **linkProps** | Partial<LinkProps<LinkElementType>> | Props for the link from SearchProduct component.                                       |                        |

### SearchProductItemImage

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

### SearchProductItemContent

| Name               | Type                                                                                | Description                                               | Default |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------- |
| **title\***        | string                                                                                | Specifies the product's title.                            |         |
| **price\***        | PriceDefinition                                                                                | Specifies product's prices.                               |         |
| **quickOrder**     | { enabled: boolean; outOfStockLabel: string; availability: boolean; hasVariants: boolean; skuMatrixControl: React.ReactNode; quantity: number; min?: number; max?: number; onChangeQuantity(value: number): void; buyProps?: { ...; }; } | Quick order settings.                                     |         |
| **onValidateBlur** | (min: number, maxValue: number, quantity: number) => void                                                                                | Event emitted when value is out of the min and max bounds |         |

### Other Resources

#### PriceDefinition

| Name          | Type           | Description                                         | Default |
| ------------- | -------------- | --------------------------------------------------- | ------- |
| **value**     | number         | The raw price value.                                |         |
| **listPrice** | number         | Product's list price                                |         |
| **formatter** | PriceFormatter | (price: number, variant: PriceVariant) => ReactNode |         |

Contributors

3

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

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

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

Was this helpful?

Yes

No

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

[SearchInputField« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-input-field)[SearchTopNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-top)

Contributors

3

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

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

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

ON THIS PAGE

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

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

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

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23header)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23title)[Item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item)[Item control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-control)[Item image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-image)[Item title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-title)[Item price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-price)

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

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

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproducts)[SearchProductItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproductitem)[SearchProductItemImage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproductitemimage)[SearchProductItemContent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproductitemcontent)[Other Resources](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23other-resources)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

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

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

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

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23header)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23title)[Item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item)[Item control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-control)[Item image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-image)[Item title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-title)[Item price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23item-price)

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

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

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproducts)[SearchProductItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproductitem)[SearchProductItemImage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproductitemimage)[SearchProductItemContent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23searchproductitemcontent)[Other Resources](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-products/docs/guides/faststore/molecules-search-products%23other-resources)

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