[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 integrating frontend app with site editor 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-integrating-frontend-app-with-site-editor/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/store-framework-working-with-site-editor)

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

[Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-site-editor-schema-examples)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/store-framework-working-with-site-editor)

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

[Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-site-editor-schema-examples)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/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-integrating-frontend-app-with-site-editor/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/store-framework)

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

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

Integrating a frontend app with Site Editor

Learn how to integrate a frontend app with Site Editor.

Once you have developed a [frontend app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io) using [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io), the next step is to declare this app in the [dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-dependencies) of the Store Theme app. This step is essential to make your custom frontend app available in [Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-site-editor).

In this guide, you will learn how to integrate your custom frontend app with Site Editor.

## Before you begin

* Create your frontend app following the guide [Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app).
* Develop a [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) for your store, following the [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) guide.
* Check if your Store Theme has the [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders) properly installed. You must have at least the following builders configured:
   * [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder): Enables the development of Store Framework storefronts.
   * [react builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-react-builder): Used to develop apps with [React](https://read.calvincode.net/reader?url=https://react.dev/) when your project requires customized frontend solutions.

## Instructions

### Step 1 - Declaring your app in Store Theme dependencies

Follow the steps below to update your Store Theme dependencies with the name and version of your frontend app.

1. Open the Store Theme app folder in your local files using the code editor of your choice, such as Visual Studio Code.
2. In the Store Theme `manifest.json` file, add your app to `dependencies`, following this pattern: `"{accountName}.{appName}": "{appVersion}"`. See the example below:
`1
"dependencies": {
2
 "{accountName}.{appName}": "{appVersion}",
3
 "vtex.store": "2.x",
4
 "vtex.store-header": "2.x",
5
 "vtex.product-summary": "2.x",
6
 "vtex.store-footer": "2.x",
7
 "vtex.store-components": "3.x",
8
 "vtex.styleguide": "9.x",
9
 "vtex.slider": "0.x",
10
 "vtex.carousel": "2.x",
11
...
12
}
`

### Step 2 - Using a component of your frontend app within a store page

Consider your frontend app has a component named `CustomComponent`, which is declared in a block [interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-interface) as `custom-component`:

frontend-app/store/interfaces.json

`1

{

2

 "custom-component": {

3

 "component": "CustomComponent"

4

 }

5

}

`

To use this component on the store’s main page, for example, declare the `custom-component` block within the `home` block:

store-theme/store/blocks/home/home.jsonc

`1

{

2

 "store.home": {

3

 "blocks": ["custom-component"]

4

 }

5

}

`

### Step 3 - Making your component available in Site Editor

By [linking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) the Store Theme app, your component will be available to visualize and test in Site Editor within the corresponding [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace).

> Learn how to create a custom component within your Store Theme app and make it editable directly in Site Editor by following the guide [Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor).

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-integrating-frontend-app-with-site-editor.md)

[Working with Site Editor« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor//docs/guides/store-framework-working-with-site-editor)[Making a custom component available in Site EditorNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor//docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

See also

[Storefront appsGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)[Developing custom storefront componentsGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/_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-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23instructions)

[Step 1 - Declaring your app in Store Theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23step-1-declaring-your-app-in-store-theme-dependencies)[Step 2 - Using a component of your frontend app within a store page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23step-2-using-a-component-of-your-frontend-app-within-a-store-page)[Step 3 - Making your component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23step-3-making-your-component-available-in-site-editor)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-integrating-frontend-app-with-site-editor.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-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23instructions)

[Step 1 - Declaring your app in Store Theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23step-1-declaring-your-app-in-store-theme-dependencies)[Step 2 - Using a component of your frontend app within a store page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23step-2-using-a-component-of-your-frontend-app-within-a-store-page)[Step 3 - Making your component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor%23step-3-making-your-component-available-in-site-editor)

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 accessibe 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-accessibe/docs/guides)

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

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

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

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

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

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

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

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

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

---

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

accessiBe

This app adds pixel code to your VTEX IO store to show a component in the storefront, enabling users to modify your site’s UI, design, and readability to meet their individual needs following ADA and WCAG accessibility guidelines.

## Installation

To install the accessiBe app:

1. Open the VTEX App store.
2. Look for the accessiBe app.
3. Click on **GET APP**.
4. Type your account name.
5. Click on **CONFIRM**.

You will be redirected to your store’s accessiBe settings page. To setup your accessiBe account, please go to <https://accessibe.com/a/lbbihws>, log in to your accessibe account, and add your VTEX store URL as one of the managed sites. Accessibility parameters can be managed directly through the accessiBe platform after installing and configuring the app.

> _You need to have an accessiBe paid account to be able to use the app_

After installing and adding your VTEX store URL on the accessiBe website, the accessibility button will be available on your store with the default configuration.

## Configuration

You can configure the accessiBe button and interface. To configure the accessiBe app in your store:

1. Log in to Admin.
2. On _ACCOUNT SETTINGS_, click on **Apps**.
3. Search for accessiBe.
4. Click on **Settings**.
5. Fill in the screen fields listed below according to your needs and click on **Save**.
   * **Accessibility Statement Link**: as an accessiBe client, you get a statement indicating remediations your website has undergone to achieve compliance. When this field is left blank, this default statement is shown in the component. You can either edit accessiBe’s statement with your information (see [this accessiBe documentation](https://read.calvincode.net/reader?url=https://accessibe.com/support/account/how-can-i-edit-website-owner-information-for-the-accessibility-statement) on learning how to edit it) or insert a link to another published statement.
   * **Feedback Form Link**: add a feedback form.
   * **Interface Footer**: present your brand/company in the footer.
   * **Interface Language**: choose the different language options available for your interface. The default option is English.
   * **Interface Lead Color**: change the color of the interface to match your style. This field accepts hash color codes.
   * **Trigger Button Color**: change the color of the accessibility button that is used to open the interface. This field accepts hash color codes.
   * **Interface Position**: change the location of the interface. The default option is _Left_.
   * **Hide on mobile?**: choose whether to show the interface on mobile. The default option is _Show_.
   * **Trigger horizontal position**: choose the horizontal positioning of the accessibility button. The default option is _Left_.
   * **Trigger vertical position**: choose the vertical positioning of the accessibility button. The default option is _Bottom_.
   * **Mobile trigger horizontal position**: choose the horizontal positioning of the accessibility button on mobile. The default option is _Left_.
   * **Mobile trigger vertical position**: choose the vertical positioning of the accessibility button on mobile. The default option is _Center_.
   * **Trigger button size**: choose the size of the accessibility button. The default option is _Medium_.
   * **Mobile trigger size**: choose the size of the accessibility button on mobile. The default option is _Small_.
   * **Trigger button shape**: change the shape of the accessibility button. The default option is _Round_.
   * **Trigger mobile shape**: change the shape of the accessibility button. The default option is _Square_.
   * **Hide trigger button**: you can choose to hide the accessibility button, though accessiBe will still be present on your site. The default option is _Show_.
   * **Trigger button icon**: choose from a variety of symbols to represent the accessibility button on your site.
   * **Trigger horizontal offset**: make additional horizontal orientation adjustments for the accessibility button. The default option is _20_.
   * **Trigger vertical offset**: make additional vertical orientation adjustments for the accessibility button. The default option is _20_.
   * **Mobile trigger horizontal offset**: make additional horizontal orientation adjustments for the accessibility button on mobile. The default option is _0_.
   * **Mobile trigger vertical offset**: make additional vertical orientation adjustments for the accessibility button on mobile. The default option is _0_.
   * **Useful Website Links**: add a helpful website link. Click on _\+ ADD MORE_, insert a label and the form URL.

Once saved, all your configuration choices will be applied to the component in your store.

## Deletion and uninstall

You can uninstall and/or delete the accessiBe app from your store. When doing so, consider that:

* **If the app is uninstalled without being deleted**: the app will be removed from the workspace, but all saved settings will remain protected, meaning that if you reinstall, all previous settings will be applied.
* **If the app is deleted**: all saved configurations will be deleted from all workspaces, and the app will also be uninstalled.

To delete the app:

1. Log in to Admin.
2. On _ACCOUNT SETTINGS_, click on **Apps**.
3. Search for accessiBe.
4. Click on **Settings**.
5. Click on the **DELETE** button on the upper right portion of the screen.
6. Wait for the dialog box to appear.
7. Confirm the deletion by clicking on **DELETE**.

To uninstall the app:

1. Log in to Admin.
2. On \_ ACCOUNT SETTINGS\_, click on **Apps**.
3. Search for accessiBe.
4. Click on **Settings**.
5. Click on the **UNINSTALL** button on the upper right portion of the screen.
6. Wait for the dialog box to appear.
7. Confirm by clicking on **UNINSTALL**.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/pixel-apps/vtex-accessibe.md)

Contributors

1

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

ON THIS PAGE

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe/docs/guides/vtex-accessibe%23installation)

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

[Deletion and uninstall](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe/docs/guides/vtex-accessibe%23deletion-and-uninstall)

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/Store-Framework-Apps/pixel-apps/vtex-accessibe.md)

Copy page

On this page

ON THIS PAGE

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe/docs/guides/vtex-accessibe%23installation)

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

[Deletion and uninstall](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe/docs/guides/vtex-accessibe%23deletion-and-uninstall)

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 displaying content for authenticated users 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-displaying-content-for-authenticated-users/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/getting-started-with-storefront-solutions)

---

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

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

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

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/faststore/developer-tools-overview)

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

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

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/faststore/managing-performance-overview)

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/getting-started-with-storefront-solutions)

---

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

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

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

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/faststore/developer-tools-overview)

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

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

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/faststore/managing-performance-overview)

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/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-displaying-content-for-authenticated-users/docs/guides/storefront-best-practices)

---

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

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

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

Displaying content for authenticated users

Authenticated content is a feature that restricts access to specific store content based on whether a user is logged in. This ensures that only registered and logged-in users can view exclusive content, like prices, detailed product descriptions, and special offers. Non-logged-in users will see generic content instead.

| Before log in                                                                                | After log in                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1375,"height":705,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":35340,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before-login___1c428d5e4b755d2c94fb64968893290c.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/before-login___1c428d5e4b755d2c94fb64968893290c.png) | ![{"base64":"  ","img":{"width":1465,"height":706,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":723829,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/after-login___de2dbeae277be2cae93ecc9ec51b3929.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/after-login___de2dbeae277be2cae93ecc9ec51b3929.png) |

Authenticated content fosters a more controlled and secure shopping environment for stores and customers, enhancing the shopping experience. For example, in B2B settings, this allows for customized access to product catalogs, ensuring that businesses only see relevant products and pricing. For segmented promotions, authenticated content enables merchants to tailor special offers and discounts to specific customer segments, increasing engagement and conversion rates.

In this guide, learn how to create an authenticated component using the [Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero) component as an example.

## Before you begin

### Update the `@faststore/core` package

Ensure your store is using `@faststore/core@v3.0.39` or later. To benefit from this feature, follow the steps below:

1. Update your store’s `@faststore/core` package to the `v3.0.39` by running the following command:
`1
yarn add @faststore/core@3.0.39
`
2. Run `yarn dev` to apply the changes to your project.

### Understand Section Override

Make sure you understand the concepts of [Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview) to follow along.

## Instructions

### Step 1 - Override a component

Choose the component you want to restrict access to. To check the available components, refer to the [UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index) guide.

Once you have chosen the component, you will need to override the component using the feature [Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview). In this guide we will use the [Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero) component as an example.

1. In `src/components/overrides` create the `Hero.tsx` file.
2. Add the following to the `Hero.tsx` file:
`1
import { SectionOverride } from "@faststore/core";
2
import { HeroHeader, HeroImage } from "@faststore/ui";
3

4
const SECTION = "Hero" as const;
5

6
const override: SectionOverride = {
7
section: SECTION,
8
components: {
9
 HeroImage: {
10
 Component: (props) => (
11
 <HeroImage {...props} />
12
 ),
13
 },
14
},
15
};
16

17
export { override };
`
The code above overrides the `HeroImage` component to not show any images.
3. Open the terminal and run `yarn dev`.
4. Access your store's local development URL (localhost). So far, you will have the following `Hero`:
![{"base64":"  ","img":{"width":1462,"height":709,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":47254,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/hero-component___d833f1abca8976e439c5d2e37ebda450.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/hero-component___d833f1abca8976e439c5d2e37ebda450.png)

At this point, the Hero component will not display an image, and logging in won't change that.

### Step 2 - Wrap the component with `ProfileChallenge`

The `ProfileChallenge` component checks if a user is logged in and has sales channel access. If both conditions are met, it displays your customized version (the overridden component). Otherwise, it displays the default Hero component or your [fallback component](#step-3-create-a-component-fallback-optional).

1. In the `Hero.tsx` file, add the following code:
`1
import { SectionOverride } from "@faststore/core";
2
import { ProfileChallenge_unstable as ProfileChallenge } from "@faststore/core/experimental";
3

4
import { HeroHeader, HeroImage } from "@faststore/ui";
5

6
const SECTION = "Hero" as const;
7

8
const override: SectionOverride = {
9
section: SECTION,
10
components: {
11
 HeroImage: {
12
 Component: (props) => (
13
 <ProfileChallenge>
14
 <HeroImage {...props} />
15
 </ProfileChallenge>
16
 ),
17
 },
18
},
19
};
20

21
export { override };
`
   * The code above imports the `ProfileChallenge` component.
   * The `override` object defines the section (`Hero`) and the components to be overridden.
   * Inside `components`, the `HeroImage` component is being overridden.
   * The overridden `HeroImage` is wrapped with `ProfileChallenge`.
   * When `ProfileChallenge` renders the `HeroImage`, it checks for user login status and sales channel access.
2. Run `yarn dev` to sync the changes locally.
3. To test the changes, access your store's local development URL (localhost).
4. On the store home page, click on **Sign in** to enter your account.
5. Once you are logged in, you will be able to see the customized Hero section:
![{"base64":"  ","img":{"width":1376,"height":710,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":697509,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/hero-component-login___cb5cecfe909ff084771b45ae99eebc93.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/hero-component-login___cb5cecfe909ff084771b45ae99eebc93.png)

### Step 3 - Create a component fallback

The `ProfileChallenge` has a property called `fallback`. This property allows you to display a custom component when a user is not logged in. If not provided, the default component with the original content will be displayed.

1. To create a fallback component, open the override component file, in this case, `Hero.tsx`, and add the following:

`1

import { SectionOverride } from "@faststore/core";

2

import { ProfileChallenge_unstable as ProfileChallenge } from "@faststore/core/experimental";

3

4

import { HeroHeader, HeroImage } from "@faststore/ui";

5

6

const SECTION = "Hero" as const;

7

8

const override: SectionOverride = {

9

 section: SECTION,

10

 components: {

11

 HeroImage: {

12

 Component: (props) => (

13

 <ProfileChallenge>

14

 <HeroImage {...props} />

15

 </ProfileChallenge>

16

 ),

17

 },

18

 HeroHeader: {

19

 Component: (props) => {

20

 return (

21

 <ProfileChallenge

22

 fallback={

23

 <HeroHeader

24

 title="🔒 Auth Hero"

25

 subtitle="You should be logged in to see this content"

26

 />

27

 }

28

 >

29

 <HeroHeader {...props} />

30

 </ProfileChallenge>

31

 );

32

 },

33

 },

34

 },

35

};

36

37

export { override };

`

* Inside the `components` section, specific components (`HeroImage` and `HeroHeader`) are targeted for customization.
* HeroImage Override:
   * A new component function is defined that wraps the original `HeroImage` component with `ProfileChallenge`. This ensures `ProfileChallenge` logic is applied to `HeroImage`.
* HeroHeader Override:
   * A new component function is defined for `HeroHeader`.
   * It uses `ProfileChallenge` with a `fallback` property.
   * The `fallback` property defines what to display if the user isn't logged in.
   * Inside the `fallback`, a custom `HeroHeader` component is created with two editable properties, title (`Auth Hero`), and subtitle (`You should be logged in to see this content`).
   * If the user is logged in, the original `HeroHeader` content is displayed.
1. Run `yarn dev` to sync the changes locally.
2. Access the localhost available in the terminal, and without signing in to your account, you will see the following:
![{"base64":"  ","img":{"width":1375,"height":705,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":35340,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before-login___1c428d5e4b755d2c94fb64968893290c.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/before-login___1c428d5e4b755d2c94fb64968893290c.png)

### Step 3 - Promoting your changes

After testing locally, you can promote your changes to production by doing the following:

1. In your local store code, create a new branch with the changes you made.
2. Push the changes to the new branch and publish it.
3. Open a pull request in the store repository.
4. If the checks and reviews are all good, merge the branch with the main one.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/_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/displaying-content-for-authenticated-users.mdx)

[Building navigation menus« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-building-navigation-menus)[Implementing regionalization featuresNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-implementing-regionalization-features)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23before-you-begin)

[Update the @faststore/core package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23update-the-faststorecore-package)[Understand Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23understand-section-override)

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

[Step 1 - Override a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-1-override-a-component)[Step 2 - Wrap the component with ProfileChallenge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-2-wrap-the-component-with-profilechallenge)[Step 3 - Create a component fallback](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-3-create-a-component-fallback)[Step 3 - Promoting your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-3-promoting-your-changes)

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/displaying-content-for-authenticated-users.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/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23before-you-begin)

[Update the @faststore/core package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23update-the-faststorecore-package)[Understand Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23understand-section-override)

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

[Step 1 - Override a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-1-override-a-component)[Step 2 - Wrap the component with ProfileChallenge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-2-wrap-the-component-with-profilechallenge)[Step 3 - Create a component fallback](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-3-create-a-component-fallback)[Step 3 - Promoting your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users%23step-3-promoting-your-changes)

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 configure the price history control 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/configure-the-price-history-control/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/faststore)

---

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

---

(Legacy) CMS Portal

[Migrating your storefront from Legacy CMS Portal to Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/vtex-io-documentation-migrating-storefront-from-legacy-to-io)

[Can I order my product as I want?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/can-i-order-my-product-as-i-want)

[List of controls for templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/list-of-controls-for-templates)

[Setting up the zoom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/setting-up-the-zoom)

[Creating gift lists](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/creating-gift-lists)

[Validating a layout before moving it to production](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/validating-a-layout-before-moving-it-to-production)

[How to use the page title control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/how-to-use-the-page-title-control)

[How product name control works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/how-product-name-control-works)

[Configure the price history control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control)

[Shelf template controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/shelf-template-controls)

[Control to disable the canonical tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/control-to-disable-the-canonical-tag)

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/faststore)

---

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

---

(Legacy) CMS Portal

[Migrating your storefront from Legacy CMS Portal to Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/vtex-io-documentation-migrating-storefront-from-legacy-to-io)

[Can I order my product as I want?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/can-i-order-my-product-as-i-want)

[List of controls for templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/list-of-controls-for-templates)

[Setting up the zoom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/setting-up-the-zoom)

[Creating gift lists](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/creating-gift-lists)

[Validating a layout before moving it to production](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/validating-a-layout-before-moving-it-to-production)

[How to use the page title control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/how-to-use-the-page-title-control)

[How product name control works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/how-product-name-control-works)

[Configure the price history control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control)

[Shelf template controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/shelf-template-controls)

[Control to disable the canonical tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/control-to-disable-the-canonical-tag)

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/storefront-development)

(Legacy) CMS Portal

[Configure the price history control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control)

Configure the price history control

The past price control in VTEX is intended to show the lowest price invoiced for an item per month. In other words, it can show the lowest price for selling a particular item in your store.

## Configuration

The control should be included in the product page's template as follows:

`1

2

<b style={{ fontFamily: "Inconsolata, monospace", }}><vtex.cmc:StockKeepingUnitPriceHistory Months="6" Percentile="100"/>

`

See the complete list of template controls [here](https://read.calvincode.net/reader?url=http://help.vtex.com/tutorial/lista-de-controles-para-templates/).

## Behavior

The default exhibition method for the values looks like the image below. The year, month, and lowest amount invoiced this month are shown in sequence.

![{"base64":"  ","img":{"width":1226,"height":729,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":158426,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/configure-the-price-history-control-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/configure-the-price-history-control-0.png)

If you want to show these details in another way, you must get a layout agency to customize the model.

### The _Months_ and _Percentile_ parameters

To allow more flexibility in showing values on the product page, you can use the **Months** parameter to define the number of months to be taken into account by the control.

If the parameter is "6", for example, the control will show the lowest amount invoiced for the item in each of the last six months.

In addition, it can happen that the lowest amount invoiced for the item is below the price usually applied by the store, for example, because of a specific promotion. You can use the parameter _**Percentile**_ to avoid showing this value.

This allows you to ignore peripheral values. For example, using the parameter with a value of 95 (Percentile="95"), 5% of the amounts are ignored.

Using the parameter with a value of 90 (Percentile="90"), 10% of the amounts are ignored.

In such cases, prices much below those normally applied will not be shown.

If there are price variations in a particular month, the control shows the lowest value invoiced for the item during the month.

If there were no sales of an item during the month, the control will not show a value for it.

Contributors

3

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

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

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/legacy-cms/configure-the-price-history-control.md)

[How product name control works« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control//docs/guides/how-product-name-control-works)[Shelf template controlsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control//docs/guides/shelf-template-controls)

Contributors

3

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

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

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control%23configuration)

[Behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control%23behavior)

[The Months and Percentile parameters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control%23the-months-and-percentile-parameters)

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/legacy-cms/configure-the-price-history-control.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control%23configuration)

[Behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control%23behavior)

[The Months and Percentile parameters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/configure-the-price-history-control/docs/guides/configure-the-price-history-control%23the-months-and-percentile-parameters)

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