[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 vtex io cli update 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-vtex-io-cli-update/docs/guides)

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/code-samples)

---

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

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

[Installing VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-install)

[Updating VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-update)

[Using VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-usage)

[Managing plugins](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-plugins)

[Command reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-command-reference)

[Uninstalling VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-uninstall)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

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

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

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

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

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

---

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/code-samples)

---

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

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

[Installing VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-install)

[Updating VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-update)

[Using VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-usage)

[Managing plugins](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-plugins)

[Command reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-command-reference)

[Uninstalling VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-uninstall)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

[Updating VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-update)

Updating VTEX IO's CLI

If the VTEX IO’s CLI version installed on your machine is outdated or deprecated, run the command relative to your operating system to update it.

MacOS
* Brew

Update

`1

brew upgrade vtex

`

Reinstall

`1

brew unlink vtex

2

brew install vtex/vtex

`

Linux
* Standalone

`1

vtex autoupdate

`

> The standalone update is a tarball with a binary that contains its own node.js binary.

Windows
* Standalone.exe

`1

vtex autoupdate

`

## Updating VTEX IO's CLI via NPM

If you have [installed VTEX IO's CLI via NPM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), run the following command to update or handle a deprecated version:

`1

yarn global add vtex

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/_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/Reference/vtex-io-documentation-vtex-io-cli-installation-and-command-reference/vtex-io-documentation-vtex-io-cli-update.md)

[Installing VTEX IO CLI« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update//docs/guides/vtex-io-documentation-vtex-io-cli-install)[Using VTEX IO's CLINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update//docs/guides/vtex-io-documentation-vtex-io-cli-usage)

Contributors

1

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

ON THIS PAGE

[Updating VTEX IO's CLI via NPM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-update%23updating-vtex-ios-cli-via-npm)

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/Reference/vtex-io-documentation-vtex-io-cli-installation-and-command-reference/vtex-io-documentation-vtex-io-cli-update.md)

Copy page

On this page

ON THIS PAGE

[Updating VTEX IO's CLI via NPM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update/docs/guides/vtex-io-documentation-vtex-io-cli-update%23updating-vtex-ios-cli-via-npm)

On this page

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


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

[User] Provide a guide on guides faststore headless cms previewing changes in development mode 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/headless-cms-previewing-changes-in-development-mode/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-overview)

[Managing content with 'scopes' and 'requiredScopes'](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-managing-content-with-scopes-and-requiredscopes)

[Multiple page templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-multiple-page-template)

[Previewing Headless CMS in development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode)

[Widgets for Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-widgets)

[Customizing pages with Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/dynamic-content-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-overview)

[Managing content with 'scopes' and 'requiredScopes'](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-managing-content-with-scopes-and-requiredscopes)

[Multiple page templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-multiple-page-template)

[Previewing Headless CMS in development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode)

[Widgets for Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-widgets)

[Customizing pages with Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/dynamic-content-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/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/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-overview)

Previewing Headless CMS in development mode

During the implementation of a new section or component in the Headless CMS, you can use the `dev mode` to preview the Headless CMS before pushing the changes to your live store.

## Instructions

1. Open your FastStore project and start a development server.
2. After making changes to your FastStore project directory and syncing them with the Headless CMS, access the VTEX Admin and navigate to **Storefront > Headless CMS**.
3. Open the **Developer Tool** or right-click on the page and choose **Inspect**.
4. In the Developer Tool terminal, run the following command:
`1
localStorage.setItem('cmsDevMode', 1)
`
5. Refresh the page, and you should see the section **Development Mode** in the right sidebar.
![{"base64":"  ","img":{"width":2000,"height":1363,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1032412,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/development-mode___5cd79e364aea0785e98ce6bb379f2acc.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/development-mode___5cd79e364aea0785e98ce6bb379f2acc.png)
6. Click the `Preview` button. A new tab will open.
7. Copy the link from this tab, which will contain the `contentType`, `documentId`, and `versionId` parameters. The link should be similar to the following:
`1
https://faststore.vtex.app/?contentType=page&documentId=bd9e01d6-534e-4e54-aa76-f864dcbad024&versionId=405118e9-7509-11ed-83ab-0eeee363631w
`
8. Now, access the local preview by replacing the following parameters accordingly:
`1
localhost:3000/api/preview/?contentType={contentType}&documentId={documentId}&versionId={versionId}
`
> Replace `{contentType}`, `{documentId}`, and `{versionId}` with the values from your preview link.
9. Once you have reviewed your changes, open the terminal in the `Developer Tools` and run the following command in the Headless CMS page to terminate the development mode:
`1
localStorage.removeItem('cmsDevMode')
`
10. Refresh the page, and the development mode session will now be ended.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/_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/headless-cms/previewing-changes-in-development-mode.mdx)

[Multiple page templates« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-multiple-page-template)[Widgets for Headless CMSNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-widgets)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/_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

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode%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/headless-cms/previewing-changes-in-development-mode.mdx)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode%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] How do I use the VTEX flex layout 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.flex-layout/docs/guides)

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

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

Flex Layout

Official extension

Version: 0.21.5

Latest version: 0.21.5

Flex Layout is a **layout structure** built within VTEX IO Store Framework. It allows building complex custom layouts using the concept of **rows** and **columns**, setting the desired block structure and positioning in a page.

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

_Example of a page layout built using Flex Layout, following the one row with two columns model_

## Configuration

**Flex Layout has two basic building blocks**: `flex-layout.row` and `flex-layout.col`. You should **never** use `flex-layout`.

If you are already familiar with the [flexbox](https://read.calvincode.net/reader?url=https://css-tricks.com/snippets/css/a-guide-to-flexbox/) layout used in CSS, Flex Layout should be easy to grasp since this is what `flex-layout.row` and `flex-layout.col` are using under the hood.

You can use **any** array of blocks as children for `flex-layout.row` and `flex-layout.col`.

The props below support [responsive-values](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/responsive-values), meaning that you can define different values for the same prop based on device screen size, such as mobile and desktop.

### `flex-layout.row`

| Prop name                | Type                              | Description                                                                                | Default value |
| ------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass               | String                            | Block container class. The set value of this prop functions as a block identifier for CSS customizations. (                                                                                | ""            |
| borderColor              | String                            | The color of the border.                                                                                | undefined     |
| borderWidth              | 0...5                             | A number or string magnitude for applying the bw Tachyons token to the row.                                                                                | undefined     |
| border                   | String \| String\[\]              | An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).                                                                                | undefined     |
| colGap                   | 0...10                            | A number or string magnitude for applying the pr Tachyons token to the columns in the flex-layout.row.                                                                                | undefined     |
| colSizing                | equal\|auto                       | Controls the width of the columns in the flex-layout.row.                                                                                | equal         |
| fullWidth                | Boolean                           | Whether the component should occupy all the available width from its parent.                                                                                | false         |
| horizontalAlign          | left\|right|center|between|around | Controls horizontal alignment for the items in the flex-layout.row. It defaults to between if colSizing is auto and to left otherwise.                                                                                | left          |
| colJustify               | enum                              | Controls the space between columns and borders of the flex-layout.row, following the justify-content CSS property. Possible values are between (no space added between borders and columns) and around (space added). | between       |
| marginBottom             | 0...10                            | A number or string magnitude for applying the mb Tachyons token to the row.                                                                                | undefined     |
| marginTop                | 0...10                            | A number or string magnitude for applying the mt Tachyons token to the row.                                                                                | undefined     |
| paddingBottom            | 0...10                            | A number or string magnitude for applying the pb Tachyons token to the row.                                                                                | undefined     |
| paddingTop               | 0...10                            | A number or string magnitude for applying the pt Tachyons token to the row.                                                                                | undefined     |
| preserveLayoutOnMobile   | Boolean                           | Whether the flex-layout.row should break into a column layout on mobile.                                                                                | false         |
| preventHorizontalStretch | Boolean                           | Prevents the row from stretching horizontally to fill its parent's width.                                                                                | false         |
| preventVerticalStretch   | Boolean                           | Prevents the row from stretching vertically to fill its parent's height with the items-stretch token.                                                                                | false         |
| rowGap                   | 0...10                            | A number or string magnitude for applying the pb Tachyons token to columns in the flex-layout.row.                                                                                | undefined     |
| htmlId                   | String                            | This prop adds an HTML id to flexRow. This allows accessing a page section using links.                                                                                | undefined     |
| arialabel                | string                            | Aria-label to be included for accessibility purposes                                                                                | undefined     |

### `flex-layout.col`

| Prop name              | Type                 | Description                                                                                | Default value |
| ---------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------- |
| blockClass             | String               | Block container class. The set value of this prop functions as a block identifier for CSS customizations                 | ""            |
| borderColor            | String               | The color of the border.                                                                                | undefined     |
| borderWidth            | 0...5                | A number or string magnitude for applying the bw Tachyons token to the column.                                           | undefined     |
| border                 | String \| String\[\] | An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).                   | undefined     |
| horizontalAlign        | left\|right|center   | Controls horizontal alignment for the items in the flex-layout.col.                                                      | left          |
| marginLeft             | 0...10               | A number or string magnitude for applying the ml Tachyons token to the column.                                           | undefined     |
| marginRight            | 0...10               | A number or string magnitude for applying the mr Tachyons token to the column.                                           | undefined     |
| paddingLeft            | 0...10               | A number or string magnitude for applying the pl Tachyons token to the column.                                           | undefined     |
| paddingRight           | 0...10               | A number or string magnitude for applying the pr Tachyons token to the column.                                           | undefined     |
| preventVerticalStretch | Boolean              | Prevents the row from stretching vertically to fill its parent's height with height: 100%, using height: "auto" instead. | false         |
| rowGap                 | 0...10               | A number or string magnitude for applying the pb Tachyons token to rows in the flex-layout.col.                          | undefined     |
| verticalAlign          | top\|middle|bottom   | Controls vertical alignment for the items in the flex-layout.col.                                                        | top           |
| width                  | "0...100%"\|"grow"   | Sets the width of the column. Accepts either a percentage or "grow".                                                     | undefined     |
| arialabel              | string               | Aria-label to be included for accessibility purposes                                                                     | undefined     |

## App behavior

* The highest level in a flex layout is **always** a row. Therefore, you can only add a `flex-layout.col` inside a `flex-layout.row` — never as a first-level block.
* Every row and column can have as **many levels as needed**.
* When creating levels, you have to **alternate between rows and columns**. You can only place columns within a row and rows within a column.
* Keep in mind that the structure that you set in your flex layout does not only affect your code organization, but will also reflect in the way that blocks will be shown and managed through the Site Editor admin. Therefore, it is always important to **take the organization of both code and Site Editor into account when planning to apply the flex layout** to a page.

To better understand Flex Layout's practical operation, you can access the recipe for [Using Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-flex-layout)

## Customization

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

| CSS Handles    |
| -------------- |
| flexColChild   |
| flexCol        |
| flexRowContent |
| flexRow        |

[Disclosure Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout/docs/apps/vtex.disclosure-layout)[Modal LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout/docs/apps/vtex.modal-layout)

See also

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

ON THIS PAGE

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

[flex-layout.row](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout/docs/apps/vtex.flex-layout%23flex-layoutrow)[flex-layout.col](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout/docs/apps/vtex.flex-layout%23flex-layoutcol)

[App behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout/docs/apps/vtex.flex-layout%23app-behavior)

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

Was this helpful?

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


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

[User] Provide a guide on guides external marketplace integration recommendations 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/external-marketplace-integration-recommendations/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-guide)

[Marketplace / Seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-architecture)

[Store setup for VTEX Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-vtex-seller-setup)

[Creating an integration app from a Template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-app-template)

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

[Catalog logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-logs)

[Get product list for an initial load](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-product-load)

[How to get a new product to offer in the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-new-products)

[How to get product updates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-product-updates)

[Product and Category Mappings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-catalog-mapping)

[How to keep prices updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-price-update)

[How to keep stock updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-stock-update)

[Order Integration overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-orders)

[Recommendations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-recommendations)

[New Order Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-collect-orders)

[Update Order Status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-update-order-status)

[How to validate if items are available for delivery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-delivery-validation)

[Sending invoice and tracking code to the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-invoice-tracking)

[How to update a canceled order’s status in VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-canceled-orders)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/recaptcha)

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/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/external-marketplace-integration-recommendations/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-guide)

[Marketplace / Seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-architecture)

[Store setup for VTEX Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-vtex-seller-setup)

[Creating an integration app from a Template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-app-template)

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

[Catalog logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-logs)

[Get product list for an initial load](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-product-load)

[How to get a new product to offer in the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-new-products)

[How to get product updates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-product-updates)

[Product and Category Mappings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-catalog-mapping)

[How to keep prices updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-price-update)

[How to keep stock updated](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-stock-update)

[Order Integration overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-orders)

[Recommendations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-recommendations)

[New Order Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-collect-orders)

[Update Order Status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-update-order-status)

[How to validate if items are available for delivery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-delivery-validation)

[Sending invoice and tracking code to the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-invoice-tracking)

[How to update a canceled order’s status in VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-canceled-orders)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/recaptcha)

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/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/external-marketplace-integration-recommendations/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Integration Guides

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-guide)

[Recommendations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations/docs/guides/external-marketplace-integration-recommendations)

Recommendations

To avoid processing gaps due to the big volume of information of the initial load of products, we recommend:

* Using an async messaging architecture, using individual queues by context and store.
* Creating mechanisms that respect the marketplace API limit rates. We suggest the standard use of the _Circuit Breaker_ integration.
* In case any of the steps listed above presents failures in communication, we suggest using the contingency mechanism of _deadLetters_.
* Being TotalReader: whenever possible, in the data transformation process, using standard values accepted by the marketplace, in case the information is not filled or sent by VTEX.
* In case the marketplace’s processing is in lots - meaning that the connector assembles a group of SKUs, guaranteeing the the limit of records per lot is respected, according to marketplace riles, and sending them to the marketplace at once - it is fundamental to control the lot’s processing, to avoid sending SKU updates without making sure that the product exists in the marketplace.
* Keeping a states table to know which SKUs have not been integrated with success, attempt date and the response received. This allows the system to use the contingency flow effectively, avoiding infinite loops, and avoiding reaching the request limit.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/external-marketplace-integration-guide/external-marketplace-integration-recommendations.md)

[Order Integration overview« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations//docs/guides/external-marketplace-integration-orders)[New Order IntegrationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-recommendations//docs/guides/external-marketplace-integration-collect-orders)

Contributors

1

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

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/Integration-Guides/external-marketplace-integration-guide/external-marketplace-integration-recommendations.md)

Copy page

On this page

On this page

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


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

[User] Provide a guide on guides integration flow 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/integration-flow/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integration-flow/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/integration-flow/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/integration-flow/docs/guides/integration-flow)

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

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

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

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

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

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

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

[Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integration-flow/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/integration-flow/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

[VTEX Shipping Network](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integration-flow/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/integration-flow/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/integration-flow/docs/guides/integration-flow)

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

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

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

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

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

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

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

[Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integration-flow/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/integration-flow/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Logistics

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

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

Integration flow

The typical cycle of an order shipped through a carrier that is integrated with VTEX goes through these stages:

1. **Invoice**: a package starts its path in VTEX Shipping Network only after the order is invoiced.
2. **Notification**: after the order has been invoiced, the VTEX hub notifies the carrier app. It informs the carrier that there is a package to be collected, specifying the details.
3. **Shipping**: then, the store can print a shipping label with the appropriate shipping information and dispatch it to the carrier.
4. **Tracking**: while the package is in transit, the carrier app sends tracking updates to the VTEX tracking hub, so that information can be made available to the store and customer.
5. **Delivery**: finally, the package gets to the customer.

Since the notification and tracking stages consist of exchanging information between the carrier and VTEX, these are the processes that should be handled by your apps.

One of the advantages of building IO apps is modularity, which allows for flexible customization of a store’s features. Because of that, we provide separate boilerplate repositories for [notification](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-notifier-example) and [tracking](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-tracking-example). You can develop one app to perform the two tasks or two separate apps for each of them.

Both apps should be able to read data that will be sent from VTEX in a specific format and respond with the appropriate information in a specific format. Below you can find out more about the particularities of each of those tasks.

## Learn more

See this guide on [how to develop carrier apps on IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/getting-started-with-vtex-io-for-carriers). Also, learn more about [notification](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/notification-1) 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/integration-flow/_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/integration-flow.md)

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

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integration-flow/_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/integration-flow/docs/guides/integration-flow%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/integration-flow.md)

Copy page

On this page

ON THIS PAGE

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integration-flow/docs/guides/integration-flow%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=)