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

[User] Provide a guide on guides vtex io documentation deactivating the vtex io native service worker in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-store-theme)

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

Concepts

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

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

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

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework-styling)

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

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

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

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

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework-routing)

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

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

[Getting started with Lighthouse performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-getting-started-with-lighthouse)

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-optimizing-image-rendering)

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

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-go-live)

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

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/troubleshooting)

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-store-theme)

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

Concepts

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

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

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

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework-styling)

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

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

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

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

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework-routing)

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

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

[Getting started with Lighthouse performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-getting-started-with-lighthouse)

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-optimizing-image-rendering)

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

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-go-live)

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

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/store-framework)

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

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

Deactivating the VTEX IO native service worker

All stores built on the Store Framework include a native [Service Worker](https://read.calvincode.net/reader?url=https://developers.google.com/web/fundamentals/primers/service-workers). This service worker is integral to enabling your store to operate as a Progressive Web App (PWA), enhancing user experience by providing features like offline navigation, faster loading times, and the ability to add the store to the home screen.

While the native service worker greatly enhances the functionality of your store, you may find it necessary to integrate third-party services that also require their own service workers. Since a website can only support a single active service worker, conflicts may arise. In such cases, you have the option to deactivate the VTEX IO native service worker, allowing you to implement your desired third-party solution successfully.

## Instructions

1. Access the Admin.
2. Navigate to **Store Settings > Storefront > Store**.
3. Click the `Advanced` tab.
4. Enable the `Service Worker` option to deactivate the native service worker.
![{"base64":"  ","img":{"width":2046,"height":893,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":151885,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker-0.png)
5. Save your changes.

Once you save the changes, the VTEX Service Worker will be automatically disabled, allowing your store to function with the third-party service worker.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker.md)

[Managing performance« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker//docs/guides/store-framework-managing-performance)[Debugging performance issuesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker//docs/guides/vtex-io-documentation-debugging-performance-issues)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker%23instructions)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker%23instructions)

On this page

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


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

[User] Provide a guide on guides vtex io documentation what is vtex store framework in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

What is VTEX Store Framework

When comparing two or more online stores, we can notice similarities in their structure. For instance, regardless of the store, it's common to see products highlighted in the window display, a search bar, menus, product pages with a buy button, a logo, etc.

These commonalities suggest that **online store components are intertwined**, and this makes the process of creating a store easier.

Frontend development can be done using a **single, shareable component structure** among stores, and this is where Store Framework comes into play.

## Delivering the foundation needed for any storefront structure

The VTEX Store Framework is built on the [VTEX IO development platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) and [React](https://read.calvincode.net/reader?url=https://reactjs.org/) technology, and it is responsible for building the storefront by offering native ecommerce components in JSON format.

Our components allow you to:

* Build your store frontend in the **fastest possible go-to-market**.
* Have **comprehensive shopping experiences** that never get old.
* Adapt these experiences to match your store's unique identity since they are highly **flexible** and allow for **high customization**.
* Enjoy native **integration with VTEX APIs**.
* Easily track your store view events through **analytic tools**, such as Google Tag Manager and Google Analytics.
* Connect and collaborate with other developers, ask questions and share your knowledge at the VTEX Community.
* **Standardize the way your team develops** frontend code.

Now that you know what VTEX Store Framework is, dive deeper into it: read the answers to the most [frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-frequently-asked-questions) and take a look at some of our [components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps).

If you're planning to build your storefront using our components, don't hesitate to access our documentation on how to [build a store using Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3).

Contributors

1

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

Was this helpful?

Yes

No

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

Contributors

1

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

ON THIS PAGE

[Delivering the foundation needed for any storefront structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework/docs/guides/vtex-io-documentation-what-is-vtex-store-framework%23delivering-the-foundation-needed-for-any-storefront-structure)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

[Delivering the foundation needed for any storefront structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework/docs/guides/vtex-io-documentation-what-is-vtex-store-framework%23delivering-the-foundation-needed-for-any-storefront-structure)

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

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

VTEX IO Apps

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

---

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

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

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

[Back To Top Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share/docs/apps/vtex.store-components/backtotopbutton)

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

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

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

[Back To Top Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share/docs/apps/vtex.store-components/backtotopbutton)

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Share

[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 `Share` component allows shoppers to share a product URL via social media. This component can be imported and used by any VTEX app.

![{"base64":"  ","img":{"width":1838,"height":844,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":248489,"url":"https://user-images.githubusercontent.com/67270558/134995068-62543fb4-f2fe-4f06-b220-658f4b4c7eb1.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/67270558/134995068-62543fb4-f2fe-4f06-b220-658f4b4c7eb1.png)

## 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 `share` block as a child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

 "share"

4

 ]

5

 }

`

1. Then, declare the `share` block using the props stated in the [Props](#props) table. For example:

`1

 "share": {

2

 "component": "Share"

3

 }

`

### Props

| Prop name             | Type    | Description                                  | Default value                                                    |
| --------------------- | ------- | -------------------------------------------- | ---------------------------------------------------------------- |
| buttonsContainerClass | String  | Button container classes.                    | true                                                             |
| className             | String  | Main container classes.                      | null                                                             |
| imageUrl              | String  | Image url to share in social medias.         |                                                                  |
| options               | Options | Share button options, such as size.          | {}                                                               |
| shareLabelClass       | String  | Share label classes.                         | true                                                             |
| social                | Social  | Possible social media icons to be displayed. | {Facebook: true, Twitter: true, WhatsApp: true, Pinterest: true} |

#### `options` props:

| Prop name | Type   | Description                             |
| --------- | ------ | --------------------------------------- |
| size      | Number | The size of the share button in pixels. |

#### `social` props:

| Prop name | Type    | Description                             |
| --------- | ------- | --------------------------------------- |
| Facebook  | Boolean | If Facebook social media will be shown. |
| Twitter   | Boolean | If Twitter social media will be shown.  |
| WhatsApp  | Boolean | If WhatsApp social media will be shown. |

## 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       |
| ----------------- |
| shareButtons      |
| shareContainer    |
| shareLabel        |
| shareLoader       |
| shareSocialButton |
| shareSocialIcon   |

[Search Bar« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share/docs/apps/vtex.store-components/searchbar)[Shipping SimulatorNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share/docs/apps/vtex.store-components/shippingsimulator)

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share/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/share/docs/apps/vtex.store-components/share%23configuration)

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/share/docs/apps/vtex.store-components/share%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 metadata information in payment transactions 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/metadata-information-in-payment-transactions/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

[Configuration Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/payments-configuration-guides)

[Setting up the type of interest rate](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/setting-up-the-type-of-interest-rate)

[Setting up Merchant ID in Apple Pay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/setting-up-merchant-id-in-apple-pay)

[Cardholder document configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/cardholder-document-configuration)

[Implementing a pre-analysis anti-fraud flow for debit card transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/implementing-a-pre-analysis-antifraud-flow-for-debit-card-transactions)

[Metadata information in payment transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/metadata-information-in-payment-transactions)

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/troubleshooting)

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

[Configuration Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/payments-configuration-guides)

[Setting up the type of interest rate](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/setting-up-the-type-of-interest-rate)

[Setting up Merchant ID in Apple Pay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/setting-up-merchant-id-in-apple-pay)

[Cardholder document configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/cardholder-document-configuration)

[Implementing a pre-analysis anti-fraud flow for debit card transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/implementing-a-pre-analysis-antifraud-flow-for-debit-card-transactions)

[Metadata information in payment transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/metadata-information-in-payment-transactions)

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides)

Payments

[Configuration Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/payments-configuration-guides)

[Metadata information in payment transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/metadata-information-in-payment-transactions)

Metadata information in payment transactions

At VTEX, payment providers have the option of using [Payment Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol) (PPP) endpoints to record additional information that they consider essential for processing a transaction. This can include data related to orders or other platform modules, payment identifiers created by the provider, and internal operations logs.

To use this functionality, it is necessary to create metadata information fields on the PPP endpoints.

## Adding metadata information to your payment transactions

To use metadata in the provider's payment transactions, follow the steps below:

1. Update the provider manifest to include the `metadataFields` array and forward it to VTEX. This array must contain a maximum of 3 strings, each with a maximum length of 20 characters, which will represent the names of the metadata fields to be sent by the provider. See an example below:

`1

...

2

"metadataFields": [

3

 "MetadataName1",

4

 "MetadataName2"

5

 ]

6

...

`

1. Add the `connectorMetadata` array to the request body of the following endpoints ([Create Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments), [Cancel Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/cancellations), [Settle Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/settlements), [Refund Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/refunds) and [Inbound Request (BETA)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/inbound/-action-)). The array must contain the following information:
   * `name`: string that identifies the name of the metadata field inserted in the provider manifest (maximum limit of 20 characters).
   * `value`: string containing the metadata (maximum limit of 200 characters).

See an example below:

`1

...

2

"connectorMetadata": [

3

 {

4

 "name": "MetadataName1",

5

 "value": "MetadataValue1"

6

 },

7

 {

8

 "name": "MetadataName2",

9

 "value": "MetadataValue2"

10

 },

11

]

12

...

`

1. After sending one of the endpoint requests from the previous step, the response body will return the payment and metadata information, indicating that they were stored in the VTEX gateway. See an example of the response body from the [Refund Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/refunds) endpoint.

`1

{

2

 "paymentId": "F5C2A4E21D3B4E09B7E871F5B6BC9F91",

3

 "refundId": "2EA324981E7E4BCC9F9D7B46874C2594",

4

 "value": 57,

5

 "code": null,

6

 "message": "Successfully refunded",

7

 "requestId": "LB4E40D3B4G07B7B871F5B4BC3F31",

8

 "connectorMetadata": [

9

 {

10

 "name": "MetadataName1",

11

 "value": "MetadataValue1"

12

 },

13

 {

14

 "name": "MetadataName2",

15

 "value": "MetadataValue2"

16

 }

17

 ]

18

}

`

Contributors

1

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

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/Payments/payments-configuration-guides/metadata-information-in-payment-transactions.md)

[Implementing a pre-analysis anti-fraud flow for debit card transactions« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions//docs/guides/implementing-a-pre-analysis-antifraud-flow-for-debit-card-transactions)[Feed v3Next »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions//docs/guides/orders-feed)

Contributors

1

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

ON THIS PAGE

[Adding metadata information to your payment transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/metadata-information-in-payment-transactions%23adding-metadata-information-to-your-payment-transactions)

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/Payments/payments-configuration-guides/metadata-information-in-payment-transactions.md)

Copy page

On this page

ON THIS PAGE

[Adding metadata information to your payment transactions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/metadata-information-in-payment-transactions/docs/guides/metadata-information-in-payment-transactions%23adding-metadata-information-to-your-payment-transactions)

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