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

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/cart-overview)

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

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

[Enabling refresh token on FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-enabling-refresh-token)

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/cart-overview)

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

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

[Enabling refresh token on FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-enabling-refresh-token)

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Session

The Session module manages the state of session-related information in the customer's browser, including currency, channel, localization, and customer data. It ensures session validation and synchronization with the shopping cart, providing a consistent and up-to-date shopping experience.

## Session object structure

You can see details of the session data managed by the module below.

### Session

| **Field**      | **Type** | **Description**                                                                                |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| addressType    | string   | Specifies the type of address associated with the session. Possible values are: shipping (delivery addresses), billing (payment addresses), or null if not specified. |
| b2b            | object   | Contains B2B information. See \[B2B\] for more details.                                                                                |
| channel        | string   | Indicates the sales channel associated with the session.                                                                                |
| country        | string   | Indicates the country associated with the session in a three-letter ISO code (example: USA).                                                                          |
| currency       | object   | Contains currency details for the session. See [Currency](#currency) for more information.                                                                            |
| geoCoordinates | object   | Contains geographical coordinates for the user session. See [GeoCoordinates](#geocoordinates) for details.                                                            |
| locale         | string   | Indicates the locale of the session, including language and region (example: "en-US").                                                                                |
| person         | object   | Contains information about the customer. See \[Person\] for details.                                                                                |
| postalCode     | string   | Indicates the postal code associated with the session.                                                                                |

#### `b2b`

| **Field**  | **Type** | **Description**                                            |
| ---------- | -------- | ---------------------------------------------------------- |
| customerID | String   | Identifies the buyer organization the customer belongs to. |

#### `geoCoordinates`

| **Field** | **Type** | **Description**                                                  |
| --------- | -------- | ---------------------------------------------------------------- |
| latitude  | number   | Indicates the latitude coordinate of the geographical location.  |
| symbol    | number   | Indicates the longitude coordinate of the geographical location. |

#### `currency`

| **Field** | **Type** | **Description**                                                        |
| --------- | -------- | ---------------------------------------------------------------------- |
| code      | String   | Indicates the currency code in three-letter ISO format (example: USD). |
| symbol    | String   | Indicates the symbol associated with the currency (example: $).        |

#### `person`

| **Field**  | **Type** | **Description**                                                           |
| ---------- | -------- | ------------------------------------------------------------------------- |
| id         | String   | Provides the customer identifier, if available in the ecommerce platform. |
| email      | String   | Stores the email address provided by the customer.                        |
| givenName  | String   | Contains the customer’s first name.                                       |
| familyName | String   | Contains the customer’s last name.                                        |

## Import

The Session module exports a `createSessionStore` function and `Session` type, which you can import like this:

`1

import { createSessionStore } from '@faststore/sdk'

2

import type { Session } from '@faststore/sdk'

`

## Usage

The following example demonstrates how to manage a session using `createSessionStore`.

* The `createSessionStore` function initializes a session store with the provided default session and an optional validation function.
* The `validateSession` function sends the current session data to the [FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/faststore-api-overview) for validation and returns the validated session.

`` 1

2

import { gql } from '@faststore/graphql-utils'

3

import { createSessionStore } from '@faststore/sdk'

4

import { useMemo } from 'react'

5

import type { Session } from '@faststore/sdk'

6

7

import storeConfig from 'store.config'

8

9

import { cartStore } from '../cart'

10

import { request } from '../graphql/request'

11

import { createValidationStore, useStore } from '../useStore'

12

import type {

13

 ValidateSessionMutation,

14

 ValidateSessionMutationVariables,

15

} from '../../../@generated/graphql/index'

16

17

export const mutation = gql`

18

 mutation ValidateSession($session: IStoreSession!, $search: String!) {

19

 validateSession(session: $session, search: $search) {

20

 locale

21

 channel

22

 country

23

 postalCode

24

 currency {

25

 code

26

 symbol

27

 }

28

 person {

29

 id

30

 email

31

 givenName

32

 familyName

33

 }

34

 }

35

 }

36

`

37

38

export const validateSession = async (session: Session) => {

39

 const data = await request<

40

 ValidateSessionMutation,

41

 ValidateSessionMutationVariables

42

 >(mutation, { session, search: window.location.search })

43

44

 return data.validateSession

45

}

46

47

const [validationStore, onValidate] = createValidationStore(validateSession)

48

49

const defaultStore = createSessionStore(storeConfig.session, onValidate)

50

51

export const sessionStore = {

52

 ...defaultStore,

53

 set: (val: Session) => {

54

 defaultStore.set(val)

55

56

 // Trigger cart revalidation when session changes

57

 cartStore.set(cartStore.read())

58

 },

59

}

60

61

export const useSession = () => {

62

 const session = useStore(sessionStore)

63

 const isValidating = useStore(validationStore)

64

65

 return useMemo(

66

 () => ({

67

 ...session,

68

 isValidating,

69

 }),

70

 [isValidating, session]

71

 )

72

}

 ``

Contributors

1

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

Was this helpful?

Yes

No

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

[useSearch« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/search-use-search)[Enabling refresh token on FastStoreNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-enabling-refresh-token)

Contributors

1

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

ON THIS PAGE

[Session object structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-overview%23session-object-structure)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-overview%23session)

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-overview%23import)

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

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/sdk/session/overview.mdx)

Copy page

On this page

ON THIS PAGE

[Session object structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-overview%23session-object-structure)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-overview%23session)

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-session/docs/guides/faststore/session-overview%23import)

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

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 storefront features implementing search features 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/storefront-features-implementing-search-features/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

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

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

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

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

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

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Implementing search features

This feature enables customers to find their search easier.

The Search feature is based on the Autocomplete functionality to enhance user search experiences. Autocomplete dynamically displays relevant search suggestions based on current and past search queries. The feature includes four different lists, which can be presented collectively or individually based on user interaction preferences. The existing sections within Autocomplete are as follows:

* **Last Searches:** Displays a list of the user's most recent search queries.
* __Search Suggestions: Offers real-time suggestions based on the user's current input._
* **Product suggestion:** Provides relevant product recommendations based on the search query.
* **Most searched terms:** Highlights popular and frequently searched terms.

Refer to the [Autocomplete in VTEX Intelligent Search](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/4gXFsEWjF7QF7UtI2GAvhL) for more information.

---

## Usage

To integrate the `<SearchInput />` component, refer to the provided example in the [FastStore Core](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/core/src/components/search/SearchInput).

> You can add this component to your store where you need it, with the Navbar being a recommended location.

---

## Components

* History
Clear History
   1. [Headphone](#)
   2. [Audio & Video](#)
   3. [mh-7000](#)
Search History
Responsible for showing the latest terms searched by a user.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/molecules-search-history)
* Top Search
   1. [1Notebooks](#)
   2. [2Laser Printer](#)
   3. [3Bluetooth Keyboard](#)
Search Top
Displays the most searched terms by customers.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/molecules-search-top)
* 1. [appl**e airpods**](#)
   2. [appl**e tv**](#)
Search Auto Complete
List of auto completing suggestions based on the searched term.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/molecules-search-auto-complete)
* 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](#)
Search Products
List of `SearchProductItem` to show details of the suggested products.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/molecules-search-products)
* History
Clear History
   1. [Headphone](#)
   2. [Audio & Video](#)
   3. [mh-7000](#)
Top Search
   1. [1Notebooks](#)
   2. [2Laser Printer](#)
   3. [3Bluetooth Keyboard](#)
Search Dropdown
Combine `SearchHistory`, `SearchTop` `SearchAutoComplete` and `SearchProducts` to show all options in `SearchInput`.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/molecules-search-dropdown)
* Search Input Field
An `InputField` with a search button.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/molecules-search-input-field)
* Search Input
The `SearchInput` is responsible for receiving, searching and displaying suggestions.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/organisms-search-input)

Contributors

1

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

Was this helpful?

Yes

No

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

[Implementing regionalization features« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-implementing-regionalization-features)[Managing product images in specific contextsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

Contributors

1

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

ON THIS PAGE

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

[Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-implementing-search-features%23components)

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/storefront-features/implementing-search-features.mdx)

Copy page

On this page

ON THIS PAGE

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

[Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-search-features/docs/guides/faststore/storefront-features-implementing-search-features%23components)

On this page

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


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

[User] Provide a guide on guides vtex flex layout in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

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

Flex Layout

Official extension

Version: 0.21.5

Latest version: 0.21.5

Flex Layout is a **layout structure** built within VTEX IO Store Framework. It allows building complex custom layouts using the concept of **rows** and **columns**, setting the desired block structure and positioning in a page.

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

_Example of a page layout built using Flex Layout, following the one row with two columns model_

## Configuration

**Flex Layout has two basic building blocks**: `flex-layout.row` and `flex-layout.col`. You should **never** use `flex-layout`.

If you are already familiar with the [flexbox](https://read.calvincode.net/reader?url=https://css-tricks.com/snippets/css/a-guide-to-flexbox/) layout used in CSS, Flex Layout should be easy to grasp since this is what `flex-layout.row` and `flex-layout.col` are using under the hood.

You can use **any** array of blocks as children for `flex-layout.row` and `flex-layout.col`.

The props below support [responsive-values](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/responsive-values), meaning that you can define different values for the same prop based on device screen size, such as mobile and desktop.

### `flex-layout.row`

| Prop name                | Type                              | Description                                                                                | Default value |
| ------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass               | String                            | Block container class. The set value of this prop functions as a block identifier for CSS customizations. (                                                                                | ""            |
| borderColor              | String                            | The color of the border.                                                                                | undefined     |
| borderWidth              | 0...5                             | A number or string magnitude for applying the bw Tachyons token to the row.                                                                                | undefined     |
| border                   | String \| String\[\]              | An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).                                                                                | undefined     |
| colGap                   | 0...10                            | A number or string magnitude for applying the pr Tachyons token to the columns in the flex-layout.row.                                                                                | undefined     |
| colSizing                | equal\|auto                       | Controls the width of the columns in the flex-layout.row.                                                                                | equal         |
| fullWidth                | Boolean                           | Whether the component should occupy all the available width from its parent.                                                                                | false         |
| horizontalAlign          | left\|right|center|between|around | Controls horizontal alignment for the items in the flex-layout.row. It defaults to between if colSizing is auto and to left otherwise.                                                                                | left          |
| colJustify               | enum                              | Controls the space between columns and borders of the flex-layout.row, following the justify-content CSS property. Possible values are between (no space added between borders and columns) and around (space added). | between       |
| marginBottom             | 0...10                            | A number or string magnitude for applying the mb Tachyons token to the row.                                                                                | undefined     |
| marginTop                | 0...10                            | A number or string magnitude for applying the mt Tachyons token to the row.                                                                                | undefined     |
| paddingBottom            | 0...10                            | A number or string magnitude for applying the pb Tachyons token to the row.                                                                                | undefined     |
| paddingTop               | 0...10                            | A number or string magnitude for applying the pt Tachyons token to the row.                                                                                | undefined     |
| preserveLayoutOnMobile   | Boolean                           | Whether the flex-layout.row should break into a column layout on mobile.                                                                                | false         |
| preventHorizontalStretch | Boolean                           | Prevents the row from stretching horizontally to fill its parent's width.                                                                                | false         |
| preventVerticalStretch   | Boolean                           | Prevents the row from stretching vertically to fill its parent's height with the items-stretch token.                                                                                | false         |
| rowGap                   | 0...10                            | A number or string magnitude for applying the pb Tachyons token to columns in the flex-layout.row.                                                                                | undefined     |
| htmlId                   | String                            | This prop adds an HTML id to flexRow. This allows accessing a page section using links.                                                                                | undefined     |
| arialabel                | string                            | Aria-label to be included for accessibility purposes                                                                                | undefined     |

### `flex-layout.col`

| Prop name              | Type                 | Description                                                                                | Default value |
| ---------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------- |
| blockClass             | String               | Block container class. The set value of this prop functions as a block identifier for CSS customizations                 | ""            |
| borderColor            | String               | The color of the border.                                                                                | undefined     |
| borderWidth            | 0...5                | A number or string magnitude for applying the bw Tachyons token to the column.                                           | undefined     |
| border                 | String \| String\[\] | An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).                   | undefined     |
| horizontalAlign        | left\|right|center   | Controls horizontal alignment for the items in the flex-layout.col.                                                      | left          |
| marginLeft             | 0...10               | A number or string magnitude for applying the ml Tachyons token to the column.                                           | undefined     |
| marginRight            | 0...10               | A number or string magnitude for applying the mr Tachyons token to the column.                                           | undefined     |
| paddingLeft            | 0...10               | A number or string magnitude for applying the pl Tachyons token to the column.                                           | undefined     |
| paddingRight           | 0...10               | A number or string magnitude for applying the pr Tachyons token to the column.                                           | undefined     |
| preventVerticalStretch | Boolean              | Prevents the row from stretching vertically to fill its parent's height with height: 100%, using height: "auto" instead. | false         |
| rowGap                 | 0...10               | A number or string magnitude for applying the pb Tachyons token to rows in the flex-layout.col.                          | undefined     |
| verticalAlign          | top\|middle|bottom   | Controls vertical alignment for the items in the flex-layout.col.                                                        | top           |
| width                  | "0...100%"\|"grow"   | Sets the width of the column. Accepts either a percentage or "grow".                                                     | undefined     |
| arialabel              | string               | Aria-label to be included for accessibility purposes                                                                     | undefined     |

## App behavior

* The highest level in a flex layout is **always** a row. Therefore, you can only add a `flex-layout.col` inside a `flex-layout.row` — never as a first-level block.
* Every row and column can have as **many levels as needed**.
* When creating levels, you have to **alternate between rows and columns**. You can only place columns within a row and rows within a column.
* Keep in mind that the structure that you set in your flex layout does not only affect your code organization, but will also reflect in the way that blocks will be shown and managed through the Site Editor admin. Therefore, it is always important to **take the organization of both code and Site Editor into account when planning to apply the flex layout** to a page.

To better understand Flex Layout's practical operation, you can access the recipe for [Using Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-flex-layout)

## Customization

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

| CSS Handles    |
| -------------- |
| flexColChild   |
| flexCol        |
| flexRowContent |
| flexRow        |

[Disclosure Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout/docs/apps/vtex.disclosure-layout)[Modal LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout/docs/apps/vtex.modal-layout)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

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

[flex-layout.row](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout/docs/apps/vtex.flex-layout%23flex-layoutrow)[flex-layout.col](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout/docs/apps/vtex.flex-layout%23flex-layoutcol)

[App behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout/docs/apps/vtex.flex-layout%23app-behavior)

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

Was this helpful?

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