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

[User] Provide a guide on guides faststore developer tools custom cypress in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/components-index)

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/seo-overview)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/troubleshooting-overview)

---

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

---

(Legacy) CMS Portal

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/troubleshooting)

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/components-index)

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/seo-overview)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/troubleshooting-overview)

---

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

---

(Legacy) CMS Portal

---

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

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore)

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

Custom Cypress integration

> This is an experimental feature.

The `enableCypressExtension` experimental feature flag allows you to leverage [Cypress](https://read.calvincode.net/reader?url=https://www.cypress.io/) extensions within your FastStore project, enabling you to seamlessly run custom Cypress tests.

Cypress extensions enhance the testing capabilities of your Faststore project by enabling the incorporation of custom Cypress tests alongside the native integration tests provided by Faststore.

With `enableCypressExtension`, you can implement custom integration tests into a dedicated Cypress folder within your storefront project. This integration ensures the smooth execution of both the native tests and the custom ones you create as part of the continuous integration (CI) pipeline. Learn how to add custom integration tests in the following steps.

---

## Before you begin

* Please be aware that this feature is experimental and may not be suitable for all use cases.
* Refer to [Cypress documentation](https://read.calvincode.net/reader?url=https://docs.cypress.io/guides/overview/why-cypress) for more information on this testing tool.
* Ensure you are using `@faststore/core` `2.1.56` version or above and `@faststore/cli` version `2.2.9` or above. If you have versions lower than these requirements, update them as follows:
   1. In your storefront project, open the `package.json` file.
   2. Navigate to the `@faststore/core` and update it to at least `2.1.56`.
   3. Navigate to the `@faststore/cli` and update it to at least `2.2.9`.
   4. Run `yarn dev` to apply these changes.

---

## Step 1: Enabling `enableCypressExtension`

1. Open the `discovery.config.js` file.
2. Add the `experimental` object and set the `enableCypressExtension` value to `true`:

discovery.config.js

`1

 experimental: {

2

 enableCypressExtension: true,

3

 }

`

## Step 2: Integrating custom Cypress tests into your FastStore project

Like any other project using Cypress, you'll follow standard practices, including setting up standard Cypress folders and configuration files. This allows you to seamlessly add and execute your custom integration tests within your project. For further details on Cypress configuration, refer to the official [Cypress configuration](https://read.calvincode.net/reader?url=https://docs.cypress.io/guides/references/configuration) guide.

1. In the root directory of your storefront project, create a new folder named `cypress`.
2. Add your custom integration tests within the `cypress/integration` folder.
3. With the local server running, run `yarn test` to open the Cypress app and check your test execution.
4. Open a pull request with the changes you have made.
5. Within the pull request, navigate to **Checks > Integration Tests** and check the **Details** section.

![{"base64":"  ","img":{"width":2854,"height":1362,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":284060,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/custom-test-checks___583ac9b78e43ebdafde93a735a47d61b.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/custom-test-checks___583ac9b78e43ebdafde93a735a47d61b.png)

1. Review the results to check the execution status of your custom integration tests.

---

## Running only custom Cypress tests in FastStore projects

As storefront projects evolve, changes to component and page code may lead to errors in the default end-to-end tests conducted for all FastStore projects.

In such cases, you can override FastStore's default tests using custom tests with the same name as the original test files. For example:

plp.test.js

`1

import { cypress } from '../../discovery.config'

2

3

const { pages } = cypress

4

5

describe('Custom PLP tests', () => {

6

 it('visit collection page', () => {

7

 cy.visit(pages.collection)

8

 cy.get('[data-testid="product-gallery"]').should('exist').and('be.visible')

9

 })

10

})

`

> Although exclusive execution of custom tests is possible for projects using Cypress version 12.x, we do not recommend this approach. If possible, keep the default Cypress tests.

Some projects may prefer exclusive execution of its custom Cypress tests. Although it is not our recommendation, for projects using Cypress version 12.x or higher, there is the possibility of running the **Integration Tests** check only for your custom tests.

Follow the steps below to configure your project to only run custom Cypress tests:

### Instructions

#### Step 1 - Setting Cypress version

First, ensure that you use Cypress version 12 by setting the `cypressVersion` experimental feature flag:

1. Open the `discovery.config.js` file.
2. Inside the `experimental` object, add the `cypressVersion` property.
3. Set the `cypressVersion` value to `12`.

discovery.config.js

`1

 experimental: {

2

 enableCypressExtension: true,

3

 cypressVersion: 12,

4

 }

`

#### Step 2 - Updating the Cypress configuration file

Ensure that your Cypress configuration file (`cypress.json`) matches the latest Cypress configuration file format. To do so, refer to the official [Cypress configuration file](https://read.calvincode.net/reader?url=https://docs.cypress.io/guides/references/configuration) guide.

#### Step 3 - Changing the custom Cypress tests directory

Now, change your custom Cypress tests directory from `cypress/integration` to `cypress/e2e`:

1. In your storefront project, rename the folder from `cypress/integration` to `cypress/e2e`.
2. Update your new Cypress configuration file `cypress.config.ts` to match the new custom tests folder `cypress/e2e` by specifying the `specPattern`:

cypress.config.ts

`1

import { defineConfig } from 'cypress'

2

3

export default defineConfig({

4

 ...,

5

 e2e: {

6

 ...,

7

 specPattern: 'cypress/e2e/**/*.test.{js,jsx,ts,tsx}',

8

 },

9

})

`

1. Run `yarn dev` in the terminal to sync the changes you have made.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developer-tools/custom-cypress.mdx)

[Configuration options for discovery.config.js« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-config-options)[FastStore CLINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-faststore-cli)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23before-you-begin)

[Step 1: Enabling enableCypressExtension](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23step-1-enabling-enablecypressextension)

[Step 2: Integrating custom Cypress tests into your FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23step-2-integrating-custom-cypress-tests-into-your-faststore-project)

[Running only custom Cypress tests in FastStore projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23running-only-custom-cypress-tests-in-faststore-projects)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23instructions)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23before-you-begin)

[Step 1: Enabling enableCypressExtension](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23step-1-enabling-enablecypressextension)

[Step 2: Integrating custom Cypress tests into your FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23step-2-integrating-custom-cypress-tests-into-your-faststore-project)

[Running only custom Cypress tests in FastStore projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%23running-only-custom-cypress-tests-in-faststore-projects)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-custom-cypress/docs/guides/faststore/developer-tools-custom-cypress%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 enable the save user data opt in 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/enable-the-save-user-data-opt-in/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/features)

[Enable the Manual Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-manual-price)

[Enable the Save user data opt-in](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in)

[Enable the Region for SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-region-for-skus)

[Configure the Global Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/configure-the-global-checkout)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/master-data)

---

Payments

---

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/enable-the-save-user-data-opt-in/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/features)

[Enable the Manual Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-manual-price)

[Enable the Save user data opt-in](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in)

[Enable the Region for SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-region-for-skus)

[Configure the Global Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/configure-the-global-checkout)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/master-data)

---

Payments

---

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/enable-the-save-user-data-opt-in/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/checkout-api-overview)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/features)

[Enable the Save user data opt-in](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in)

Enable the Save user data opt-in

To comply with GDPR (General Data Protection Regulation - Europe) and LGPD - Lei Geral de Proteção de Dados (General Data Protection Law - Brazil), among other solutions, VTEX offers the **Save User Data opt-in** functionality. Through it, users can select whether they want the store to keep their personal and payment data saved.

> The **Save user data opt-in** feature is only available for Checkout v6.

## Save user data opt-in activation

To use the **Save user data opt-in** functionality in your store, you must first enable it. Then, follow the settings below:

1. Make a `GET` request using the endpoint [Get orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pvt/configuration/orderForm).
2. Make a `POST` request using the endpoint [Update orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pvt/configuration/orderForm) with the same data obtained in the GET request, just modifying the value of the `savePersonalDataAsOptIn` parameter from `null` to `true`.
3. Make a new `GET` request using the endpoint [Get orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pvt/configuration/orderForm) to confirm activation. This will be indicated by the presence of the `savePaymentData` and `savePersonalData` fields under the `clientPreferencesData` object in the `orderForm`.

![{"base64":"  ","img":{"width":714,"height":508,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":70328,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-0.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-0.PNG)

> Under the `storePreferencesData` object, the `saveUserData` field may be indicated as `true`. This field is ignored, and kept in this configuration for backwards compatibility only.

![{"base64":"  ","img":{"width":928,"height":481,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":108238,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-1.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-1.PNG)

## Saving personal and payment data

Once the **Save user data opt-in** is enabled, the user will have access to checkboxes on the Checkout page to select whether their personal and payment data should be kept by the store and used in future orders.

Checkbox for saving personal data:

![{"base64":"  ","img":{"width":1266,"height":854,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":69558,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-2.png)

> Previously, it was possible to display this checkbox by modifying the `display` property of the `.save-data` element, via CSS. However, with the **Save user data opt-in** enabled, the method through CSS is no longer recommended.

Checkbox for saving payment data:

![{"base64":"  ","img":{"width":1266,"height":638,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":108710,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-3.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-3.PNG)

> The checkbox for saving payment data will only be shown if the user has already selected the option to save their personal data.

Checkbox not available to save payment data if (the user has not previously selected the option to save personal data):

![{"base64":"  ","img":{"width":1266,"height":627,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":92561,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-4.png)

If the user chooses to use two cards to pay for the purchase, when selecting the option to save payment data, the data of both cards will be saved. There is no option to save only one of the cards.

Checkbox to save payment data from both cards:

![{"base64":"  ","img":{"width":1266,"height":906,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":122845,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-5.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-the-save-user-data-opt-in-5.png)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/_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/enable-the-save-user-data-opt-in/_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/Checkout/features/enable-the-save-user-data-opt-in.md)

[Enable the Manual Price« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in//docs/guides/enable-the-manual-price)[Enable the Region for SKUsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in//docs/guides/enable-the-region-for-skus)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/_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/enable-the-save-user-data-opt-in/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

ON THIS PAGE

[Save user data opt-in activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in%23save-user-data-opt-in-activation)

[Saving personal and payment data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in%23saving-personal-and-payment-data)

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/Checkout/features/enable-the-save-user-data-opt-in.md)

Copy page

On this page

ON THIS PAGE

[Save user data opt-in activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in%23save-user-data-opt-in-activation)

[Saving personal and payment data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in/docs/guides/enable-the-save-user-data-opt-in%23saving-personal-and-payment-data)

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] Explain troubleshooting modal layout closes when i click a sku 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/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/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/troubleshooting/modal-layout-closes-when-i-click-a-sku/updates/release-notes)

Troubleshooting

API

---

Development

[I am getting 500 errors in VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-am-getting-500-errors-in-vtex-io-cli)

[I am getting errors with my service configuration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)

[Issues during extending the FastStore API schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/issues-during-extending-the-faststore-api-schema)

[I can’t access the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/unable-to-access-headless-cms)

[I can’t install the Headless CMS plugins in my account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-install-the-headless-cms-plugins-in-my-account)

[I can't install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-install-vtex-io-cli)

[I can’t integrate my external Search Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-integrate-my-external-search-provider)

[My multi-language store is not functioning in the development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace)

[My store catalog does not display the price range filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

[My pages are taking too long to be published on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-pages-are-taking-too-long-to-be-published-on-headless-cms)

[My store does not reflect the overrides I created](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)

[Modal Layout closes when I click a SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku)

[The Price in the shelf or in the search results is different from the product page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

[The promotion highlight flag does not appear on the product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/the-promotion-highlight-flag-does-not-appear-on-the-product)

[vtex release CLI command returns an EBADF message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/vtex-release-cli-command-returns-ebadf-message)

[I can't create a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-create-a-new-workspace)

[I can't install an app with a major other than 0.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-install-an-app-with-a-major-other-than-0x)

[I don't see my Store Theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-dont-see-my-store-theme-changes)

---

Store performance

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/updates/release-notes)

Troubleshooting

API

---

Development

[I am getting 500 errors in VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-am-getting-500-errors-in-vtex-io-cli)

[I am getting errors with my service configuration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)

[Issues during extending the FastStore API schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/issues-during-extending-the-faststore-api-schema)

[I can’t access the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/unable-to-access-headless-cms)

[I can’t install the Headless CMS plugins in my account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-install-the-headless-cms-plugins-in-my-account)

[I can't install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-install-vtex-io-cli)

[I can’t integrate my external Search Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-integrate-my-external-search-provider)

[My multi-language store is not functioning in the development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace)

[My store catalog does not display the price range filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

[My pages are taking too long to be published on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-pages-are-taking-too-long-to-be-published-on-headless-cms)

[My store does not reflect the overrides I created](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)

[Modal Layout closes when I click a SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku)

[The Price in the shelf or in the search results is different from the product page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

[The promotion highlight flag does not appear on the product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/the-promotion-highlight-flag-does-not-appear-on-the-product)

[vtex release CLI command returns an EBADF message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/vtex-release-cli-command-returns-ebadf-message)

[I can't create a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-create-a-new-workspace)

[I can't install an app with a major other than 0.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-cant-install-an-app-with-a-major-other-than-0x)

[I don't see my Store Theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/i-dont-see-my-store-theme-changes)

---

Store performance

---

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting)

Development

Modal Layout closes when I click a SKU

When using Product Summary within a storefront modal, the modal closes when you click a SKU.

**Keywords:** Modal Layout | SKU Selector | Product Summary | SKU | Product | Storefront

The [Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout) component provides blocks to create modals in your storefront. Within a [Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary) component such as the [Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-shelf/) in a search results page, when you define [SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/skuselector) as a prop in the `modal-content` block, the component will display all the SKUs available for a given product. However, if you click a SKU option, the modal will close, as shown below.

![{"base64":"  ","img":{"width":1878,"height":767,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1276666,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/sku-selector.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/sku-selector.gif)

This behavior will occur every time you click a SKU from the [SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/skuselector) component inside the modal because it expects you to be on the product page with that SKU highlighted. When you pick a size, the URL changes — the SKU ID is added to the end of the URL as a query parameter (e.g., `?skuId=880021`), and the component closes since it is considered a new page.

## Solution

To solve this issue, you must replace the [SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/skuselector) component with the [Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryskuselector), which represents the SKU Selector inside a Product Summary component, such as the Shelf, on a search results page.

1. Add the `product-summary-sku-selector` block to your code, declaring it as a child of the `modal-content` block, as in the example below:
`1
"modal-content#quickview": {
2
 "children":[
3
 "product-summary-name",
4
 "product-images",
5
 "product-summary-sku-selector",
6
 "product-summary-quantity",
7
 "add-to-cart-button"
8
 ],
9
 "props":{
10
 "blockClass": "quickviewContent"
11
 }
12
},
13
"product-summary-sku-selector": {
14
 "props":{
15
 "showVariations Labels": ["false"]
16
 }
17
},
`
2. Run `vtex link` to see your changes reflected in the workspace.

You should then be able to see and interact with the component without the modal closing, as illustrated below:

![{"base64":"  ","img":{"width":1878,"height":767,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":793163,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/product-summary-sku-selector.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/product-summary-sku-selector.gif)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/_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/troubleshooting/modal-layout-closes-when-i-click-a-sku/_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/troubleshooting/development/modal-layout-closes-when-i-click-a-sku.md)

[My store does not reflect the overrides I created« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)[The Price in the shelf or in the search results is different from the product pageNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/_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/troubleshooting/modal-layout-closes-when-i-click-a-sku/_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

[Solution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku%23solution)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/development/modal-layout-closes-when-i-click-a-sku.md)

Copy page

On this page

ON THIS PAGE

[Solution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku%23solution)

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

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-shipping-network)

[Getting started with VTEX IO for VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/getting-started-with-vtex-io-for-vtex-shipping-network)

[Integration flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/integration-flow)

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

[Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/tracking-1)

[VTEX Shipping Network Labels Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-shipping-network-labels-integration)

[VTEX Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-tracking)

[VTEX Pick and Pack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-pick-and-pack)

[Multilevel Omnichannel Inventory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/multilevel-omnichannel-inventory)

[Pickup point](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/setting-up-white-label-seller-as-pickup-point)

[Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/delivery-promise)

---

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/notification-1/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-shipping-network)

[Getting started with VTEX IO for VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/getting-started-with-vtex-io-for-vtex-shipping-network)

[Integration flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/integration-flow)

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

[Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/tracking-1)

[VTEX Shipping Network Labels Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-shipping-network-labels-integration)

[VTEX Tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-tracking)

[VTEX Pick and Pack](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-pick-and-pack)

[Multilevel Omnichannel Inventory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/multilevel-omnichannel-inventory)

[Pickup point](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/setting-up-white-label-seller-as-pickup-point)

[Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/delivery-promise)

---

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/notification-1/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/vtex-shipping-network)

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

Notification

Access the [boilerplate repository for the notification app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-notifier-example) to clone it and begin development.

A notification app published by a carrier will include an endpoint like this one:`https://app.io.vtex.com/{app_name}/{app_version}/{account}/{workspace}/notify`

After an order is invoiced, the VTEX notification hub automatically makes a `POST` request to this endpoint with the package’s details. Then the app should respond with the order’s tracking number. See the examples below, and to learn more about this request, access the [notification API request documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/reference/vtex-log-notification-app).

Request body example:

`1

{

2

 "email": "email",

3

 "dispatchOrder": {

4

 "id": "653560c2-7965-4614-a730-8e45c89bf284",

5

 "packages": [

6

 {

7

 "id": "6bb4c320-932b-46b6-a628-b61b133052e9",

8

 "orderId": "00-1053722798105-01",

9

 "items": [

10

 {

11

 "id": "148350",

12

 "name": "Kit Capacho Geométrico por Marcelo Nunes - 3 Novelos",

13

 "quantity": 1

14

 }

15

 ],

16

 "dimension": {

17

 "height": 20.0,

18

 "length": 20.0,

19

 "width": 30.0,

20

 "weight": 1458.0

21

 },

22

 "recipientPostalCode": "03681-030",

23

 "recipient": {

24

 "cpf": "00000000000",

25

 "id": null,

26

 "name": "Fake Person",

27

 "address": {

28

 "postalCode": "00000-000",

29

 "country": {

30

 "code": "BRA",

31

 "name": "BRA"

32

 },

33

 "subregion1": {

34

 "code": "SP",

35

 "name": "SP"

36

 },

37

 "subregion2": {

38

 "code": "São Paulo",

39

 "name": "São Paulo"

40

 },

41

 "subregion3": {

42

 "code": "Burgo Paulista",

43

 "name": "Burgo Paulista"

44

 },

45

 "street": "Rua Exemplo",

46

 "number": "01",

47

 "complement": null,

48

 "location": {

49

 "lat": -46.48582077026367,

50

 "lng": -23.521709442138672

51

 }

52

 },

53

 "email": null,

54

 "phone": "+5511111111111"

55

 },

56

 "invoiceData": {

57

 "number": "445494",

58

 "value": 6909.0,

59

 "url": "",

60

 "date": "2020-08-14T19:43:09.4740645+00:00",

61

 "invoiceAccessKeys": [

62

 "35200844913721000168550010004454941205352231"

63

 ],

64

 "hasIcms": false,

65

 "hasInsurance": false

66

 },

67

 "trackingData": {

68

 "number": "OM265512653BR",

69

 "log": [],

70

 "finished": false,

71

 "finishedDate": null

72

 },

73

 "origin": "Fulfillment",

74

 "status": "invoiced",

75

 "orderCreationDate": "2020-08-11T19:46:40.0305809+00:00",

76

 "labelIssuedDate": null,

77

 "shippingEstimate": "13bd",

78

 "shippingEstimateDate": "2020-08-31T21:00:00+00:00",

79

 "shippingData": {

80

 "shippingPolicyName": "VTEXLOG EXAMPLE",

81

 "shippingPolicyId": "vtexlog_policy_id",

82

 "carrierName": "vtexlog"

83

 }

84

 }

85

 ],

86

 "sender": {

87

 "cnpj": "00000000000000",

88

 "fantasyName": null,

89

 "stateRegistration": null,

90

 "id": null,

91

 "name": "LTDA",

92

 "address": {

93

 "postalCode": "03475015",

94

 "country": {

95

 "code": "Brasil",

96

 "name": "Brasil"

97

 },

98

 "subregion1": {

99

 "code": "SP",

100

 "name": "SP"

101

 },

102

 "subregion2": {

103

 "code": "São Paulo",

104

 "name": "São Paulo"

105

 },

106

 "subregion3": {

107

 "code": "Vila Antonieta",

108

 "name": "Vila Antonieta"

109

 },

110

 "street": "Rua Exemplo",

111

 "number": "01",

112

 "complement": "",

113

 "location": null

114

 },

115

 "email": null,

116

 "phone": "+5511111111111"

117

 },

118

 "carrier": {

119

 "cnpj": "00000000000000",

120

 "fantasyName": "carrier",

121

 "stateRegistration": "096/3624636",

122

 "id": "vtexlog_exemplo",

123

 "name": "Carrier LTDA.",

124

 "address": {

125

 "postalCode": "90200001",

126

 "country": {

127

 "code": "BRA",

128

 "name": "Brasil"

129

 },

130

 "subregion1": {

131

 "code": "RS",

132

133

 "name": "Rio Grande do Sul"

134

 },

135

 "subregion2": {

136

 "code": "Porto_Alegre",

137

 "name": "Porto Alegre"

138

 },

139

 "subregion3": {

140

 "code": "Anchieta",

141

 "name": "Anchieta"

142

 },

143

 "street": "Rua Exemplo",

144

 "number": "01",

145

 "complement": "Pavilhão 6",

146

 "location": null

147

 },

148

 "email": "email",

149

 "phone": "+5511111111111"

150

 }

151

 }

152

}

`

Response body example:

`1

{

2

 <packageId> : {

3

 "tracking": {

4

 "number": string,

5

 "url": string

6

 },

7

 "notification": {

8

 "id": string

9

 }

10

 }

11

}

`

## Learn more

See this guide on [how to develop carrier apps on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/getting-started-with-vtex-io-for-carriers). You can also learn more about the [integration flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/integration-flow) and [tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/tracking-1) for carrier apps.

Contributors

1

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

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/Fulfillment/vtex-shipping-network/notification-1.md)

[Integration flow« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1//docs/guides/integration-flow)[TrackingNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1//docs/guides/tracking-1)

Contributors

1

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

ON THIS PAGE

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/notification-1%23learn-more)

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/Fulfillment/vtex-shipping-network/notification-1.md)

Copy page

On this page

ON THIS PAGE

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/notification-1/docs/guides/notification-1%23learn-more)

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