[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 global tokens interactive controls 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/global-tokens-interactive-controls/docs/guides)

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore)

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

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

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

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

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

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/using-themes-overview)

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides)

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

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

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

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

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

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore)

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

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

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

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

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

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/using-themes-overview)

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore)

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

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-overview)

Interactive Controls

`Tap`, `States` and `Sizing` definitions.

`Tap`, `States` and `Sizing` definitions.

## Tap

| Global Token                    | Value                                |
| ------------------------------- | ------------------------------------ |
| \--fs-control-tap-size          | var(--fs-spacing-7)                  |
| \--fs-control-tap-size-smallest | calc(var(--fs-control-tap-size) / 2) |
| \--fs-control-min-height        | var(--fs-control-tap-size)           |

## States

| Global Token               | Value                        |
| -------------------------- | ---------------------------- |
| \--fs-control-bkg          | var(--fs-color-neutral-0)    |
| \--fs-control-bkg-disabled | var(--fs-color-disabled-bkg) |

Contributors

1

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

[Grid and Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-grid-and-layout)[RefinementsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-refinements)

Contributors

1

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

ON THIS PAGE

[Tap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-interactive-controls%23tap)

[States](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-interactive-controls%23states)

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/styling/global-tokens/interactive-controls.mdx)

Copy page

On this page

ON THIS PAGE

[Tap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-interactive-controls%23tap)

[States](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-interactive-controls/docs/guides/faststore/global-tokens-interactive-controls%23states)

On this page

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


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

[User] Provide a guide on guides faststore troubleshooting analytics and partytown 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/troubleshooting-analytics-and-partytown/docs/guides)

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore)

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

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

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

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

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

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

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

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

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

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

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

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

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

[Debugging Partytown and analytics issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown)

[Identifying development errors and Starter bugs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-identifying-development-errors-and-starter-bugs)

[Tracing the error source](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-tracing-the-error-source)

---

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

---

(Legacy) CMS Portal

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides)

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

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

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

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

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

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore)

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

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

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

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

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

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

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

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

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

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

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

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

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

[Debugging Partytown and analytics issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown)

[Identifying development errors and Starter bugs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-identifying-development-errors-and-starter-bugs)

[Tracing the error source](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-tracing-the-error-source)

---

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

---

(Legacy) CMS Portal

---

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

---

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

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore)

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

Troubleshooting analytics and Partytown

The overwhelming majority of ecommerce websites use at least one analytics provider to collect metrics and track user behaviors. These analytics providers usually work by downloading and executing heavy javascript bundles in the browser, which may degrade website performance.

[Partytown](https://read.calvincode.net/reader?url=https://partytown.builder.io/) is a tool that can help reduce this damage by moving third-party scripts' execution to a web worker. Since Partytown is a beta solution and the third-party scripts run in a different environment than what they were built for, some errors are expected to occur. The following topics bring relevant information for debugging Partytown and analytics in general.

---

## Google Tag Assistant is not working

Debugging Google Tag Manager (GTM) and Google Analytics (GA) using Google Tag Assistant is, as of now, not possible if you're using Partytown. Thus, debugging your tags and GA behavior on your website requires turning partytown down. We recognize this is not ideal; after all, you'll not be debugging in the same environment your users will browse. If you're using Google Analytics 4 (recommended), you can mitigate this effect by debugging the events inside GA: check [Google official documentation](https://read.calvincode.net/reader?url=https://support.google.com/analytics/answer/7201382?hl=pt-BR%23zippy=%2Cgerenciador-de-tags-do-google-sites) on how to enable it.

To help you debug GTM and GA using Google Tag Assistant, we've included a switch in the form of a query string in our starters. When this query string is included in the URL, it is guaranteed that partytown will not be enabled for GTM. You can enable this query string to be included automatically when previewing a GTM container (image below). Check the next topic for more details on this query string.

![{"base64":"  ","img":{"width":671,"height":537,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":161132,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/enable-gtm-debug-query-string___a500fcb42a88127e93fb8c5e44ce119c.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/enable-gtm-debug-query-string___a500fcb42a88127e93fb8c5e44ce119c.png)

---

## `gtm_debug=` query string

Whenever the `gtm_debug=` query string is included in the URL, the GTM scripts (and all scripts/tags it injects) run outside Partytown. That's a great way of knowing if the error you're experiencing happens even if it runs without Partytown. You can navigate through pages, and GTM will still run without Partytown, as long as you're using the Single Page Application (SPA) navigation and not an absolute link to another page.

---

## See events pushed to `dataLayer`

The `dataLayer` variable is the way GTM provides to send data to its tags. When Partytown is enabled, it behaves differently. Essentially, you are no longer able to read the content of this variable from the browser's console. To see what's being pushed to the dataLayer, execute the following script in the browser's console.

`1

window.dataLayerHistory = []

2

const originalPush = dataLayer.push

3

dataLayer.push = (data) => {

4

 console.log(data)

5

 dataLayerHistory.push(data)

6

 originalPush(data)

7

}

`

After you run this, every event added to the `dataLayer` will be logged in the browser's console and will also be available in the `window.dataLayerHistory` variable so you can check all the events more easily. You can navigate through pages, and the events will still be logged and sent as long as you're using the Single Page Application (SPA) navigation, and not an absolute link to another page.

---

## jQuery is not defined / $ is not defined

If you're using a script that depends on jQuery to work, it will probably break when it runs inside Partytown. That can also happen to scripts injected by GTM that depend on jQuery. If you see an error with logs pointing to something like `jQuery is not defined` or `$ is not defined`, it's because Partytown can't access jQuery from within the Service Worker it runs the script.

There are a few possible solutions for this:

1. (Recommended) Remove the jQuery dependency from the script and use vanilla javascript instead.
2. Break down the script into smaller pieces, so only the parts that don't depend on jQuery run as expected. Meanwhile, you can address the faulty part of the script by following one of the other solutions provided here.
3. Reference jQuery from inside the script in a way Partytown understands. In the script, you can set `$ = jQuery = window.jQuery` to define these variables locally. This way, Partytown may be able to recognize and use jQuery from inside the Web Worker.

Contributors

3

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

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

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

Was this helpful?

Yes

No

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

[Troubleshooting« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-overview)[Identifying development errors and Starter bugsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-identifying-development-errors-and-starter-bugs)

Contributors

3

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

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

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

ON THIS PAGE

[Google Tag Assistant is not working](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23google-tag-assistant-is-not-working)

[gtm\_debug= query string](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23gtmdebug-query-string)

[See events pushed to dataLayer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23see-events-pushed-to-datalayer)

[jQuery is not defined / $ is not defined](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23jquery-is-not-defined---is-not-defined)

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/troubleshooting/analytics-and-partytown.mdx)

Copy page

On this page

ON THIS PAGE

[Google Tag Assistant is not working](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23google-tag-assistant-is-not-working)

[gtm\_debug= query string](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23gtmdebug-query-string)

[See events pushed to dataLayer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23see-events-pushed-to-datalayer)

[jQuery is not defined / $ is not defined](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown/docs/guides/faststore/troubleshooting-analytics-and-partytown%23jquery-is-not-defined---is-not-defined)

On this page

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


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

[User] How do I use the VTEX store newsletter 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-newsletter/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/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-newsletter/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-newsletter/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-newsletter/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-newsletter/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-newsletter/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-icons/iconpack)

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

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.similar-products-variants)

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

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

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

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

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

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

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

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-icons/iconpack)

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

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.similar-products-variants)

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

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

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

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

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

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

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

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Store Newsletter

Official extension

Version: 1.3.0

Latest version: 1.3.0

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The Store Newsletter app provides a set of blocks that you can use to create a newsletter subscription form.

![{"base64":"  ","img":{"width":1038,"height":390,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28664,"url":"https://user-images.githubusercontent.com/27777263/96277790-1c169b80-0fab-11eb-99cb-6b55ea7f5b7f.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/27777263/96277790-1c169b80-0fab-11eb-99cb-6b55ea7f5b7f.png)

## Configuration

1. Add `vtex.store-newsletter` to your app's dependencies in the `manifest.json` file:

`1

 "dependencies": {

2

+ "vtex.store-newsletter": "1.x"

3

 }

`

Now, you are able to use all blocks exported by the `store-newsletter` app. Check out the full list below:

| Block name                       | Description                                                                                |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| newsletter-form                  | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Top level block that provides context to all its children. |
| newsletter-input-email           | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Renders an email input in the newsletter form.             |
| newsletter-input-name            | Renders an name input in the newsletter form.                                                                                |
| newsletter-input-phone           | Renders an phone input in the newsletter form.                                                                                |
| newsletter-checkbox-confirmation | Renders a confirmation checkbox in the newsletter form.                                                                                |
| newsletter-hidden-field          | Doesn't render anything, but enables hidden fields on the form to fetch custom data and save them in the store's [Master Data](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-master-data--4otjBnR27u4WUIciQsmkAw) whenever a user subscribes to the newsletter.                   |
| newsletter-submit                | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Renders a Submit button for the newsletter form.           |

1. In the desired store template, such as the `store.home`, add the `newsletter-form` block and its desired children:

`1

{

2

 "store.home": {

3

 "children": ["newsletter-form"]

4

 },

5

6

 "newsletter-form": {

7

 "children": [

8

 "newsletter-input-email",

9

 "newsletter-input-name",

10

 "newsletter-submit"

11

 ]

12

 }

13

}

`

### `newsletter-form` props

| Prop name    | Type             | Description                                                                                | Default value |
| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| ErrorState   | block            | Block to be rendered if the submission of the form fails. If none is passed, a default error component will be rendered.                                                                                | undefined     |
| SuccessState | block            | Block to be rendered if form submission succeeds. If none is passed, a default success component will be rendered.                                                                                | undefined     |
| LoadingState | block            | Block to be rendered while the form submission is loading. If none is passed, the default behavior is for the submit button to show a spinner during this loading period.                                                                                | undefined     |
| classes      | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only useful if you're importing this block as a React component. | undefined     |

### `newsletter-input-email` props

| Prop name       | Type             | Description                                                                                | Default value                                                          |
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| placeholderText | string           | Placeholder text for the email input.                                                                                | Enter your email address (translated according to the store's locale). |
| inputLabel      | string           | Label for the email input.                                                                                | null                                                                   |
| errorMessage    | string           | Error message to be shown if email is invalid.                                                                                | Invalid email address (translated according to the store's locale).    |
| classes         | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only useful if you're importing this block as a React component. | undefined                                                              |

### `newsletter-input-name` props

| Prop name       | Type             | Description                                                                                | Default value                                                 |
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| placeholderText | string           | Placeholder text for name input.                                                                                | Enter your name (translated according to the store's locale). |
| inputLabel      | string           | Label for the name input.                                                                                | null                                                          |
| errorMessage    | string           | Error message to be shown if name input is empty.                                                                                | Invalid name (translated according to the store's locale).    |
| classes         | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only useful if you're importing this block as a React component. | undefined                                                     |

### `newsletter-input-phone` props

| Prop name       | Type             | Description                                                                                | Default value                                                  |
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| placeholderText | string           | Placeholder text for phone input.                                                                                | Enter your phone (translated according to the store's locale). |
| inputLabel      | string           | Label for the phone input.                                                                                | null                                                           |
| errorMessage    | string           | Error message to be shown if phone input is empty.                                                                                | Invalid phone (translated according to the store's locale).    |
| classes         | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only useful if you're importing this block as a React component. | undefined                                                      |

### `newsletter-checkbox-confirmation` props

| Prop name       | Type             | Description                                                                                | Default value                                                                      |
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| checkboxLabel   | string           | Label for the confirmation checkbox. This prop supports the [ICU Message Format](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/), exposing two variables for you to interpolate: firstLink and secondLink.                                    | I agree to received this newsletter. (translated according to the store's locale). |
| firstLabelLink  | Object           | Configures the firstLink variable to be interpolated by the text passed to checkboxLabel. checkbox.                                                                                | undefined.                                                                         |
| secondLabelLink | Object           | Configures the secondLink variable to be interpolated by the text passed to checkboxLabel. checkbox.                                                                                | undefined                                                                          |
| classes         | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only useful if you're importing this block as a React component. | undefined                                                                          |

* `firstLabelLink` and `secondLabelLink` objects:

| Prop name | Type   | Description                 | Default value |
| --------- | ------ | --------------------------- | ------------- |
| url       | string | The link's URL.             | undefined     |
| text      | string | Text displayed on the link. | undefined     |

### `newsletter-hidden-field` props

| Prop name     | Type     | Description                                                                                | Default value |
| ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| dynamicFields | \[enum\] | Desired hidden fields responsible for saving the user's custom data on [Master Data](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-master-data--4otjBnR27u4WUIciQsmkAw) once the newsletter form is submitted. Notice that the name of the fields must be written in an array and represent which user data they save. Possible values are: bindingUrl and bindingId. _Caution_: To properly save the data, you must also [create the desired filters](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-can-i-create-a-field-in-master-data--frequentlyAskedQuestions%5F1829) in the Master Data's Client entity. | undefined     |

### `newsletter-submit` props

| Prop name         | Type             | Description                                                                                | Default value                                           |
| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| submitButtonLabel | string           | Text displayed on the submit button.                                                                                | Subscribe (translated according to the store's locale). |
| classes           | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only useful if you're importing this block as a React component. | undefined                                               |

## Customization

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

| CSS Handles                   |
| ----------------------------- |
| confirmationCheckboxContainer |
| confirmationCheckboxLabel     |
| defaultErrorMessage           |
| defaultSuccessMessage         |
| emailInputContainer           |
| emailInputContainer--invalid  |
| emailInputLabel               |
| formSubmitContainer           |
| formSubmitContainer--invalid  |
| nameInputContainer            |
| nameInputContainer--invalid   |
| nameInputLabel                |
| newsletterForm                |
| phoneInputContainer           |
| phoneInputContainer--invalid  |
| phoneInputLabel               |

[Store Media« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-media)[VideoNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-video)

See also

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

ON THIS PAGE

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

[newsletter-form props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-form-props)[newsletter-input-email props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-input-email-props)[newsletter-input-name props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-input-name-props)[newsletter-input-phone props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-input-phone-props)[newsletter-checkbox-confirmation props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-checkbox-confirmation-props)[newsletter-hidden-field props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-hidden-field-props)[newsletter-submit props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%23newsletter-submit-props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-newsletter/docs/apps/vtex.store-newsletter%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] Provide a guide on guides vtexjs 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/vtexjs/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtex-platform-overview)

---

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

---

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

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

[My Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/ui-customization-my-authentication)

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

[vtex.js for Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs-for-checkout)

[vtex.js for Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs-for-catalog)

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtex-platform-overview)

---

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

---

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

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

[My Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/ui-customization-my-authentication)

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

[vtex.js for Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs-for-checkout)

[vtex.js for Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs-for-catalog)

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

UI Customization

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

vtex.js

With vtex.js you can manipulate catalog and checkout data from the client's side, customizing the store template with additional information according to your business needs.

## Installation

vtex.js depends on jQuery, so make sure it is included in the page before vtex.js.

You may insert all the modules from vtex.js in your store:

`1

<script src="//io.vtex.com.br/vtex.js/2.0.0/vtex.min.js"></script>

`

Or you may insert the modules individually:

`1

<script src="//io.vtex.com.br/vtex.js/2.0.0/extended-ajax.min.js"></script>

2

<script src="//io.vtex.com.br/vtex.js/2.0.0/catalog.min.js"></script>

3

<script src="//io.vtex.com.br/vtex.js/2.0.0/checkout.min.js"></script>

`

Now you have access to various methods to use VTEX APIs through the objects `vtexjs.catalog` and `vtexjs.checkout`.

## Modules

vtex.js is made up of several modules, which contain functions that are used to communicate with VTEX services.

The modules reside in the global `vtexjs` object. When you include a module script, an object with all methods is created to access the APIs of that module. For example, by adding the Checkout module, you now have the `vtexjs.checkout` object, with several methods for accessing the Checkout API.

### Checkout module

The Checkout module handles customer purchase data.

Checkout adds different data needed to create an order: client profile data, address, shipping, items data, and others.

The `OrderForm` is the structure that contains this clustered data. It consists of several sections, each with useful information that can be accessed, manipulated, and (possibly) changed. To learn more, refer to the [orderForm documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields).

Check the complete documentation for all methods of this module [here](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/vtexjs-for-checkout).

### Catalog module

The Catalog module gets data related to your store's products.

Read the complete documentation for all methods of this module [here](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/vtexjs-for-catalog).

## Development

In order to develop properly, clone the [vtex.js repository](https://read.calvincode.net/reader?url=https://github.com/vtex/vtex.js), install the dependencies, and run the command:

`1

sudo grunt

`

Now vtex.js can be linked to other repositories for development.

Contributors

2

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/UI-Customization/vtexjs.md)

[My Authentication« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs//docs/guides/ui-customization-my-authentication)[vtex.js for CheckoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs//docs/guides/vtexjs-for-checkout)

Contributors

2

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

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

ON THIS PAGE

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

[Modules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23modules)

[Checkout module](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23checkout-module)[Catalog module](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23catalog-module)

[Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23development)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/UI-Customization/vtexjs.md)

Copy page

On this page

ON THIS PAGE

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

[Modules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23modules)

[Checkout module](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23checkout-module)[Catalog module](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23catalog-module)

[Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexjs/docs/guides/vtexjs%23development)

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