[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 security enabling refresh token 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/security-enabling-refresh-token/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Enabling refresh token on FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/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/security-enabling-refresh-token/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/security-enabling-refresh-token/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/security-enabling-refresh-token/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/security-enabling-refresh-token/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides)

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Enabling refresh token on FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/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/security-enabling-refresh-token/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/security-enabling-refresh-token/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/security-enabling-refresh-token/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/security-enabling-refresh-token/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Enabling refresh token on FastStore

Automatically refresh user sessions without re-logging in by enabling the refresh token flow in your FastStore project.

[Refresh token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/refresh-token-flow-for-headless-implementations) is a security mechanism that allows users to obtain a new, short-lived access token without requiring them to log in again.

The [FastStore SDK Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/sdk-overview%23session) includes built-in support for the [refresh token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/refresh-token-flow-for-headless-implementations) flow. It automatically manages token renewal, session management, and error handling. As a FastStore user, you only need to enable the refresh token in your project configuration. The SDK will manage the process automatically, without requiring you to implement a custom flow.

In this guide, you'll learn how to enable the refresh token in a FastStore store.

> For details about how the refresh tokens work, check the [Refresh token flow for headless implementations guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/refresh-token-flow-for-headless-implementations).

## Before you begin

### Update your FastStore project

Make sure your project is updated to the latest version. To do so, follow these steps:

1. Open your project in a code editor.
2. Open a terminal and run the following command to update the FastStore packages to the latest version:

`1

yarn upgrade -L --scope @faststore

`

### Request refresh token activation

Open a ticket with [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support) to request refresh token activation and an expiration time (1, 7, or 30 days). Include the account name(s) in your request to enable the feature. Without this activation, you won’t be able to enable the refresh token in your account.

## Instructions

1. Open your FastStore project in a code editor.
2. In the `discovery.config.js` file, under the `experimental` section, add the `refreshToken` flag and set its value to `true`:
discovery.config.js
`1
experimental: {
2
 …
3
 refreshToken: true
4
}
`
3. Commit and push your changes to the main branch to deploy the changes to production.

Contributors

1

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

[Session« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-overview)[Developing and overriding UI componentsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/developing-and-overriding-components-overview)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23before-you-begin)

[Update your FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23update-your-faststore-project)[Request refresh token activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23request-refresh-token-activation)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23instructions)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23before-you-begin)

[Update your FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23update-your-faststore-project)[Request refresh token activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23request-refresh-token-activation)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-enabling-refresh-token/docs/guides/faststore/session-enabling-refresh-token%23instructions)

On this page

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


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

[User] Provide a guide on guides faststore override use cases adding an image to the alert component 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/override-use-cases-adding-an-image-to-the-alert-component/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/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/override-use-cases-adding-an-image-to-the-alert-component/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/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/override-use-cases-adding-an-image-to-the-alert-component/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/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/override-use-cases-adding-an-image-to-the-alert-component/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/storefront-development)

Adding an image to the Alert component

This guide illustrates an advanced use case for [getOverriddenSection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function) in FastStore. It focuses on customizing the [Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections%23alert) section's icon to display a custom image as an icon instead.

> For detailed instructions on overriding components, refer to [Overriding native component’s props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-component-props) and [Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-native-component).

## Context

* The native [Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections%23alert) section provides an `icon` prop for customization. It only accepts predefined icons, but you want more control and flexibility over the displayed content.
* You want to display a custom image as the icon alongside the text in your alert messages.

## Implementation

By leveraging `getOverriddenSection`, you can create a custom component called `AlertWithImage` that achieves the desired functionality. Follow the steps below:

1. In the `src/components/sections` folder, create the folder `AlertWithImage` folder.
2. In the `AlertWithImage` folder, create the `AlertWithImage.tsx` file.
3. Import the following to the `AlertWithImage.tsx` file:
`1
import { getOverriddenSection } from "@faststore/core";
2
import Image from "next/image";
3
import { useMemo } from "react";
`
4. Define the `AlertWithImageProps` interface:
`1
import { getOverriddenSection } from "@faststore/core";
2
import Image from "next/image";
3
import { useMemo } from "react";
4

5
interface AlertWithImageProps
6
 extends Omit<React.ComponentProps<typeof AlertSection>, "icon"> {
7
 src: string;
8
 alt: string;
9
}
`
   * This interface defines the props accepted by the `AlertWithImage` component.
   * It inherits all props from the native Alert component, excluding the icon prop, which we intend to replace with an image.
   * It adds a new prop named `src`, which specifies the image source URL.
5. Create the `AlertWithImage` component:
`1
import { useMemo } from "react";
2
import { AlertSection, getOverriddenSection } from "@faststore/core";
3
import { Image_unstable as Image } from "@faststore/core/experimental";
4

5
interface AlertWithImageProps
6
 extends Omit<React.ComponentProps<typeof AlertSection>, "icon"> {
7
 src: string;
8
 alt: string;
9
}
10

11
export default function AlertWithImage(props: AlertWithImageProps) {
12
 const { src, alt, ...otherProps } = props;
13

14
 const OverriddenAlert = useMemo(
15
 () =>
16
 getOverriddenSection({
17
 Section: AlertSection,
18
 className: styles.alertWithImage,
19
 components: {
20
 Icon: {
21
 Component: () => (
22
 <Image
23
 src={props.src}
24
 alt={props.alt}
25
 width={24}
26
 height={24}
27
 />
28
 ),
29
 },
30
 },
31
 }),
32
 []
33
 );
34

35
 return <OverriddenAlert {...otherProps} icon="" />;
36
}
`
   * This function receives the `AlertWithImageProps`.
   * It destructures the `src` prop containing the image source and remaining props using the spread operator (`...otherProps`).
   * The core functionality lies within the `useMemo` hook.
         * It defines the `OverriddenAlert` constant using `getOverriddenSection`.
         * The override options specify:
                  * **`Section`:** The section to be overridden (Alert).
                  * **`components`:** An object containing the override for the Icon component.
   * Inside the Icon override:
         * **`Component`:** A function returning an `Image` component. This displays the image specified by the `src` prop.
         * **`width`** and **`height`:** Optional props to set the size of the image.
   * The use of `useMemo` ensures this override is only created once, improving performance.
   * The function returns the `OverriddenAlert` component, spreading the `otherProps` and setting the `icon` prop to `noop` (effectively disabling the default icon behavior).
> For further details on code implementation, see the [AlertWithImage](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/tree/main/src/components/sections/AlertWithImage) folder available in the [playground.store](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store) repository.
6. Add the section to the Headless CMS by following the instructions available in [syncing components to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms).
The following schema was used as an example in [cms/faststore/sections.json](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/blob/main/cms/faststore/sections.json%23L58-L101):
`1
[
2
 {
3
 "name": "AlertWithImage",
4
 "schema": {
5
 "title": "Alert with image",
6
 "description": "Add an Alert that has an Image as an icon",
7
 "type": "object",
8
 "required": [
9
 "src",
10
 "content",
11
 "dismissible"
12
 ],
13
 "properties": {
14
 "src": {
15
 "type": "string",
16
 "title": "Image source",
17
 "description": "Source of the Alert icon image"
18
 },
19
 "content": {
20
 "type": "string",
21
 "title": "Content"
22
 },
23
 "link": {
24
 "title": "Link",
25
 "type": "object",
26
 "properties": {
27
 "text": {
28
 "type": "string",
29
 "title": "Link Text"
30
 },
31
 "to": {
32
 "type": "string",
33
 "title": "Action link"
34
 }
35
 }
36
 },
37
 "dismissible": {
38
 "type": "boolean",
39
 "default": false,
40
 "title": "Is dismissible?"
41
 }
42
 }
43
 }
44
 }
45
]
`

> For further details on code implementation, see the [sections.json](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/blob/main/cms/faststore/sections.json%23L58-L101) file available in the [playground.store](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/tree/main) repository.

## Results

Once you have [set your development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode) to see the changes locally, you can see the image as an icon in the alert:

* **Before**
The native Alert displays one of the default icons, the `BellRinging`, following the sentence `Get 15% off today: NEW15! Buy now`.
![{"base64":"  ","img":{"width":1165,"height":173,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21794,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-default___12bbbaf326628380e71339c779d20f22.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/alert-default___12bbbaf326628380e71339c779d20f22.png)
* **After**
The native Alert was replaced with the custom one, which features a pink image in the form of an icon added through Headless CMS.
![{"base64":"  ","img":{"width":1161,"height":172,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22419,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-custom-image___0070f797fc5fdc69a5c6da983553868d.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/alert-custom-image___0070f797fc5fdc69a5c6da983553868d.png)

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/override-use-cases/adding-an-image-to-the-alert-component.mdx)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/_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

[Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component%23context)

[Implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component%23implementation)

[Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component%23results)

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/developing-and-overriding-components/override-use-cases/adding-an-image-to-the-alert-component.mdx)

Copy page

On this page

ON THIS PAGE

[Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component%23context)

[Implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component%23implementation)

[Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component/docs/guides/faststore/override-use-cases-adding-an-image-to-the-alert-component%23results)

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 io documentation 3 settingyourstoretheme in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/faststore)

---

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

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

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

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/store-framework-glossary)

Concepts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/faststore)

---

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

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

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

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/store-framework-glossary)

Concepts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/storefront-best-practices)

---

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

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

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

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

3\. Creating a Store Theme project

Discover how to create your very first Store Framework storefront.

This guide explains how to start building a [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme), a VTEX IO project that uses the [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder) and Store Framework blocks to create the storefront of a VTEX store. The Store Theme defines the store's visual and interactive elements, including layout, colors, typography, icons, and animations.

To kickstart our storefront project, we'll use a pre-defined [Store Theme boilerplate app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme), which simplifies the process of creating a custom Store Theme by providing pre-defined templates and styles. For more information about available themes, see the guide [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme).

## Before you begin

### Have the Edtion Store app

Make sure your VTEX account has the Store Edition app installed, as recommended in this track's second step [Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-2-prerequesites). Otherwise, you won't be able to successfully implement the VTEX Store Framework.

### Learn about the Store Theme app’s structure

Familiarize yourself with the Store Theme’s structure. Understanding the purpose of each file and folder will help you configure the store’s templates and visual theme according to your needs. Learn about in [Project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme%23project-structure).

## Instructions

### Step 1 - Downloading the Store Theme app

The VTEX IO CLI provides pre-defined app templates to simplify the creation of a new VTEX IO project. Follow these steps to set up a Store Theme project:

1. Open your terminal and run the following command to create a new project:
`1
vtex init
`
2. When prompted, select `store`. The CLI will ask for confirmation before cloning the `minimum-boilerplate-theme`. Type `y` to proceed.
![{"base64":"  ","img":{"width":1874,"height":1106,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":671726,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-3-settingyourstoretheme-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-3-settingyourstoretheme-0.png)
3. Open the `minimum-boilerplate-theme` in your preferred code editor.
4. Go to the `manifest.json` file and replace the predefined `vendor` value with your store's account name. This ensures you can publish your Store Theme app correctly.

### Step 2 - Linking your local code to the VTEX IO platform

Since the Store Theme boilerplate app already includes a default theme, you can immediately see how this theme affects your website frontend by following the instructions below:

1. Open the terminal and log in to your VTEX account.

`1

 vtex login {accountName}

`

> Replace `{accountName}` with the name of your VTEX account.

1. Create a [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace) by running the following command:

`1

 vtex use {workspaceName}

`

> Replace `{workspaceName}` based on your scenario.

1. Change to the `store-theme` directory.
2. Link the Store Theme app to the current workspace by running the following command:

`1

 vtex link

`

The `vtex link` command sends your code to the platform, allowing you to see your changes in real time.

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

By successfully running this command in your terminal, your local code is sent to the VTEX IO cloud-native infrastructure and reflected in the development workspace you're currently working in. Any changes made to your Store Theme app files will now be automatically reflected on your website in real time.

### Step 3 - Checking out your new Store Theme

To view your new Store Theme in action on your store's website, run the following command in your terminal:

`1

 vtex browse

`

This command will open your browser with the workspace you're working on. Alternatively, you can navigate directly to `https://{workspaceName}--{accountName}.myvtex.com`, replacing the placeholders with your development workspace and VTEX account name.

Once you're logged in, you should see the following Store Theme rendered on your store's website:

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

Now that your store is using a default theme code, you can start configuring the Store Theme app to match your store needs. This includes changing templates and customizing styles to create a unique identity for your store.

In the upcoming guides of this tutorial, you'll learn how to define templates by configuring and combining components for each store page, as well as declaring styles such as colors, typography scales, and spacing.

Contributors

2

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-3-settingyourstoretheme.md)

[2\. Configuring your account« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme//docs/guides/vtex-io-documentation-2-prerequesites)[4\. Configuring templatesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme//docs/guides/vtex-io-documentation-4-configuringtemplates)

Contributors

2

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23before-you-begin)

[Have the Edtion Store app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23have-the-edtion-store-app)[Learn about the Store Theme app’s structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23learn-about-the-store-theme-apps-structure)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23instructions)

[Step 1 - Downloading the Store Theme app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23step-1-downloading-the-store-theme-app)[Step 2 - Linking your local code to the VTEX IO platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23step-2-linking-your-local-code-to-the-vtex-io-platform)[Step 3 - Checking out your new Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23step-3-checking-out-your-new-store-theme)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-3-settingyourstoretheme.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23before-you-begin)

[Have the Edtion Store app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23have-the-edtion-store-app)[Learn about the Store Theme app’s structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23learn-about-the-store-theme-apps-structure)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23instructions)

[Step 1 - Downloading the Store Theme app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23step-1-downloading-the-store-theme-app)[Step 2 - Linking your local code to the VTEX IO platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23step-2-linking-your-local-code-to-the-vtex-io-platform)[Step 3 - Checking out your new Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme%23step-3-checking-out-your-new-store-theme)

On this page

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


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

[User] How do I use the VTEX search suggestions app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Suggestions

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

Version: 2.18.8

Latest version: 2.18.8

`Suggestions` is a component used to suggest search terms similar to the current query.

## Before you begin

Make sure you have added the `search` app to your theme dependencies in the `manifest.json` as shown below:

`1

 "dependencies": {

2

 "vtex.search": "2.x"

3

 }

`

Check the [Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search) app documentation for more details on this step.

## Usage

Add the `search-suggestions` block to the `search-result-layout.desktop` or `search-result-layout.mobile`. For example:

`1

"search-result-layout.desktop": {

2

 "children": [

3

 "flex-layout.row#suggestion",

4

 ],

5

 "flex-layout.row#suggestion": {

6

 "children": ["search-suggestions"]

7

 }

8

}

`

### Props

| Prop name  | Type   | Description                                                                      | Default value |
| ---------- | ------ | -------------------------------------------------------------------------------- | ------------- |
| customPage | string | Defines a custom page to the link of a suggestion. Example: store.search.custom. | store.search  |

## Customization

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

| CSS Handles           |
| --------------------- |
| suggestionsList       |
| suggestionsListPrefix |
| suggestionsListLink   |
| suggestionsListItem   |

[Search« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/suggestions/docs/apps/vtex.search)[DidYouMeanNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/suggestions/docs/apps/vtex.search/didyoumean)

See also

[Vtex.searchVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/suggestions/docs/apps/vtex.search)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/suggestions/docs/apps/vtex.search/suggestions%23before-you-begin)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/suggestions/docs/apps/vtex.search/suggestions%23usage)

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/suggestions/docs/apps/vtex.search/suggestions%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=)