[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 installing google tag manager 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-installing-google-tag-manager/docs/guides)

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-dealing-with-events)

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

[Installing Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager)

[Setting up Google Tag Manager events and triggers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-setting-up-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-dealing-with-events)

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

[Installing Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager)

[Setting up Google Tag Manager events and triggers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-setting-up-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/store-framework)

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

[Installing Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager)

Installing Google Tag Manager

Discover the steps to install the Google Tag Manager app in your Store Framework store.

This guide provides instructions for managing Analytics on Store Framework stores by installing and configuring [Google Tag Manager (GTM)](https://read.calvincode.net/reader?url=https://tagmanager.google.com/). It also outlines restrictions to avoid performance issues and unpredictable behavior, such as blocklists for custom HTML tags and variables.

## Before you begin

> This app is only available for stores built with [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework). For stores built with Legacy CMS Portal, see [Configuring Google Tag Manager](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-setup-google-analytics-in-vtex-store--G2P0rmSrEiqCcmUMyUUwG%23configuring-google-tag-manager).

If you have already installed the Google Tag Manager app, go to the [Create a Google Analytics 4 property](#create-a-google-analytics-4-property) step to create the property and continue.

### Get a Google account

You need a Google account to use Google Tag Manager (GTM). If you already use Google products like Gmail, you can use the same account.

If you don't have an account, create one by following Google's guide on [Creating your Google account](https://read.calvincode.net/reader?url=https://accounts.google.com/lifecycle/steps/signup/workspaceinterstitial?continue=https://tagmanager.google.com/%26ddm=1%26dsh=S1747300419:1734533693867352%26flowEntry=SignUp%26flowName=GlifWebSignIn%26service=analytics%26TL=AE--Llz4c9wxBXCL%5FHUOxs0VQwkCVyn1dVQZDuQL8ZvZUnVGcbKDfXTlaI-fN0ks).

### Get a GTM container

To use a GTM ID in your store, you need a GTM container. If you don't have one, follow the [Create a new account and container](https://read.calvincode.net/reader?url=https://support.google.com/tagmanager/answer/6103696?hl=en%23install) tutorial.

After creating a container, find its GTM ID in the `Container ID` column. Be sure to save this ID, as it will be required later in the installation process.

### Create a Google Analytics 4 property

Create a Google Analytics 4 (GA4) property using the GA4 Setup Assistant. This property collects data alongside your existing Universal Analytics (UA) property. To create the GA4 property, follow [Google’s official guide](https://read.calvincode.net/reader?url=https://support.google.com/analytics/answer/9744165%23zippy=%2Cin-this-article).

### Take note of GTM settings

Take note of the Measurement ID, also known as [G-ID](https://read.calvincode.net/reader?url=https://support.google.com/analytics/answer/9539598%23find-G-ID), as it will be used later to configure the GA4 tag on GTM.

## Instructions

1. In the VTEX **Admin**, go to **Apps > Extensions Hub > App Store**.
2. Search for the Google Tag Manager app and click `Get App`.
![{"base64":"  ","img":{"width":1878,"height":732,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1266262,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/installing-gtm.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/installing-gtm.gif)
3. You will be redirected to the [App Store page](https://read.calvincode.net/reader?url=https://apps.vtex.com/vtex-google-tag-manager/p). If you are not currently logged in, log in to your account.
![{"base64":"  ","img":{"width":1878,"height":816,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":302951,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/gtm-on-app-store.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/gtm-on-app-store.gif)
4. After logging in, you will be redirected to the [App Store landing page](https://read.calvincode.net/reader?url=https://apps.vtex.com/). In the search field, type `Google Tag Manager`, click the app, and then click `Get App`.
5. On the checkout page, click `Place Order`.

> GTM is a free app.

1. You will see a success message about the purchase. Click `Go to Install Page` to be redirected to the GTM setup page in the VTEX admin.
2. On the GTM setup page in VTEX admin, click `Install`.
![{"base64":"  ","img":{"width":1878,"height":826,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":9802762,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/google-tag-manager.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/google-tag-manager.gif)
3. The GTM app settings page will open for you to complete the required fields. In the Google Tag Manager field, add your **GTM ID**. Check the box for **Send Google Analytics 4 Events**.

> To find your store's **GTM ID**, you first need to create a container in your Google Tag Manager account. If you don't have one yet, follow the [Create an account and container](https://read.calvincode.net/reader?url=https://support.google.com/tagmanager/answer/6103696?hl=en%23install) tutorial. Once created, you can find the GTM ID in the `Container ID` column of the container.

![{"base64":"  ","img":{"width":1048,"height":802,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":60420,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/gtm-new-field___bf665f34409d6d7cbcfc79239e277ee0.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/gtm-new-field___bf665f34409d6d7cbcfc79239e277ee0.png)

1. Click `Save`.

Once you have installed the app and checked the box **Send Google Analytics 4 Events**, see [Configuring Google Analytics 4 configuration tag in Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-setting-up-google-tag-manager) to learn how to set up the variables, triggers, and tags for the app to work.

## Restrictions

To prevent performance issues and unpredictable behavior, the VTEX IO Google Tag Manager solution uses the native GTM blacklist feature. Learn more in the [Google Developer Guide](https://read.calvincode.net/reader?url=https://developers.google.com/tag-platform/tag-manager/web/restrict). By default, the HTML ID is blocked, which automatically blocks all tags, variables, and triggers of the `customScripts` type.

As a result, custom HTML tags will not be triggered. **The HTML blacklist is the default setting in the VTEX Google Tag Manager app**. To disable this restriction, go to `https://{accountName}.myvtex.com/admin/apps/vtex.google-tag-manager@3.x/setup` and check the setting below.

> Replace `{accountName}` with your store account name.

![{"base64":"  ","img":{"width":976,"height":206,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":29144,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-installing-google-tag-manager-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-installing-google-tag-manager-1.png)

The most commonly used custom HTML tags are for integrations with third-party services, such as Customer Chat, Analytics, Remarketing, and Pixel tags. If your store requires custom HTML for any of these cases, you can integrate it by transforming the tags into a VTEX IO [Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app) or by removing this restriction.

Below is the complete list of tags and variables blocked by default in the VTEX IO Google Tag Manager solution:

**Blocked tags**

* Custom HTML Tag - html
* Eulerian Analytics Tag - ela
* SaleCycle JavaScript Tag - scjs
* Upsellit Global Footer Tag - uslt
* Upsellit Confirmation Tag - uspt

**Blocked variables**

* Custom JavaScript Variable - jsm

View the complete list of available GTM tags in [the Google Developer Guide](https://read.calvincode.net/reader?url=https://developers.google.com/tag-platform/tag-manager/web/datalayer).

Contributors

2

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/google-tag-manager/vtex-io-documentation-installing-google-tag-manager.md)

[Configuring Analytics (Google Tag Manager)« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager//docs/guides/store-framework-configuring-analytics-google-tag-manager)[Setting up Google Tag Manager events and triggersNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager//docs/guides/vtex-io-documentation-setting-up-google-tag-manager)

Contributors

2

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

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23before-you-begin)

[Get a Google account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23get-a-google-account)[Get a GTM container](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23get-a-gtm-container)[Create a Google Analytics 4 property](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23create-a-google-analytics-4-property)[Take note of GTM settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23take-note-of-gtm-settings)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23instructions)

[Restrictions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23restrictions)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/google-tag-manager/vtex-io-documentation-installing-google-tag-manager.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23before-you-begin)

[Get a Google account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23get-a-google-account)[Get a GTM container](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23get-a-gtm-container)[Create a Google Analytics 4 property](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23create-a-google-analytics-4-property)[Take note of GTM settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23take-note-of-gtm-settings)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23instructions)

[Restrictions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-google-tag-manager/docs/guides/vtex-io-documentation-installing-google-tag-manager%23restrictions)

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 b2b suite 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.b2b-suite/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

[Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.storefront-permissions)

[Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.storefront-permissions-ui)

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

[B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-checkout-settings)

[B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-orders-history)

[B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-quotes)

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

[Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.storefront-permissions)

[Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.storefront-permissions-ui)

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

[B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-checkout-settings)

[B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-orders-history)

[B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-quotes)

---

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

---

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

---

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

---

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

---

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

---

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

B2B Suite

Official extension

Version: 2.0.0

Latest version: 2.0.0

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

**B2B Suite** is a collection of VTEX IO apps that allow stores to manage organizations, storefront roles and permissions, and checkout settings for B2B commerce relationships.

These features are particularly useful for B2B stores: in commerce relations between businesses, it is essential to simplify the purchase flow, reduce costs, and provide a personalized buying experience.

B2B customers frequently have distinct roles within their organization, such as professional buyers, managers, or supervisors. Each role is associated with a different set of storefront permissions, depending on the actions the user needs to perform.

Grouping different users from the same company under an organization and defining custom payment methods, product selections, and prices for each customer are also everyday needs in B2B.

In addition, it is often necessary to provide customized options for B2B customers during checkout, such as a specific selection of payment methods per organization or cost center, pre-filled addresses, purchase order numbers, and order quotes.

By installing the **B2B Suite**, you have access to seven apps with the following features for B2B:

| **App name**                                                                                | **Description**                                                                                |
| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions)       | Stores a predefined set of roles and permissions related to what B2B users can access and do in the storefront, which other integrated apps can check. This is useful for stores that want to set specific permissions for users with different organizational roles.                                                                                |
| [Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui) | Provides an interface for the [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions) app, communicates with its stored roles and permissions, and provides the following features for this scenario. **Role management:** Allows VTEX Admin users to manage B2B roles and associated app permissions through an interface. **Theme block configuration:** Enables conditional theme blocks so only users with the required permissions can access specific content in your storefront. |
| [B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations)                 | Enables you to group B2B users into organizations to which you can assign specific payment methods, price tables, and product collections. This allows all organization users to share the same commercial conditions. Each organization is further segmented into one or more cost centers, with its own shipping addresses, which will be available for cost center users at checkout.                                                                                |
| [B2B Quotes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-quotes)                               | Enables B2B users to create quotes and saved carts, which are then shared with the other members of their organization. Users with the appropriate storefront permissions can modify quotes to apply discounts or change the amount of items, so the resulting quote can then be used to place an order.                                                                                |
| [B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings)         | Extends the checkout experience for users who are members of B2B organizations. With this app, you can allow specific payment methods for the user's organization, provide prefilled addresses based on the cost center of each user, add a purchase order number to the order, and allow customers to create an order quote before placing the order.                                                                                |
| [B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-orders-history)               | Provides a new **Orders** page under **My Account** so that B2B users can view all previous orders placed by users in their organization or cost center, depending on their role.                                                                                |
| [B2B Admin Customers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-admin-customers)             | Provides additional customer information management capabilities on the VTEX Admin, allowing store administrators to create, edit, and search for customers.                                                                                |

Make sure to read the documentation for each app to learn more about their features and settings.

> After installing **B2B Suite**, make sure to hide the default **Order History** link within **My Account** by configuring `vtex.my-account`. Otherwise, **B2B Orders History** will not work as expected. You can do this at `https://{{accountName}}.myvtex.com/admin/apps/vtex.my-account@1.x/setup/`, by unselecting the **Visible** option in the **Orders** section.

For additional features, you can also install the [Quick Order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder) app, which creates a custom page in your store aimed at bulk purchases, offering tools such as uploading a spreadsheet to make bulk orders more agile.

## Frequently Asked Questions

### How do I fix the schema issue?

For more details on how to resolve schema-related issues, please refer to the article [I can't fix the schema error in B2B apps](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/i-cant-fix-the-schema-error-in-b2b-apps--WkjJZSnGXCiqmLhg4b0OR).

[SKU List« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.sku-list)[Storefront PermissionsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.storefront-permissions)

See also

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

ON THIS PAGE

[Frequently Asked Questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-suite%23frequently-asked-questions)

[How do I fix the schema issue?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-suite/docs/apps/vtex.b2b-suite%23how-do-i-fix-the-schema-issue)

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 faststore dynamic content overview 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/dynamic-content-overview/docs/guides)

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/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/dynamic-content-overview/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/dynamic-content-overview/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/dynamic-content-overview/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/dynamic-content-overview/docs/guides/faststore/headless-cms-widgets)

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

[Step 1 - Setting up the store code for Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-step-1-setting-up-the-store-code-for-dynamic-content)

[Step 2 - Handling Dynamic Content in custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-step-2-handling-the-dynamic-content-in-custom-sections)

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

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

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/components-index)

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

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

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

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

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides)

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

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

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

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

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

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/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/dynamic-content-overview/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/dynamic-content-overview/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/dynamic-content-overview/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/dynamic-content-overview/docs/guides/faststore/headless-cms-widgets)

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

[Step 1 - Setting up the store code for Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-step-1-setting-up-the-store-code-for-dynamic-content)

[Step 2 - Handling Dynamic Content in custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-step-2-handling-the-dynamic-content-in-custom-sections)

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

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

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/components-index)

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

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

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

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

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/storefront-best-practices)

---

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

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore)

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

Dynamic Content

Dynamic Content is a FastStore feature that allows you to customize your store home and landing pages using server-side data fetching. This feature improves performance and SEO by dynamically displaying fetched data in store sections on these pages.

In the following example, a page slug, `/my-landing-page`, is configured in the store code and included in the Headless CMS. The landing page features two Hero sections: a [native one](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero) displaying an image added from the Headless CMS, and a custom one with a fixed image sourced directly from an API defined in the store code.

![{"base64":"  ","img":{"width":1892,"height":962,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":4552456,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/dynamic-content-feature___31dbd2fb1003d00bf492eb6479e3fe0c.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/dynamic-content-feature___31dbd2fb1003d00bf492eb6479e3fe0c.gif)

> For other types of pages, such as collections (PLPs) and product pages (PDPs), server-side data fetching is already available via API Extensions. Refer to the [API Extension documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-overview) for more details on fetching data for these pages.

## Before you begin

### Update the `@faststore/core` package

Ensure your store uses `@faststore/core` v3.0.55 or greater. Follow the steps below to update the package:

1. Update your store’s `@faststore/core` package to the latest version by running the following command:

`1

yarn add @faststore/core@latest

`

1. Run `yarn dev` to sync the changes to your project.

### Understand Section Override

To work with dynamic content, you need knowledge of [Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview).

## Implementing Dynamic Content

To use the Dynamic Content feature in your home and landing pages, follow these steps:

* [Step 1 - Setting up your store code for Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-step-1-setting-up-the-store-code-for-dynamic-content): Request Fetch API or any HTTP library to fetch the data directly ([Axios](https://read.calvincode.net/reader?url=https://axios-http.com/docs/intro), fetch, etc).
* [Step 2 - Handling Dynamic Content within custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-step-2-handling-the-dynamic-content-in-custom-sections): Fetch the data using the existing API Extension feature.

Contributors

1

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

[Widgets for Headless CMS« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/headless-cms-widgets)[Step 1 - Setting up the store code for Dynamic ContentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-step-1-setting-up-the-store-code-for-dynamic-content)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/_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/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23before-you-begin)

[Update the @faststore/core package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23update-the-faststorecore-package)[Understand Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23understand-section-override)

[Implementing Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23implementing-dynamic-content)

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/dynamic-content/overview.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/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23before-you-begin)

[Update the @faststore/core package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23update-the-faststorecore-package)[Understand Section Override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23understand-section-override)

[Implementing Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview/docs/guides/faststore/dynamic-content-overview%23implementing-dynamic-content)

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 storefront permissions ui 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.storefront-permissions-ui/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

[Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions)

[Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui)

[B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-organizations)

[B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-checkout-settings)

[B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-orders-history)

[B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-quotes)

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

[Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions)

[Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui)

[B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-organizations)

[B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-checkout-settings)

[B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-orders-history)

[B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-quotes)

---

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

---

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

---

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

---

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

---

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

---

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

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

Storefront Permissions UI

Official extension

Version: 3.0.1

Latest version: 3.0.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-)

**Storefront Permissions UI** provides an interface for the [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions) app, which is part of VTEX’s [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-suite) solution, a collection of apps that allow stores to manage organizations, storefront roles and permissions, and checkout settings for B2B commerce relationships.

B2B customers often play distinct roles within their organization, such as professional buyer, manager, or supervisor. Each role is associated with a different set of permissions, depending on the actions the user needs to perform.

This app communicates with the backstage **Storefront Permissions** app and provides the following features for this scenario:

* [Roles management](#roles-management): allow VTEX Admin users to manage B2B roles and associated app permissions through an interface.
* [Theme blocks configuration](#theme-blocks-configuration): enable conditional theme blocks so that only users with the required permissions can access determined parts of the content in your storefront.

We recommend that you use it alongside the other apps in the [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-suite) for all functionalities to work as expected.

## Before you start

Make sure you have the [VTEX IO CLI (Command Line Interface)](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-install) installed in your machine.

## Installation

You can install the app by running `vtex install vtex.storefront-permissions-ui` in your terminal, using the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference).

After this command, the app will be installed in your VTEX Admin, and you can access it on **Apps** \> **Storefront Permissions**.

> Installing **Storefront Permissions UI** has the effect of automatically installing the [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions) app as a dependency, in case it is not already installed.

## Roles management

To manage roles and their respective app permissions using the Storefront Permissions UI, follow the steps below after installing the app.

1. At the VTEX Admin, navigate to **Apps** \> **Storefront Permissions**.
2. Click on one of the [available storefront roles](#available-storefront-roles).
3. Click on one of the listed apps.
> Only apps that are integrated with **Storefront Permissions** will be on the list – check our [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions%23advanced-app-integration-optional) documentation for more information.
4. Select which permissions you want to enable for the role, as illustrated below.
5. Once you are done, click on `Save`.

![{"base64":"  ","img":{"width":1894,"height":940,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":359043,"url":"https://raw.githubusercontent.com/vtex-apps/storefront-permissions-ui/master/docs/images/storefront-en.gif"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/storefront-permissions-ui/master/docs/images/storefront-en.gif)

After associating roles with the desired permissions, you may then assign roles to users. To learn more about this, read our [B2B Organizations documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-organizations%23users).

### Available storefront roles

In the following table, you can see the available storefront roles, their key used for identification in the app’s code, and their description.

| **Role**              | **Key**              | **Description**                                                                                |
| --------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Store Admin           | store-admin          | Store administrator, that is, a user who has access to the VTEX Admin.                                                                                |
| Sales Admin           | sales-admin          | Sales administrator user who can manage all sales users.                                                                                |
| Sales Manager         | sales-manager        | Sales manager user who can manage sales users in the same organization, as well as assist or impersonate buyers during navigation or purchase.                              |
| Sales Representative  | sales-representative | Sales representative user who can assist or impersonate buyers in the same cost center during navigation or purchase.                                                       |
| Organization Admin    | customer-admin       | Main organization user who manages the organization information, as well as its members and cost centers.                                                                   |
| Organization Approver | customer-approver    | Organization user who can take a saved cart or quote that was created by an **Organization Buyer** and use it to place an order.                                            |
| Organization Buyer    | customer-buyer       | Organization user who has the ability to add items to cart. If the **B2B Quotes** app is installed, they are also able to save their cart for future use or create a quote. |

## Theme blocks configuration

If you only want users with roles that have the required permissions to be able to access determined parts of the content in your storefront, you can also configure conditional blocks in your store’s theme. These types of blocks allow you to validate information in order to display or hide content in your storefront.

In case you need more information on how to start building your own theme, read our [documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-1-basicsetup) before you proceed.

If you are experienced in developing and customizing your store’s theme, follow the steps below to declare the conditional blocks enabled by **Storefront Permissions UI**.

1. Open your store theme app’s repository in your local files.
2. In the `manifest.json` file, under `dependencies`, add `"vtex.storefront-permissions-ui": "1.x"`, like in the example below.
`1
 "dependencies": {
2
 "vtex.storefront-permissions-ui": "1.x"
3
 },
`
3. Now, you can use the `check-permission`, `allowed-content` and `disallowed-content` blocks on any files you want in your store’s theme. See more information on these blocks below.
| **Block name**     | **Description**                                                                                |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| check-permission   | Checks if the current user has the required permissions to access the content wrapped with this block.You can wrap content blocks with check-permission when declaring them to validate if the user has the required permissions to see that content. Example: check-permission#carousel |
| allowed-content    | Allows you to define on children blocks the content that will be shown for allowed users – users with roles that have the required permissions to view the block.                                                                                |
| disallowed-content | Optional block that allows you to define on children blocks the content that will be shown for disallowed users – users with roles that do not have the required permissions to view the block.                                                                                |
| loading-content    | Optional block that allows you to define a loading content while permissions are loading.                                                                                |
This component will check if the user has permission to see the `allowed-content`, otherwise they will see the `disallowed-content`.
The `check-permission` block has a prop named `roles`, which lets you define an array of roles that are allowed to see the blocks defined under the children blocks of `allowed-content`.
| **Prop name** | **Type**         | **Description**                                                                                | **Required** | **Example**                      |
| ------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------- |
| roles         | array of strings | List of the allowed roles, identified by their key. Learn more about each role and its key in the [Available storefront roles](#available-storefront-roles) section. | true         | \["store-admin", "sales-admin"\] |

#### Example

In the example below, in a store’s home, a carousel with banners will only be visible to logged in users with the `store-admin` or `sales-admin` roles. Users with other roles will see a warning message (`**You don't have access to this content**`) instead.

`1

{

2

 "store.home": {

3

 "blocks": [

4

+ "check-permission#carousel",

5

 "shelf#home",

6

 "info-card#home",

7

 "rich-text#question",

8

 "rich-text#link"

9

 ]

10

 },

11

+ "check-permission#carousel": {

12

+ "props": {

13

+ "roles": ["store-admin", "sales-admin"]

14

+ },

15

+ "blocks": ["allowed-content#carousel","disallowed-content#carousel", "loading-content#carousel"]

16

+ },

17

+ "allowed-content#carousel": {

18

+ "children": ["carousel#home"]

19

+ },

20

+ "disallowed-content#carousel": {

21

+ "children": ["rich-text#disallowed"]

22

+ },

23

+ "loading-content#carousel": {

24

+ "children": ["rich-text#loading"]

25

+ },

26

+ "rich-text#disallowed": {

27

+ "props": {

28

+ "text": "**You don't have access to this content**"

29

+ }

30

+ },

31

+ "rich-text#loading": {

32

+ "props": {

33

+ "text": "Waiting for permissions..."

34

+ }

35

+ },

36

 "carousel#home": {

37

 "props": {

38

 "autoPlay": false,

39

 "banners": [

40

 {

41

 "image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",

42

 "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"

43

 },

44

 {

45

 "image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",

46

 "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"

47

 }

48

 ],

49

 "height": 720,

50

 "showArrows": true,

51

 "showDots": true

52

 }

53

 },

`

[Storefront Permissions« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions)[B2B OrganizationsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.b2b-organizations)

See also

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

ON THIS PAGE

[Before you start](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui%23before-you-start)

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui%23installation)

[Roles management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui%23roles-management)

[Available storefront roles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui%23available-storefront-roles)

[Theme blocks configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui/docs/apps/vtex.storefront-permissions-ui%23theme-blocks-configuration)

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