[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 webops configuring production and preview branches 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/webops-configuring-production-and-preview-branches/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-dashboard)

[Configuring production and preview branches in WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches)

[Managing Secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-managing-secrets)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/headless-cms-overview)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-dashboard)

[Configuring production and preview branches in WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches)

[Managing Secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-managing-secrets)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/headless-cms-overview)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-dashboard)

Configuring production and preview branches in WebOps

In this guide, you'll learn how to configure custom branches for production builds and preview deployments in [FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard), enabling you to use different branches for production and QA accounts from the same repository.

FastStore WebOps allows you to customize which branch generates production builds and configure which branches generate preview deployments through the **Integrations** tab. This feature is particularly useful for merchants who maintain separate production and QA accounts, enabling you to manage both environments from a single repository without code duplication.

With branch customization, you can:

* **[Configure a custom production branch](#configuring-the-production-branch):** Choose any branch from your repository to generate production builds for your account.
* **[Filter preview deployments](#configuring-preview-branch-filters):** Control which branches generate preview builds using include and exclude patterns.

> If you don't configure a custom production branch, WebOps will use your repository's default branch (typically `main`). This maintains backward compatibility with existing projects.

## Use cases

### Managing separate production and QA environments

If you maintain separate VTEX accounts for production and QA environments, branch customization allows you to use a single GitHub repository for both accounts while keeping their deployments independent. This eliminates code duplication and simplifies maintenance.

**Example scenario:**

* **Production account (`mystore`):** Configured to use the `main` branch for all production deployments.
* **QA account (`mystoreqa`):** Configured to use the `homolog` branch for testing and validation.

Both accounts share the same repository, but each points to its respective branch for deployments. This setup enables your QA team to test changes in the `homolog` branch without affecting production, while production deployments automatically use the stable `main` branch.

### Optimizing preview deployments

When working with multiple feature branches, you may want to control which branches generate preview deployments to optimize build resources and reduce unnecessary deployments.

**Example scenarios:**

* **Include only active development branches:** Configure include patterns (for example, `feature/*`) to generate previews only for feature branches, excluding experimental or abandoned branches.
* **Exclude release branches:** Use exclude patterns (for example, `release/*`) to prevent release branches from generating preview builds, as these are typically merged directly to production.
* **Focus on specific workflows:** Combine include and exclude patterns to create a focused preview workflow that matches your team's development process.

### Using non-default branches for production

If your team follows a branching strategy where production code lives in a branch other than `main` (for example, `production`, `release`, or `stable`), you can configure WebOps to use that branch for production builds.

**Example scenario:**

* Your repository's default branch is `develop`, where ongoing development occurs.
* Production-ready code is merged into the `production` branch.
* Configure WebOps to use the `production` branch for production builds, ensuring that only tested and approved code reaches your live store.

## Instructions

To configure your branches, go to your [FastStore WebOps dashboard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-dashboard) and navigate to the **Integrations** tab.

![{"base64":"  ","img":{"width":1444,"height":667,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3470176,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/customizing-branches-integrations___ae60f6b2b7c97b7200d8b8295fe7c755.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/customizing-branches-integrations___ae60f6b2b7c97b7200d8b8295fe7c755.gif)

### Configuring the production branch

To customize which branch generates production builds:

1. In the **Integrations** tab of your FastStore WebOps dashboard, go to the **Production branch** section.
2. Select the branch you want to use for production builds from the dropdown list.
3. Click `Save` to apply the changes.

![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAHElEQVR4nGNQVlbetm3buXPnXrx4yTAfBjw9PAG5cg4gOZmW8wAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/production-branch___6ca52c2ebe5e1d77d792b8141a711efc.png","width":754,"height":297,"type":"png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/production-branch___6ca52c2ebe5e1d77d792b8141a711efc.png)

### Configuring preview branch filters

Preview branch filters allow you to control which branches generate preview deployments. If no filters are configured, all branches (except the production branch) will generate preview deployments by default.

You can use include and exclude patterns to fine-tune which branches should create preview builds by following these steps:

1. In the **Integrations** tab of your FastStore WebOps dashboard, go to the **Preview branch filters** section.
2. Toggle the filter activation switch to enable branch filtering.
3. Add filter rules to include or exclude patterns:
   * **Include patterns**: Choose **Branch is** in the dropdown, then enter a branch name or pattern in the adjacent field. Only branches matching these patterns will generate previews.
   * **Exclude patterns**: Choose **Branch is not** in the dropdown, then enter a branch name or pattern in the adjacent field. Branches matching these patterns will not generate previews.
> You can use wildcards to define patterns for branch names.
4. Click `Add` to add the filter rule.

![{"base64":"  ","img":{"width":713,"height":526,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42101,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/preview-branches___455339925e14e71ff4ea68d71665228b.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/preview-branches___455339925e14e71ff4ea68d71665228b.png)

### Managing filter rules

In the **Rules** section, you can edit or delete a rule.

#### Editing a rule

1. Go to the **Rules** section.
2. Next to the rule you need to update, click `⋮` then click `Edit`.
3. A modal will open, where you can make your changes.
4. Click `Update` to apply the changes.

#### Deleting a rule

1. Go to the **Rules** section.
2. Next to the rule you need to delete, click `⋮` then click `Delete`.
3. A modal will open, with the message `Are you sure you want to delete this rule?`.
4. If you're sure, click `Delete` to remove the rule.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

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/getting-started/webops/configuring-production-and-preview-branches.mdx)

[FastStore WebOps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-dashboard)[Managing SecretsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-managing-secrets)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23use-cases)

[Managing separate production and QA environments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23managing-separate-production-and-qa-environments)[Optimizing preview deployments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23optimizing-preview-deployments)[Using non-default branches for production](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23using-non-default-branches-for-production)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23instructions)

[Configuring the production branch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23configuring-the-production-branch)[Configuring preview branch filters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23configuring-preview-branch-filters)[Managing filter rules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23managing-filter-rules)

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/getting-started/webops/configuring-production-and-preview-branches.mdx)

Copy page

On this page

ON THIS PAGE

[Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23use-cases)

[Managing separate production and QA environments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23managing-separate-production-and-qa-environments)[Optimizing preview deployments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23optimizing-preview-deployments)[Using non-default branches for production](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23using-non-default-branches-for-production)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23instructions)

[Configuring the production branch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23configuring-the-production-branch)[Configuring preview branch filters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23configuring-preview-branch-filters)[Managing filter rules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches/docs/guides/faststore/webops-configuring-production-and-preview-branches%23managing-filter-rules)

On this page

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


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

[User] Provide a guide on guides vtex checkout ui custom v0 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-checkout-ui-custom-v0/docs/guides)

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

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

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

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/troubleshooting)

---

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

Checkout UI Custom

The Checkout UI Custom app is responsible for customizing your store's Checkout UI through the admin's interface.

![{"base64":"  ","img":{"width":2268,"height":2194,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":116433,"url":"https://user-images.githubusercontent.com/52087100/91737149-11cc4980-eb85-11ea-9b74-a54721de67bc.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/91737149-11cc4980-eb85-11ea-9b74-a54721de67bc.png)

## Configuration

1. Using your terminal and the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference), log into the desired VTEX account.
2. Run `vtex install vtex.checkout-ui-custom` on the account you're working on.
3. Access your VTEX account's admin.
4. Access **Store Setup** and then **Checkout UI Custom**.
5. Make the desired changes using the interface and click on `Publish`.

:information_source: \_Once the app is installed in your account, the `checkout6-custom.js` and `checkout6-custom.css` files will be replaced by the ones generated by this app._

## Modus Operandi

If you access your VTEX account's admin using a [Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) and publish your changes, the configurations performed using the app will only be applied into the workspace you are working in and not in your store Checkout.

However, notice the following: **you should not perform any changes in your account's Master workspace to make your Checkout UI configurations publicly available**. Instead, you should use a Development workspace and the **History** tab displayed on the admin app.

The `History` tab enables you to load app change history and, therefore, helps your checkout UI coding by reusing configurations performed in previous workspaces.

Let's assume you were working in a [Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace) called `testredcolor`, and now want your changes to be public. According to how workspaces work in the platform, your changes first need to be applied in a [Production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace) that, in turn, will be [promoted to Master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master) later.

For this purpose, you can access the `History` tab using the desired Production workspace, load your last changes from `testredcolor` and then click on `Publish`, copying your configurations to the Production workspace you are currently working in.

> _The Header and Footer HTMLs are still configured using the admin's Portal (`/admin/portal/#/sites`). In order to properly use the Checkout UI Custom app, it is strongly recommended to use the HTMLs stated below:_

* **Header HTML:**

`1

2

3

4

 Continue shopping

7

 Back to Cart

13

14

 {logo.image}

15

16

`

If you want to insert other contents, make sure of include the class `.v-custom-mhide` to hide it on mobile resolutions. For example:

`1

 ...

2

 ...

`

* **Footer HTML:**

`1

2

3

6

7

`

If you are yet using the classic CMSYou can create a workspace and install the app by there. While using the app, you will need apply your changes and copy/paste the content of the files to your portal.

## For VTEX Developers

When developing a new version of Checkout UI Custom, take care to compile the checkout files prior to opening a PR and/or publishing a new version of the app. This can be done by running `yarn app` in your CLI, inside the app's `/checkout-ui-custom/` subfolder.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/_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/Store-Framework-Apps/functional-apps/vtex-checkout-ui-custom-v0.md)

Contributors

1

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

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides/vtex-checkout-ui-custom-v0%23configuration)

[Modus Operandi](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides/vtex-checkout-ui-custom-v0%23modus-operandi)

[For VTEX Developers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides/vtex-checkout-ui-custom-v0%23for-vtex-developers)

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/Store-Framework-Apps/functional-apps/vtex-checkout-ui-custom-v0.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides/vtex-checkout-ui-custom-v0%23configuration)

[Modus Operandi](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides/vtex-checkout-ui-custom-v0%23modus-operandi)

[For VTEX Developers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0/docs/guides/vtex-checkout-ui-custom-v0%23for-vtex-developers)

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 go live 2 integrating the vtex login 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/go-live-2-integrating-the-vtex-login/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-overview)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-before-you-begin)

[1\. Configuring external DNS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-1-configuring-external-dns)

[2\. Integrating the VTEX Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login)

[3\. Integrating the VTEX Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout)

[4\. Integrating the VTEX Order Placed and My Account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-4-integrating-the-vtex-order-placed-and-my-account)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/sdk-overview)

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

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-overview)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-before-you-begin)

[1\. Configuring external DNS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-1-configuring-external-dns)

[2\. Integrating the VTEX Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login)

[3\. Integrating the VTEX Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout)

[4\. Integrating the VTEX Order Placed and My Account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-4-integrating-the-vtex-order-placed-and-my-account)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-overview)

2\. Integrating the VTEX Login

In this guide, you'll learn how to integrate the **VTEX Login** with your **FastStore** project.

The VTEX Login is provided by the `vtexcommercestable` environment and uses a subdomain. Therefore, to successfully integrate the VTEX Login with your FastStore project, you must add a redirect back to the FastStore domain and set up the necessary auth cookies to authenticate client requests and maintain session information. This way, once shoppers finish logging in to your store, they can be redirected back to your website's main domain.

---

## Before you begin

### All stores

* Ensure you have already [configured the custom domain name of your FastStore website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-1-configuring-external-dns).

### Stores currently using Portal (Legacy) technology

* We recommend using a subdomain for the initial setup to avoid login issues caused by redirecting from Portal to the main domain.
* You need to update your `vtex.edition-business@0.x` to `vtex.edition-store@5.x` and migrate your secure domain to VTEX IO. To make these changes, please contact the [VTEX support team](https://read.calvincode.net/reader?url=https://help.vtex.com/support) and request an update to the [Edition App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app) installed in your account, as well as a migration of your secure domain from Portal (Legacy) to VTEX IO.

---

## Instructions

### Step 1 - Adding a redirect back to your FastStore domain

By completing this step, shoppers will be redirected back to your website's main domain after logging in or completing a checkout. The instructions to complete this step depend on whether your store uses the My Account and Checkout pages in the [CMS Portal (Legacy)](#for-cms-portal-legacy-stores) or [Store Framework](#for-store-framework-stores).

#### For CMS Portal (Legacy) stores

1. Access the VTEX Admin.
2. Go to **Storefront > Layout**.
3. In the left-side navigation menu, click on **CMS**.
4. Click on **HTML Templates** and open the **Home** file.
5. Add the following script to the Home's `<head>`.
   * _Replace the value between curly brackets with your store domain._
`1
<meta http-equiv="refresh" content="0; URL='https://{maindomain}'" />
`
6. Clean the `<body>` section to remove unnecessary code. By the end of this step, your Home file should look like the following:
![{"base64":"  ","img":{"width":1200,"height":586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":113754,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/home-template___a12a67566b69529d2a3f19c98f135060.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/home-template___a12a67566b69529d2a3f19c98f135060.png)
7. Click on the **Save Template** button.

#### For Store Framework stores

Store Framework stores are built on [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io), which has a decoupled architecture where pages like My Account and Checkout are managed as apps. Unlike the CMS Portal (Legacy), these pages are part of the VTEX IO ecosystem and require a different approach for handling redirects.

To redirect users back to your FastStore domain after events like logins or checkouts, follow these steps:

1. Create a Pixel App by following the [Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps) track.
2. In the [4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts) step, add the following script:
`1
<script>
2

3
function redirectToProduction(){
4

5
 const { pathname, search } = window.location
6
 const redirectDomain = decodeURIComponent("https://www.{addDomainName}.com") // Replace with your domain
7

8
 if(
9
 pathname === '/account' ||
10
 pathname === '/login' ||
11
 pathname === '/checkout' ||
12
 pathname === '/checkout/orderPlaced' ||
13
 pathname === '/checkout/orderPlaced/' ||
14
 pathname === '/api/io/account' ||
15
 pathname === '/api/io/login' ||
16
 !redirectDomain) {
17
 return false
18
 }
19

20
 const redirectLink = redirectDomain + pathname + search
21

22
 window.location.href = redirectLink
23
}
24

25
(function() {
26
 redirectToProduction()
27

28
 window.addEventListener('hashchange',() => {
29
 redirectToProduction()
30
 })
31
})()
32

33
</script>
`
> Replace `https://www.{addDomainName}.com` with your store's main domain. For example, if the store's main domain is `https://www.mystore.com`, set the `const` as the following: `const redirectDomain = decodeURIComponent("https://www.mystore.com")`.
3. Complete the remaining steps in the [Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps) track to inject the script into your store's login page.

Once implemented, shoppers will be automatically redirected to your website’s main domain after logging in or completing a checkout.

### Step 2 - Setting the auth cookie root domain

To authenticate client requests and maintain session information, you must ensure that the auth cookies are set up for the **Login** subdomain. To do that, [open a support ticket with VTEX](https://read.calvincode.net/reader?url=https://help-tickets.vtex.com/smartlink/sso/login/zendesk) to the Identity team requesting to set up the auth cookie root domain for your FastStore URL.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/_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/go-live/2-integrating-the-vtex-login.mdx)

[1\. Configuring external DNS« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-1-configuring-external-dns)[3\. Integrating the VTEX CheckoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23before-you-begin)

[All stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23all-stores)[Stores currently using Portal (Legacy) technology](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23stores-currently-using-portal-legacy-technology)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23instructions)

[Step 1 - Adding a redirect back to your FastStore domain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23step-1-adding-a-redirect-back-to-your-faststore-domain)[Step 2 - Setting the auth cookie root domain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23step-2-setting-the-auth-cookie-root-domain)

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/go-live/2-integrating-the-vtex-login.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23before-you-begin)

[All stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23all-stores)[Stores currently using Portal (Legacy) technology](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23stores-currently-using-portal-legacy-technology)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23instructions)

[Step 1 - Adding a redirect back to your FastStore domain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23step-1-adding-a-redirect-back-to-your-faststore-domain)[Step 2 - Setting the auth cookie root domain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login/docs/guides/faststore/go-live-2-integrating-the-vtex-login%23step-2-setting-the-auth-cookie-root-domain)

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 challenge tp condition 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.challenge-tp-condition/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Challenge Trade Policy Condition

Official extension

Version: 0.6.1

Latest version: 0.6.1

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

Used in B2B environments, the Challenge block is a non-rendered block responsible for checking if a user is allowed to access the store's content.

:information\_source: This check is made according to the Condition Rule specified in the Trade Policy configuration, one of the steps needed to [**configure a B2B environment in VTEX IO**](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/store/configuring-a-b2b-environment).

## Configuration

1. Import the app to your theme's dependencies in `manifest.json`, for example:

`1

 "dependencies": {

2

 // ...

3

 "vtex.challenge-tp-condition": "0.x"

4

 }

`

1. Add the `challenge.trade-policy-condition` block as a `parent` block to the templates of the pages you want to protect, such as:

`1

 "store.home": {

2

 "blocks": [

3

 "shelf#home",

4

 "flex-layout.row#deals",

5

 "info-card#home",

6

 "rich-text#question",

7

 "rich-text#link",

8

 "newsletter"

9

 ],

10

+ "parent": {

11

+ "challenge": "challenge.trade-policy-condition"

12

+ }

13

 },

`

1. Declare the `challenge.trade-policy-condition`, using its props to define to where the store's users should be redirected according to each scenario. For example:

`1

"challenge.trade-policy-condition": {

2

 "props": {

3

 "redirectPath": "/login"

4

 }

5

},

`

| Prop name                | Type   | Description                                                                                | Default value |
| ------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| redirectPath             | string | Path to which the not logged in user will be redirected                                                                                | /login        |
| forbiddenRedirectPath    | string | Path to which the logged in user will be redirected if not allowed access according to the Condition Rule                                      | /login        |
| defaultContentVisibility | enum   | Whether the store's content should be visible (visible) or hidden (hidden) while the Challenge block is verifying the user's access permission | visible       |

:warning: Using `hidden` as the `defaultContentVisibility` value result in the entire page's content being rendered on the client side (in a scenario in which the check concludes that the user has permission to access the store). The page will not be Server Side Rendered (SSR) due to the fact that this verification process is user-based, making it impossible to cache.

## Customization

No CSS Handles are available for the app customization.

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.challenge-tp-condition/docs/apps/vtex.challenge-tp-condition%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.challenge-tp-condition/docs/apps/vtex.challenge-tp-condition%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=)