[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 developer tools updating the cli package version 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/developer-tools-updating-the-cli-package-version/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/headless-cms-overview)

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

[Configuration options for discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-config-options)

[Custom Cypress integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-custom-cypress)

[FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-faststore-cli)

[Updating the @fastore/cli package version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-updating-the-cli-package-version)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/headless-cms-overview)

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

[Configuration options for discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-config-options)

[Custom Cypress integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-custom-cypress)

[FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-faststore-cli)

[Updating the @fastore/cli package version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-updating-the-cli-package-version)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore)

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

Updating the '@faststore/cli' package version

If you need to update the [@faststore/cli](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-overview%23packagejson) package, follow these instructions.

> Since the publication of [this release note](https://read.calvincode.net/reader?url=https://developers.vtex.com/updates/release-notes/2024-09-11-faststore-cli-dependency), the `@faststore/core` package now depends on the `@faststore/cli` package. Before updating the `@faststore/cli` package, make sure to check if this package is already listed in your dependencies. If not, check out the [release note](https://read.calvincode.net/reader?url=https://developers.vtex.com/updates/release-notes/2024-09-11-faststore-cli-dependency) related to this change.

1. Open your FastStore codebase in the code editor of your preference.
2. Open the terminal and run the following:
`1
yarn add @faststore/cli@latest
`
3. Run `yarn dev` to sync the changes to your project.

Contributors

1

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

[FastStore CLI« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/developer-tools-faststore-cli)[StylingNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/docs/guides/faststore/styling-overview)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-updating-the-cli-package-version/_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?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developer-tools/updating-the-cli-package-version.mdx)

Copy page

On this page

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 slider layout in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

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

Slider Layout

Official extension

Version: 0.24.8

Latest version: 0.24.8

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

Slider Layout is a flexible solution for building block sliders in VTEX Store Framework, such as a carousel component.

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

> _To use the Slider layout as a substitute for the [Carousel app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/carousel), read the [Building a Carousel through lists and Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout) documentation._

## Google Analytics 4 Integration

Slider Layout enables you to integrate your component with [Google Analytics 4](https://read.calvincode.net/reader?url=https://developers.google.com/analytics/devguides/collection/ga4). The integration happens through the [GA4 view\_promotion](https://read.calvincode.net/reader?url=https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client%5Ftype=gtm%23view%5Fpromotion) event, which is typically associated with the promotion banners carousel displayed by the Slider Layout.

By integrating with Google Analytics 4, you can set the `Product ID` and `Product Name`, and position of your promotion on [Site Editor](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/site-editor-overview--299Dbeb9mFczUTyNQ9xPe1) to be shown on a Google Analytics dashboard.

To set this up, go to the VTEX Admin, access **Storefront > Site Editor**, and open the image settings of the internal promotion you want to track. These settings are displayed on the right side of the page.

![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJUlEQVR4nAEaAOX/ANfV1Kyqo6Wjnff29wCZl5kXEQgfGA/Y2N3Oxg4Pt15I0QAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png","width":819,"height":464,"type":"png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png)

> For more information about managing your page content, read [Managing page and template content](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/managing-page-and-template-content--3tMbx6HXy4Fy5r9EhboG37).

After setup, Google Analytics can track your internal promotions and generate reports of their views, clicks, click-through rate, conversions, and revenue.

## Configuration

1. Add the `slider-layout` app to your theme dependencies in the `manifest.json` file:

`1

"dependencies": {

2

 "vtex.slider-layout": "0.x"

3

}

`

Now, you can use all blocks exported by the `slider-layout` app. See the complete list below:

| Block name          | Description                                                                                |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slider-layout       | ![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNIYmD4P7v5c1m8OwMDACBaBI9Db7FhAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Mandatory-red","width":69,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Builds block sliders for your store through its children list blocks. |
| slider-layout-group | Enables you to keep a group of slider-layout blocks synched with each other. For more information about this, see the Advanced configuration section below.                                                                                |

1. Add the `slider-layout` block to your template. For example:

`1

 "slider-layout#text-test": {

2

 "props": {

3

 "itemsPerPage": {

4

 "desktop": 1,

5

 "tablet": 1,

6

 "phone": 1

7

 },

8

 "infinite": true,

9

 "showNavigationArrows": "desktopOnly",

10

 "blockClass": "carousel"

11

 },

12

 "children": ["rich-text#1", "rich-text#2", "rich-text#3"]

13

 },

14

15

 "rich-text#1": {

16

 "props": {

17

 "text": "Test1"

18

 }

19

 },

20

 "rich-text#2": {

21

 "props": {

22

 "text": "Test2"

23

 }

24

 },

25

 "rich-text#3": {

26

 "props": {

27

 "text": "Test3"

28

 }

29

 },

`

| Prop name            | Type            | Description                                                                                | Default value                        |
| -------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| label                | string          | aria-label attribute value to be used by the <Slider/> component when rendered. The aria-label value should explicitly tell users what the inspected HTML element does.                                                                                | slider                               |
| showNavigationArrows | enum            | Indicates when navigation arrows should be rendered. Possible values are: mobileOnly, desktopOnly, always, or never.                                                                                | always                               |
| showPaginationDots   | enum            | Indicates when pagination dots should be rendered. Possible values are: mobileOnly, desktopOnly, always, or never.                                                                                | always                               |
| infinite             | boolean         | Determines whether the slider should be infinite (true) or not (false). When this prop is set as false, the slider will have an explicit end for users.                                                                                | false                                |
| usePagination        | boolean         | Determines whether the slider should use slide pages (true) or not (false). When this prop is set as false, the slider will use smooth scrolling for slide navigation instead of arrows.                                                                                | true                                 |
| itemsPerPage         | object          | The number of slider items to be shown on each type of device. For more information about this, see the itemsPerPage object section below.                                                                                | { desktop: 5, tablet: 3, phone: 1 }  |
| navigationStep       | number / enum   | The number of slider items that should be displayed when users click one of the slider arrows. It is also possible to set this prop value as page, meaning that the number of slider items to be displayed when one of the arrows is clicked is equal to the number of slider items set per page (in the itemsPerPage prop).                                                                                | page                                 |
| slideTransition      | object          | Controls the transition animation between slides based on [CSS attributes](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Web/CSS/transition). For more information about this, see the slideTransition object section below.                                                                                | { speed: 400, delay: 0, timing: '' } |
| autoplay             | object          | Controls the autoplay feature behavior. For more information about this, see the autoplay object section below.                                                                                | undefined                            |
| fullWidth            | boolean         | Determines whether the slides should occupy the full page width, making the arrows appear on top of them (true) or not (false).                                                                                | true                                 |
| arrowSize            | number / object | Slider arrows size (height and width) in pixels. This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (desktop, mobile, tablet, and phone).                                                                                | 25                                   |
| centerMode           | enum / object   | Defines positioning of the slider elements on the screen. Possible values are: center (elements are centered, allowing users to see a peek of the previous and next slides), to-the-left (aligns elements to the left side, allowing users to see a peek of the next slide, but not the previous one), and disabled (disables the feature, rendering elements on the whole screen without showing a peek of the previous and next slides). Note: This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (desktop, mobile, tablet, and phone). | disabled                             |
| centerModeSlidesGap  | number          | Number of pixels between slides when centerMode is set to center or to-the-left.                                                                                | undefined                            |

* **`itemsPerPage` object**

| Prop name | Type   | Description                                              | Default value |
| --------- | ------ | -------------------------------------------------------- | ------------- |
| desktop   | number | The number of slides to be displayed on desktop devices. | 5             |
| tablet    | number | The number of slides to be displayed on tablet devices.  | 3             |
| phone     | number | The number of slides to be displayed on phone devices.   | 1             |

* **`slideTransition` object**

| Prop name | Type   | Description                             | Default value |
| --------- | ------ | --------------------------------------- | ------------- |
| speed     | number | Transition speed (in ms).               | 400           |
| delay     | number | Delay between slide transition (in ms). | 0             |
| timing    | string | Timing function.                        | ''            |

* **`autoplay` object**

| Prop name   | Type    | Description                                                                                | Default value |
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- | ------------- |
| timeout     | number  | Timeout (in ms) between each slide.                                                                        | undefined     |
| stopOnHover | boolean | Determines whether the autoplay should stop when users are hovering over the slider (true) or not (false). | undefined     |

## Advanced configuration

The `slider-layout-group` block synchronizes the slides rendered by each `slider-layout` block declared in it.

Therefore, the `slider-layout-group` does not render any specific component on the store UI. It is really a logical block that only expects to receive a `children` block list containing the desired `slider-layout` blocks that should be rendered. For example:

`1

{

2

 "slider-layout-group#test": {

3

 "children": ["slider-layout#1", "slider-layout#2", "slider-layout#3"]

4

 }

5

}

`

Below, you can find a practical example using three `slider-layout` blocks inside of a `slider-layout-group`. Each `slider-layout` received three `rich-text` blocks as `children` to serve as individual slides:

![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAEklEQVR4nGP49evXrFmzcsEAADeoB0tvDRCDAAAAAElFTkSuQmCC","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-3.gif","width":1062,"height":176,"type":"gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-3.gif)

> **\*All `slider-layout` blocks declared in the `slider-layout-group` must have the same configuration, meaning the same props and values**. Due to implementation rules, they can only differ in their `children` block list. Keep in mind that declaring `slider-layout` blocks with different configurations will result in unexpected behavior, leading to errors that are **not** supported by the VTEX Store Framework team.\*

## Customization

To apply CSS customizations to 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://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS handles             |
| ----------------------- |
| paginationDot--isActive |
| paginationDot           |
| paginationDotsContainer |
| slide--firstVisible     |
| slide--hidden           |
| slide--lastVisible      |
| slide--visible          |
| slideChildrenContainer  |
| slide                   |
| sliderArrows            |
| sliderLayoutContainer   |
| sliderLeftArrow         |
| sliderRightArrow        |
| sliderTrackContainer    |
| sliderTrack             |

[Responsive Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-slider-layout/docs/apps/vtex.responsive-layout)[Stack LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-slider-layout/docs/apps/vtex.stack-layout)

See also

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

ON THIS PAGE

[Google Analytics 4 Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-slider-layout/docs/apps/vtex.slider-layout%23google-analytics-4-integration)

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

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

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

Was this helpful?

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


[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 messages 1.71.0 messages graphql api 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.messages@1.71.0/messages-graphql-api/docs/guides)

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

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

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/basic-components)

---

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

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/functional-apps)

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.checkout-ui-settings)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages)

[Messages GraphQL API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages/messages-graphql-api)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.session-client)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/affiliates-program-app)

---

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

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides)

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

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/basic-components)

---

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

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/functional-apps)

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.checkout-ui-settings)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages)

[Messages GraphQL API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages/messages-graphql-api)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.session-client)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/affiliates-program-app)

---

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

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/vtex-io-apps)

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/guides/functional-apps)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages)

Messages GraphQL API

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

Version: 1.71.0

Latest version: 1.71.0

This article serves as a comprehensive reference for the GraphQL API provided by the [Messages app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages). This API enables the internationalization of messages in various store contexts, such as Catalog, Intelligent Search, and VTEX IO apps. For more details about how this API is used, see the [Overwriting the Messages app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-overwriting-the-messages-app) article.

## Schema overview

### Query

languages

translations

userTranslations

listV2

Languages

supported \[String!\]!

default String!

Translation

lang String!

translation String!

MessageListV2

srcLang String!

groupContext String

context String

translations \[Translation!\]!

Query

languages Languages!

authorize Boolean!

translate(args TranslateArgs!) : \[String\]!

translateWithDependencies(args TranslateWithDependenciesArgs!) : \[String\]!

userTranslations(args IndexedMessages!) : \[MessageListV2\]!

listV2(args ListArgsV2!) : \[MessageListV2!\]!

| Field                         | (argument)                                                       | Type                                                                                | Description |
| ----------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| **languages**                 | [Languages](#languages)!                                         | Returns the store's default locale and the list of supported languages. These values are defined in the **Default Language** and **Supported Languages** settings in the [Messages app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages%23settings).                          |             |
| **translate**                 | \[String\]!                                                      | Endpoint that retrieves a list of translated messages from a specific locale in Catalog.                                                                                |             |
| args                          | [TranslateArgs](#translateargs)!                                 | Input for translation requests.                                                                                |             |
| **translateWithDependencies** | \[String\]!                                                      | Retrieves a list of translated messages from a specific locale in a VTEX IO app. The response is a list of MessageListV2, where each element contains a list of messages.                                                                                |             |
| args                          | [TranslateWithDependenciesArgs](#translatewithdependenciesargs)! | Input for translation requests. Similar to TranslateArgs but requires dependency information.                                                                                |             |
| **userTranslations**          | \[[MessageListV2](#messagelistv2)\]!                             | Retrieves user translations. The response is a list of MessageListV2, where each element contains a list of messages from a specific source (CMS, an app, etc.).                                                                                |             |
| args                          | [IndexedMessages](#indexedmessages)!                             | Group of messages by their source language.                                                                                |             |
| **listV2**                    | \[[MessageListV2](#messagelistv2)!\]!                            | Retrieves a subset of all messages stored in VBase. The range argument defines the beginning and the end of the retrieved list. The response is a list of MessageListV2, where each element has a list of messages from a specific source (CMS, an app, etc.).                           |             |
| args                          | [ListArgsV2](#listargsv2)!                                       | Argument used for message pagination.                                                                                |             |
| **authorize**                 | Boolean!                                                         | Handles authorization for requests outside IO using a two-factor [authentication token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/app-authentication-using-auth-tokens). It works with the **Two Factor URL** [app setting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages%23settings). |             |

### Mutation

Mutation

saveV2(args SaveArgsV2!) : Boolean!

| Field      | (argument)                 | Type                                                                                | Description |
| ---------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| **saveV2** | Boolean!                   | Creates or updates custom messages for the specified locale. This applies to translations for Catalog, Intelligent Search, and installed apps. |             |
| args       | [SaveArgsV2](#saveargsv2)! | Input of messages to be saved.                                                                                |             |

## Schema description

> Arguments must be provided by the user. Required fields are marked with an exclamation mark (`!`).

### Languages

| Field         | Type         | Description                                                                                |
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **supported** | \[String!\]! | A list of languages the store supports. Each language is defined by its locale code in [ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php). Example: en-US. If the request to the Messages app has a target language that isn't supported, it will translate to the default language, which is defined by **Supported Languages** in the [app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages%23settings). |
| **default**   | String!      | The default fallback language for the store, defined by its locale code in [ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php). Example: en-US. If the value is \*, all languages will be supported. This is defined by **Default Language** in the [app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages%23settings).                                                                                |

[Query](#query) 🔼

### MessageListV2

| Field            | Type                              | Description                                                                                |
| ---------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **srcLang**      | String!                           | Locale code of the message list source content in [ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php). Example: en-US.                                                                                |
| **groupContext** | String                            | Groups related translations based on their context.Apps: automaticV2.CMS: CMS.Undefined: null.                                                                                |
| **context**      | String                            | Defines the context for the translation. For example:Catalog: ID of the product/brand/category you want to translate, found in the Admin under **Product** \> **Catalog**.Apps: The name of the app in which the message is being overwritten.Intelligent Search: intelligentSearchFacets, which defines the context of VTEX Intelligent Search. |
| **translations** | \[[Translation](#translation)!\]! | List of messages in the context.                                                                                |

[Query](#query) 🔼

[IndexedMessages](#indexedmessages) 🔽

### Translation

| Field           | Type    | Description                                                                                |
| --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
| **lang**        | String! | Message locale code in [ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php). Example: en-US. |
| **translation** | String! | The translated message string.                                                                                |

[MessageListV2](#messagelistv2) 🔼

### IndexedMessages

| Field        | Type                                    | Description                                                                                |
| ------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **from**     | String!                                 | Source message locale code in [ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php). Example: en-US. |
| **messages** | \[[MessageInputV2](#messageinputv2)!\]! | List of messages to check translations. Each item in the list is a message in MessageInputV2 format.                          |

[Query](#query) 🔼

[TranslateArgs](#translateargs) 🔽

[TranslateWithDependenciesArgs](#translatewithdependenciesargs) 🔽

### ListArgsV2

| Field     | Type                             | Description                                               |
| --------- | -------------------------------- | --------------------------------------------------------- |
| **range** | [MessagesRange](#messagesrange)! | Range indicating the first and last messages in the list. |

[Query](#query) 🔼

### MessageInputV2

| Field        | Type                  | Description                                                                                |
| ------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **content**  | String!               | Source message string.                                                                                |
| **context**  | String                | Provides context for the message. For example:Catalog: ID of the product/brand/category you want to check the translation, found in the Admin under Product > Catalog.Apps: The name of the app in which the message has been overwritten. |
| **behavior** | [Behavior](#behavior) | Defines the translation source. The available options are USER\_ONLY, USER\_AND\_APP, and FULL.                                                                                |

[IndexedMessages](#indexedmessages) 🔼

### MessageSaveInputV2

| Field             | Type    | Description                                                                                |
| ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **srcLang**       | String! | Store's locale default code in [ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php). Example: en-US. In the VTEX Intelligent Search context, this variable must be the store's binding default.                                                                                |
| **srcMessage**    | String! | The source message based on its context:Catalog: Source message string.Apps: The ID of your message string declared in the app's messages folder.Intelligent Search: Source message string. Check the list below for the possible values of this variable and their definitions.Category 1: Department.Category 2: Category.Category 3: Subcategory.Price: Price.Promotion: Promotion.New Release: New release.Location: Location.Brand: Brand. |
| **targetMessage** | String! | Catalog: Translated message string.Apps: Translated message string.Intelligent Search: Translated message string.                                                                                |
| **groupContext**  | String  | Groups related translations based on their context.Apps: automaticV2.CMS: CMS.Undefined: null.                                                                                |
| **context**       | String  | Catalog: ID of the product/brand/category you want to translate, found in the Admin under **Product** \> **Catalog**.Apps: The name of the app in which the message is being overwritten.Intelligent Search: intelligentSearchFacets, which defines the context of VTEX Intelligent Search.                                                                                |

[SaveArgsV2](#saveargsv2) 🔽

### MessagesRange

| Field    | Type | Description                         |
| -------- | ---- | ----------------------------------- |
| **from** | Int! | Position of the first list element. |
| **to**   | Int! | Position of the last list element.  |

[ListArgsV2](#listargsv2) 🔼

### SaveArgsV2

| Field         | Type                                            | Description                                                                                |
| ------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **to**        | String!                                         | Target locale code ([ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php), for example: en-US) for the translation. |
| **messages**  | \[[MessageSaveInputV2](#messagesaveinputv2)!\]! | List of messages to be translated.                                                                                |
| **fireEvent** | Boolean                                         | If true, the request triggers an event. Default: false.                                                                                |

[Mutation](#mutation) 🔼

### TranslateArgs

| Field             | Type                                      | Description                                                                                |
| ----------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **indexedByFrom** | \[[IndexedMessages](#indexedmessages)!\]! | List of IndexedMessages. Each item in the list has a locale and a corresponding list of messages.                                                    |
| **to**            | String!                                   | Target locale code ([ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php), for example: en-US) for the translation.         |
| **depTree**       | String                                    | The dependency tree in the format "\[{"id": "{context}"}\]". Example: "\[{"id": "[vtex.store-components@3.x](mailto:vtex.store-components@3.x)"}\]". |
| **encoding**      | [Encoding](#encoding)                     | The encoding format for messages sent to the automatic translation service. The available formats are ICU and HANDLEBARS.                            |

[Query](#query) 🔼

### TranslateWithDependenciesArgs

| Field             | Type                                      | Description                                                                                |
| ----------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **indexedByFrom** | \[[IndexedMessages](#indexedmessages)!\]! | List of IndexedMessages. Each item in the list has a locale and a corresponding list of messages.                                                    |
| **to**            | String!                                   | Target locale code ([ISO 639-1 format](https://read.calvincode.net/reader?url=https://www.loc.gov/standards/iso639-2/php/code%5Flist.php), for example: en-US) for the translation.         |
| **depTree**       | String!                                   | The dependency tree in the format "\[{"id": "{context}"}\]". Example: "\[{"id": "[vtex.store-components@3.x](mailto:vtex.store-components@3.x)"}\]". |
| **encoding**      | [Encoding](#encoding)                     | The encoding format for messages sent to the automatic translation service. The available formats are ICU and HANDLEBARS.                            |

[Query](#query) 🔼

### Behavior

| Value              | Description                                                                              |
| ------------------ | ---------------------------------------------------------------------------------------- |
| **USER\_ONLY**     | Only uses translations defined by users, ignoring app and automatic translations.        |
| **USER\_AND\_APP** | Uses both user-defined and app-defined translations, but ignores automatic translations. |
| **FULL**           | Uses all available translation sources.                                                  |

[MessageInputV2](#messageinputv2) 🔼

### Encoding

| Value          | Description                                                                                |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **ICU**        | Use for messages to be encoded in [ICU (International Components for Unicode) format](https://read.calvincode.net/reader?url=https://unicode-org.github.io/icu/userguide/format%5Fparse/messages) through the [ICU MessageFormat Parser](https://read.calvincode.net/reader?url=https://formatjs.github.io/docs/icu-messageformat-parser). |
| **HANDLEBARS** | Use for messages to be encoded in [Handlebars format](https://read.calvincode.net/reader?url=https://handlebarsjs.com/guide/%23installation).                                                                                |

[TranslateArgs](#translateargs) 🔼

[TranslateWithDependenciesArgs](#translatewithdependenciesargs) 🔼

[Messages« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages)[Product ContextNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.product-context)

See also

[Vtex.messagesVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Schema overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23schema-overview)

[Query](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23query)[Mutation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23mutation)

[Schema description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23schema-description)

[Languages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23languages)[MessageListV2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23messagelistv2)[Translation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23translation)[IndexedMessages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23indexedmessages)[ListArgsV2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23listargsv2)[MessageInputV2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23messageinputv2)[MessageSaveInputV2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23messagesaveinputv2)[MessagesRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23messagesrange)[SaveArgsV2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23saveargsv2)[TranslateArgs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23translateargs)[TranslateWithDependenciesArgs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23translatewithdependenciesargs)[Behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23behavior)[Encoding](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.messages@1.71.0/messages-graphql-api/docs/apps/vtex.messages@1.71.0/messages-graphql-api%23encoding)

Was this helpful?

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


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

[User] How do I use the VTEX store components 3.178.5 BackToTopButton app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/BackToTopButton/docs/troubleshooting)

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Back To Top Button

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

Version: 3.178.5

Latest version: 3.178.5

The `back-to-top-button` component is a button that redirects users to the top of the page when clicked.

![{"base64":"  ","img":{"width":1586,"height":713,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56394,"url":"https://user-images.githubusercontent.com/28419764/77644893-9238af80-6f40-11ea-8ceb-7355d0c12686.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/28419764/77644893-9238af80-6f40-11ea-8ceb-7355d0c12686.png)

_Back To Top Button rendered as a text button_

![{"base64":"  ","img":{"width":1574,"height":683,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1687084,"url":"https://user-images.githubusercontent.com/28419764/79279983-a60f6b80-7e85-11ea-9a8d-48abd655e559.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/28419764/79279983-a60f6b80-7e85-11ea-9a8d-48abd655e559.png)

_Back To Top Button rendered as a caret icon_

## Configuration

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

`1

 "dependencies": {

2

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

3

 }

`

1. Add the `back-to-top-button` block into a store template of your choice. In the example, it will be added to the home page:

`1

 "store.home": {

2

 "blocks": [

3

+ "back-to-top-button",

4

 ]

5

 },

`

1. Then, declare the `back-to-top-button` block using the props stated in the [Props](#props) table. For example:

`1

 "store.home": {

2

 "blocks": [

3

 "back-to-top-button",

4

 ]

5

 },

6

+ "back-to-top-button":{

7

+ "props":{

8

+ "displayThreshold": 800,

9

+ }

10

+ }

`

### Props

| Prop name        | Type   | Description                                                                                | Default Value |
| ---------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| display          | enum   | Defines the component rendering. Possible values are: button to display a button with a Back To Top label text or caret-icon to display just an icon. | button        |
| displayThreshold | number | Defines the window Y pixel in which the button will be displayed.                                                                                | 600           |

## Customization

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

| CSS Handles              |
| ------------------------ |
| backToTopButtonActive    |
| backToTopButtonContainer |
| backToTopButtonHidden    |

See also

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

ON THIS PAGE

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

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

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