[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 pixel app 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-pixel-app/docs/guides)

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

App Development

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

---

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

---

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

---

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

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-pixel-app)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

[2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)

[3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-4-configuringyourappsettings)

[4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

[6\. Structuring the documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

[7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/create-master-data-crud-app)

---

Project structure

---

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

---

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

---

Managing apps

---

Development guides

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

App Development

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

---

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

---

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

---

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

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-pixel-app)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

[2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)

[3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-4-configuringyourappsettings)

[4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

[6\. Structuring the documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

[7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/create-master-data-crud-app)

---

Project structure

---

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

---

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

---

Managing apps

---

Development guides

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app/docs/guides/vtex-io-documentation-pixel-app)

Pixel app

A Pixel app is a specialized application that connects your VTEX store to third-party services by automatically injecting necessary scripts and configurations into your store's pages. This integration allows for data collection and interaction with external services like analytics and user support platforms, without the need for manual script management.

After installation, the Pixel app automatically injects the necessary tracking scripts and, when applicable, custom JavaScript configurations into your store’s pages, ensuring that the integrated third-party solutions work as expected.

Examples of native Pixel apps include: [Facebook](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/), [Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-tag-manager/) and [Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.zendesk-chat/).

> For a full list of native Pixel apps, refer to the [Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/) documentation.

If the desired integration is not available, you can either contact the product team on [VTEX Community](https://read.calvincode.net/reader?url=https://community.vtex.com/) or [developer your own pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps) tailored to your store's requirements.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-pixel-app.md)

[Pixel apps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app//docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)[1\. Setting up your development environmentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app//docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

Contributors

1

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-pixel-app.md)

Copy page

On this page

On this page

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


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

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

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

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

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

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

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

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

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

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

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

---

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

B2B Checkout Settings

> The **B2B Checkout Settings** app is part of VTEX’s [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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. We recommend that you use it alongside the other apps in this suite for all functionalities to work as expected.

In B2B commerce, it is often necessary to provide customized options during checkout, such as:

* Making specific payment methods available for each organization or cost center.
* Providing pre-filled addresses.
* Including a purchase order number in the order.
* Offering the option to create an order quote before making an actual purchase.

The **B2B Checkout Settings** app works alongside other **B2B Suite** apps to extend the checkout experience for users who are members of organizations, adding all the above possibilities to the checkout page.

## Before you begin

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

To use **B2B Checkout Settings**, you must have the [B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-organizations) app installed in your store, which will enable you to group B2B users into organizations, with their own assigned payment methods, price tables, product collections, and cost centers.

You must also have the [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-storefront-permissions) app installed – it allows you to grant specific storefront roles for B2B users in an organization. See the **Storefront Permissions** app documentation for information on the available roles and how to customize their permissions.

## Installation

You can install this app by running `vtex install vtex.b2b-checkout-settings` in your terminal, using 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).

After this command, the app will be installed in your VTEX Admin, and B2B store administrators can access it on **Store Setup** \> **B2B Checkout Settings**.

## How it works

Considering B2B stores often need similar customizations, **B2B Checkout Settings** provides a ready-to-use customized checkout page for B2B scenarios.

Once **B2B Checkout Settings** is installed in your account, every script contained in its [checkout-ui-custom folder](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/b2b-checkout-settings/tree/master/checkout-ui-custom) will be automatically linked to your store. The app will customize your checkout page with the functionalities described below. You will also be able to [configure](#configuration) the app on **Store Setup** \> **B2B Checkout Settings**.

> The behavior of the checkout page in VTEX stores is customizable through JavaScript code. In case you need additional customization, we recommend that you use [Checkout UI Custom](https://read.calvincode.net/reader?url=https://apps.vtex.com/vtex-checkout-ui-custom/p) if you prefer using the VTEX Admin interface or [Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings) if you prefer a code-only option.

### Restricted access to checkout

This app automatically checks users’ roles within the organization by communicating with the **B2B Organizations** app, and validates if the user has the required permissions to access checkout, by communicating with the Storefront Permissions app.

By default, users with any storefront role can access checkout, except for users with the **Organization Buyer** role. Any attempt to proceed to checkout without the required permission will result in a notification with the following message: _You don’t have access to the checkout_.

Note that if you have [Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-storefront-permissions-ui) installed, you can customize these permissions on the VTEX Admin by accessing **Account Settings > Storefront Permissions**.

### Cost Center addresses

The **B2B Checkout Settings** app communicates with the **B2B Organizations** app and automatically lists the [Cost Center addresses](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-organizations%23cost-center-details) associated with the user during checkout:

| ![{"base64":"  ","img":{"width":1541,"height":666,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57705,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/cost-center-details-addresses.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/cost-center-details-addresses.png) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Cost Center Details** page, displaying two options of addresses associated with the cost center in question                                                                                |

| ![{"base64":"  ","img":{"width":708,"height":663,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43858,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/shipping.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/shipping.png) |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Cost Center Details** page, displaying two options of addresses associated with the cost center in question                                                                                |

### Purchase order number field

A purchase order (PO) is a commercial agreement between a buyer company and a B2B store, authorizing the payment for products or services to be delivered in the future within a specific time frame.

Having a purchase order number allows B2B customers to pay for authorized purchases by referencing this number. The purchase order is authorized and issued in advance by the company that is making the purchase.

Using **B2B Checkout Settings**, it is possible to enable an optional **Reference or PO Number** field for customers to insert this information during the checkout.

![{"base64":"  ","img":{"width":478,"height":550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34989,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/purchase-order.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/purchase-order.png)

See the [Configuration](#configuration) section to understand how to enable or disable this button.

## Configuration

To change app settings, in the VTEX Admin go to **Store Setup** \> **B2B Checkout Settings**.

![{"base64":"  ","img":{"width":1006,"height":402,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34303,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/b2b-checkout-settings.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/b2b-checkout-settings.png)

You can use the toggle button to activate or deactivate the available settings:

* **Show Purchase Order Number Field:** enabling this will add the **Reference or PO Number** input field to the checkout page. This will allow users to insert a purchase order number during checkout.
* **Show 'Create a Quote' Button:** enabling this will add the `Create a Quote` button to checkout, which allows users to create a quote using the current contents of their cart.

> You should only enable the `Create a Quote` button if your store has the [B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes) app installed. Check the **B2B Quotes** app documentation for more information on how order quotes work.

Contributors

1

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

Contributors

1

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

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23installation)

[How it works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23how-it-works)

[Restricted access to checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23restricted-access-to-checkout)[Cost Center addresses](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23cost-center-addresses)[Purchase order number field](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23purchase-order-number-field)

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

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/vtex-b2b-suite/vtex-b2b-checkout-settings.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-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23before-you-begin)

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23installation)

[How it works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23how-it-works)

[Restricted access to checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23restricted-access-to-checkout)[Cost Center addresses](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23cost-center-addresses)[Purchase order number field](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings/docs/guides/vtex-b2b-checkout-settings%23purchase-order-number-field)

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

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 stack layout 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-stack-layout/docs/guides)

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

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

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

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

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

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

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

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

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

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

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

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

---

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

Stack Layout

Use this layout component to show blocks on top of other blocks.

![{"base64":"  ","img":{"width":612,"height":1260,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":196095,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/images/vtex-stack-layout-0.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/images/vtex-stack-layout-0.png)

Each children passed to `stack-layout` will receive an increasingly higher value of `zIndex`.

This means `flex-layout.row#viewone` will appear on the bottom, `flex-layout.row#viewtwo` will appear over it with `zIndex` of value 2, and `flex-layout.row#viewthree` will appear over them both with `zIndex` of value 3\. Another thing to notice is that you pass the `blockClass` prop to any children of the `stack-layout` it will apply the `blockClass` to the element that wraps child element.

## Configuration

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

`1

 "dependencies": {

2

 "vtex.stack-layout": "0.x"

3

 }

`

1. Add the `stack-layout` block to your template. For example:

`1

"stack-layout": {

2

 "children": ["flex-layout.row#viewone", "flex-layout.row#viewtwo", "flex-layout.row#viewthree]

3

}

`

| Prop name    | Type   | Description                                                                                | Default value |
| ------------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass   | string | Allows to pass a custom name to be added to component css classes                                                                                | null          |
| zIndexOffset | number | An offset to be passed to the zIndex of the children of the stack layout. If you pass 3, the first children will have zIndex of 3 and the next layer will have zIndex of 4, and so on. | 0             |

## Customization

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

| CSS Handles      |
| ---------------- |
| stackContainer   |
| stackItem        |
| stackItem--first |

Contributors

1

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

Contributors

1

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

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

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/layout-apps/vtex-stack-layout.md)

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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

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

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

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

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

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

---

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

B2B Quotes & Carts

> The **B2B Quotes & Carts** app is part of VTEX’s [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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. We recommend that you use it alongside the other apps in this suite for all functionalities to work as expected.

The B2B shopping experience frequently requires the possibility for customers to request quotes and negotiate prices with sales representatives.

The **B2B Quotes & Carts** app allows customers who are part of [B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-organizations) to request a quote for a shopping cart and save it for future use – including its items, product quantities and prices. This enables price negotiations between them and the store’s sales representatives, as well as order approval flows within their organization.

## Before you begin

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

Note that installing **B2B Quotes & Carts** will also result in [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-storefront-permissions) being installed as a dependency app – it allows you to grant specific storefront roles for B2B users in an organization. This is especially useful for organizations with multiple users who have different responsibilities, such as placing orders, approving orders or managing the organization users. See the [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-storefront-permissions) app documentation for information on the available roles and how to customize their permissions (optional).

If you want to be able to manage roles and permissions on the VTEX Admin, you must install [Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-storefront-permissions-ui) as well.

Along with this app, we recommend installing [B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings), which includes quotes-related functionalities to checkout. For example, it allows you to add a `Create a Quote` button to the checkout’s shopping cart page, as well as “lock” the checkout if a quote is in use, preventing the cart contents from being changed until the order is placed.

## Installation

You can install the **B2B Quotes & Carts** app by running `vtex install vtex.b2b-quotes` in your terminal, using 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).

## How the app works

The **B2B Quotes & Carts** app enables a shared [My Quotes](#my-quotes) page for members of a B2B organization, from where it is possible to create a quote or saved cart and view existing quotes and saved carts.

It is also possible to manage each quote or saved cart’s [details](#quote-details), including the possibility to edit them, request adjustments, approve or decline them or use them to place an order.

In addition, the app enables a set of [email templates](#email-templates) to notify members of the organization of quote status changes through Message Center.

The ability to use these resources depends on having the required [storefront permissions](#storefront-permissions), as explained in the next section.

| **Permission**                                | **Default roles**                                                                                |
| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Create Quotes and Carts**                   | Store AdminSales AdminSales ManagerSales RepresentativeOrganization AdminOrganization ApproverOrganization Buyer |
| **Access My Cost Center's Quotes and Carts**  | Sales RepresentativeOrganization ApproverOrganization Buyer                                                      |
| **Access My Organization's Quotes and Carts** | Sales ManagerOrganization Admin                                                                                |
| **Access All Quotes and Carts**               | Store AdminSales Admin                                                                                |
| **Place Orders from Quotes and Carts**        | Store AdminSales AdminSales ManagerSales RepresentativeOrganization AdminOrganization Approver                   |
| **Decline Quotes and Carts**                  | Store AdminSales AdminSales ManagerSales RepresentativeOrganization AdminOrganization Approver                   |
| **Edit My Cost Center's Quotes and Carts**    | Sales Representative                                                                                |
| **Edit My Organization's Quotes and Carts**   | Sales Manager                                                                                |
| **Edit All Quotes and Carts**                 | Store AdminSales Admin                                                                                |

If you want to be able to manage roles and permissions for **B2B Quotes & Carts** on the VTEX Admin, you must install [Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-storefront-permissions-ui) and refer to its documentation.

### My Quotes

The **B2B Quotes & Carts** app enables the **My Quotes** page, an interface to manage quotes and saved carts in the storefront, provided that the user is logged in and has the required storefront permissions.

To access **My Quotes**, customers or sales users must follow the instructions below.

1. Access the storefront and log in.
2. Click `Hello, {name}`.
3. Click on **My Account**.
4. Go to **Quotes and Saved Carts** on the sidebar. You will see the page below.

![{"base64":"  ","img":{"width":1819,"height":606,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":54170,"url":"https://user-images.githubusercontent.com/77292838/161637102-66a15213-e70d-421a-9e90-5a68ddc25825.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/161637102-66a15213-e70d-421a-9e90-5a68ddc25825.png)

> Quotes and saved carts are shown together in the same table. The differences are the following:
>
> * Only quotes can have a status of **Pending** or **Revised**.
> * Sales users are not notified when saved carts are created. It is possible to edit a saved cart such that it becomes a quote, as explained in [Quote Details](#quote-details).

In this page, it is possible to use the following resources:

* **Search bar**: allows you to look up specific quotes or saved carts by name.
* **Filters**: allows you to filter the displayed quotes or saved carts by _Status_, _Organization_ or _Cost Center._ The two last options are available under `More`.
* **New quote**: allows you to create a quote or saved cart by clicking on the `New Quote` button. See more details on this in the [Creating a quote or saved cart](#creating-a-quote-or-saved-cart) section.

The list of quotes and saved carts displays the following information:

* **Ref. Name:** the quote or saved cart’s reference name.
* **Subtotal:** subtotal of the shopping cart associated with the quote or saved cart.
* **Created by:** email of the user who created the quote or saved cart.
* **Created on:** date when the quote or saved cart was created, in the MM/DD/YYYY format.
* **Expiration:** date when the quote or saved cart will expire, in the MM/DD/YYYY format.
* **Status:** current state of the quote or saved cart, including the following options:
   * **Ready**: the quote or saved cart is ready to be used to place an order.
   * **Pending**: the quote is waiting for review and adjustment by a sales user.
   * **Revised**: the quote is waiting for additional review and adjustment by a sales user.
   * **Declined**: the quote or saved cart has been declined and cannot be used to place an order.
   * **Expired**: the quote or saved cart has reached its expiration date and cannot be used to place an order.
   * **Placed**: the quote or saved cart has been used to place an order and cannot be used again.
* **Last Update:** date when the quote or saved cart was updated for the last time, in the MM/DD/YYYY format.
* **Organization:** name of the organization the quote or saved cart is associated with.
* **Cost Center:** name of the cost center the quote or saved cart is associated with.

From the list, users may click on any row or click on ![](https://user-images.githubusercontent.com/77292838/159766633-dfcb818f-6bd7-4cd0-92dc-9c682fb50d04.png) **\> Details** to view and edit the [details](#quote-details) of that quote or saved cart, according to what their permissions allow.

Depending on the current user’s [storefront permissions](#storefront-permissions), the **My Quotes** page will show a list of quotes and saved carts containing one of the following:

| **Permission**                                | **Content**                                                                     |
| --------------------------------------------- | ------------------------------------------------------------------------------- |
| **Access My Cost Center's Quotes and Carts**  | All quotes and saved carts created by users in the current user’s cost center.  |
| **Access My Organization's Quotes and Carts** | All quotes and saved carts created by users in the current user’s organization. |
| **Access All Quotes and Carts**               | All quotes and saved carts in the current store, regardless of organization.    |

### Creating a quote or saved cart

In order to create a quote or saved cart, it is necessary to have the **Create Quotes and Carts** [permission](#storefront-permissions). After adding products to the cart in the storefront, users with these permissions can use the contents of their cart to create a saved cart or to request a quote. They should follow the instructions below.

1. Fill in the shopping cart with the desired products.
2. Take one of the following actions to create a quote or saved cart:
   * Clicking the `Create a Quote` button during checkout, provided that **B2B Checkout Settings** is installed and this button is enabled in the app’s [configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings%23configuration).
   * Navigating to the `/b2b-quotes/create` route.
   * Clicking the `+ New` button on the **My Quotes** page.
   Any of these paths will lead to the **Create Quote** page, illustrated below.
3. Fill in the quote or saved cart’s **Name**.
4. Make sure that all the information in the **Create Quote** page is correct:
   * **Original Subtotal:** subtotal of the shopping cart before any discounts.
   * **Percentage Discount:** percentage of the discount offered by a sales representative.
   * **Quoted Subtotal:** subtotal of the quote, including any discounts offered by sales representatives.
   * **Image:** image of the selected product.
   * **Ref. Code:** reference code of the selected product.
   * **Name:** name of the product.
   * **Original Price:** original price of the product.
   * **Quoted Price:** price of the product including any discounts offered by sales representatives.
   * **Quantity:** quantity of items.
   * **Total:** total value considering the quoted price and the quantity of items.
5. Write a note in the optional **Add Note** field, if necessary.
Notes added here will be visible as part of the quote or saved cart’s [Update History](#quote-details) and can be seen by salespeople or other members of your organization and cost center. For example, if a user wishes to request a specific discount from the B2B store’s salesperson, they may include this request as a note.
6. Click on one of the following options:
   * `Save for later`: clicking on this button will result in the creation of a saved cart. The status of the newly created saved cart will be set as **Ready**, meaning that it can immediately be used to place an order by any user within that organization or cost center who has the **Place Orders from Quotes and Carts** [permission](#storefront-permissions).
   * `Request quote`: clicking on this button will result in the creation of a quote. The status of the newly created quote will be set as **Pending**, meaning that it will need to be reviewed and adjusted by a salesperson before any special discounts can be applied.
   Note that a **Pending** quote can still be used to place an order, as it is essentially a saved cart at this point, with the original item quantities and prices from the user’s shopping cart.

The items in the table, along with the quantities and prices shown, will be saved when the quote or saved cart is created.

![{"base64":"  ","img":{"width":1506,"height":710,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56657,"url":"https://user-images.githubusercontent.com/77292838/161637106-44d41347-2ee4-4191-bfe9-8dc7e67c783e.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/161637106-44d41347-2ee4-4191-bfe9-8dc7e67c783e.png)

### Quote Details

The **Quote Details** page displays all the information about a specific quote or saved cart, as well as the available actions, depending on its status and the user’s [storefront permissions](#storefront-permissions).

Users can access this page through the storefront by going to **My Account > Quotes and Saved Carts**.

![{"base64":"  ","img":{"width":1210,"height":756,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":61684,"url":"https://user-images.githubusercontent.com/77292838/161637111-043851a7-9215-49eb-81d3-42f5a8b3936c.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/161637111-043851a7-9215-49eb-81d3-42f5a8b3936c.png)

This page displays the following information about a specific quote:

* **Name:** reference name of the quote or saved cart.
* **Original Subtotal:** subtotal of the shopping cart before any discounts.
* **Percentage Discount:** percentage of the discount offered by a sales representative.
* **Quoted Subtotal:** subtotal of the quote, including any discounts offered by sales representatives.
* **Expiration:** date when the quote or saved cart will expire, in the MM/DD/YYYY format.
* **Status:** current state of the quote or saved cart, as in [My Quotes](#my-quotes).
* **Image:** image of the selected product.
* **Ref. Code:** reference code of the selected product.
* **Name:** name of the product.
* **Original Price:** original price of the product.
* **Quoted Price:** price of the product including any discounts offered by sales representatives.
* **Quantity:** quantity of items.
* **Total:** total value considering the quoted price and the quantity of items.
* **Update History:** includes a history of all events related to the quote, such as its creation and discounts offered, including notes if there are any.
* **Add Note:** optional field to write comments or notes. Notes added here will be visible as part of the quote or saved cart’s [Update History](#update-history). For example, if a user wishes to request a specific discount from their salesperson, they may include this request as a note.

The following actions are available, depending on the user’s storefront permissions:

| Actions                                                                                | Required storefront permissions                                                                                |
| ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| [Editing a quote](#editing-a-quote)                                                             | Any of the following:Edit My Cost Center's Quotes and CartsEdit My Organization's Quotes and CartsEdit All Quotes and Carts       |
| [Requesting additional adjustments to a quote](#requesting-additional-adjustments-to-a-quote)   | Any of the following:Access My Cost Center's Quotes and CartsAccess My Organization's Quotes and CartsAccess All Quotes and Carts |
| [Declining a quote or saved cart](#declining-a-quote-or-saved-cart)                             | Decline Quotes and Carts                                                                                |
| [Using a quote or saved cart to place an order](#using-a-quote-or-saved-cart-to-place-an-order) | Place Orders from Quotes and Carts                                                                                |

#### Editing a quote

Users with **Edit** [permissions](#storefront-permissions) – who are typically users associated with any of the Sales roles or the Store Admin role – can edit quotes in the **Quote Details** page as follows:

* Change the price or quantity of each SKU by editing them directly in the **Quoted Price** and **Quantity** columns of the product list within the quote.
* **Apply Percentage Discount:** apply a percentage discount to the entire quote by dragging the discount bar up to the desired percentage. This will override any changes made to individual product prices.
* **Expiration Date Change:** change the quote’s expiration date.
* **Add Note:** write an optional comment.

After making any of the above edits on the quote details page, the user must save the quote by clicking `Save quote`.

This will have the effect of setting the quote’s status to **Ready** and notifying any user who has previously interacted with the quote of the change via email – check [Email templates](#email-templates) for more details on this notification.

![{"base64":"  ","img":{"width":1920,"height":1908,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":203488,"url":"https://user-images.githubusercontent.com/77292838/161637108-aeaeef58-296f-407a-9c00-b5ffe9d509fb.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/161637108-aeaeef58-296f-407a-9c00-b5ffe9d509fb.png)

> To take discounts into consideration, the **B2B Quotes and Carts** app is integrated with the [Order Authorization](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-order-authorization-works--3MBK6CmKHAuUjMBieDU0pn) system. If there is a manual discount rule that will automatically deny a discount above a certain percent, **B2B Quotes and Carts** will not allow a discount above this amount to be applied.

#### Requesting additional adjustments to a quote

Users who lack any of the **Edit** permissions but have any of the **Access** [permissions](#storefront-permissions) can add additional notes to a quote or saved cart if its current status is **Ready**, **Pending**, or **Revised**.

If a quote is **Ready**, meaning that it has been adjusted and saved by a sales user, its status will change to **Revised** when an organization user adds notes and clicks `Submit to Sales Rep`. This is intended as a way for the organization user to request additional adjustments to pricing or quantity. All users who have previously interacted with the quote will receive a notification including the contents of the notes field – check [Email templates](#email-templates) for more details on this notification.

#### Declining a quote or saved cart

A declined quote or saved cart can no longer be edited or used to place an order. Users with the **Decline Quotes and Carts** [permission](#storefront-permissions) may decline a quote or saved cart if its current status is **Ready**, **Pending** or **Revised**. This can be done by clicking the `Decline` button on the quote details page.

All users who have previously interacted with the quote will be notified that it has been declined – check [Email templates](#email-templates) for more details on this notification.

#### Using a quote or saved cart to place an order

Users with the **Place Orders from Quotes and Carts** [permission](#storefront-permissions) may use a quote or saved cart to place an order if its current status is **Ready**, **Pending**, or **Revised**.

They can do this by clicking the `Use Quote` button on the quote details page. The user will be redirected to checkout with the contents of the quote or saved cart added to their current cart. Anything that was previously in the user’s cart will be cleared.

If the [B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-checkout-settings) app is installed, the checkout will be in a “locked” state until the order is placed, meaning that product quantities cannot be changed, and products cannot be added or removed. If there are not enough items in stock to meet the quantity specified in the quote or saved cart, the amount will be automatically adjusted. If a given product has no availability, checkout will allow it to be removed from the cart.

Once the order has been placed, the quote or saved cart’s status will automatically change to **Placed**, after which point it cannot be used again.

### Email templates

The **B2B Quotes & Carts** app provides a set of three email templates to be sent to B2B users, triggered automatically based on specific changes:

| Template name | Recipients                                                                                | Trigger                                                                                |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Quote created | Users with any of the following permissions:Edit My Cost Center's Quotes and CartsEdit My Organization's Quotes and CartsEdit All Quotes and Carts | The quote request was created.                                                                                |
| Quote placed  | All users who have previously interacted with the quote by editing it, requesting adjustments or approving it.                                     | An order was placed from the existing quote.                                                                       |
| Quote updated | All users who have previously interacted with the quote.                                                                                | The quote was updated in any way – including changes in discounts or expiration dates, new notes added or refusal. |

If you want to view or edit any of these templates, follow the steps below.

1. In the VTEX Admin, go to **Customer > Message center > Templates**.
2. In the search bar, type `quote`.
3. Click on the template you want to view or edit.
4. Make the desired changes in the template. You can learn more about editing **Message Center** templates by reading our documentation on [How to create and edit transactional email templates](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/transactional-emails--6IkJwttMw5T84mlY9RifRP/335JZKUYgvYlGOJgvJYxRO).
5. Click on `Save`.

## **Configuration (optional)**

To change the app’s settings, access **Account Settings** \> **B2B Quotes** in the VTEX Admin.

On this page, you can configure the following option:

* **Default expiration period (in days) for quotes and saved carts:** this field allows you to configure the default expiration date for new quotes requested by customers in your store. The default value is 30 days. The minimum value you can set is 1, and there is no maximum value.

Make sure you click on `Save Settings` after any changes.

Note that users with [storefront permissions](#storefront-permissions) to edit quotes will be able to adjust the expiration dates of individual quotes as needed.

![{"base64":"  ","img":{"width":1261,"height":800,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":17947,"url":"https://user-images.githubusercontent.com/6306265/163218059-903cfbcf-0077-45d2-9457-19ee0ba4d5c8.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/6306265/163218059-903cfbcf-0077-45d2-9457-19ee0ba4d5c8.png)

Contributors

1

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

Contributors

1

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

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23installation)

[How the app works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23how-the-app-works)

[My Quotes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23my-quotes)[Creating a quote or saved cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23creating-a-quote-or-saved-cart)[Quote Details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23quote-details)[Email templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23email-templates)

[Configuration (optional)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23configuration-optional)

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/vtex-b2b-suite/vtex-b2b-quotes.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-b2b-quotes/docs/guides/vtex-b2b-quotes%23before-you-begin)

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23installation)

[How the app works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23how-the-app-works)

[My Quotes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23my-quotes)[Creating a quote or saved cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23creating-a-quote-or-saved-cart)[Quote Details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23quote-details)[Email templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23email-templates)

[Configuration (optional)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-b2b-quotes/docs/guides/vtex-b2b-quotes%23configuration-optional)

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 feature navigation 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/feature-navigation/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

[Implementing regionalization features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-implementing-search-features)

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

[Implementing regionalization features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-implementing-search-features)

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Building navigation menus

This feature enables customers to navigate among the store pages.

## Overview

This feature aims to group the main store's page header components. These components perform specific functions such as navigation among the store pages, navigation to the login flow and others.

---

## Usage

We recommend the usage of the components together, keeping the `Navbar` as the wrapper of the others.

There is an available example of the usage of all the related components in our starter store [here](https://read.calvincode.net/reader?url=https://starter.vtex.app/).

---

## Components

* Storefront
[Login](#)
Set location
   * [Office](#)
   * [Home Appliances](#)
   * [Computer and Software](#)
   * [Technology](#)
Navbar
Represents the page header and groups features like Search and Regionalization.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/organisms-navbar)
* Open Menu
NavbarSlider
As part of the Navbar, this component it its mobile version used to list the navigation links.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/organisms-navbar-slider)
* Set location
   * [Office](#)
   * [Home Appliances](#)
   * [Computer and Software](#)
   * [Technology](#)
NavbarLinks
Displays a set of navigation links.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/molecules-navbar-links)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/_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/components/storefront-features/building-navigation-menus.mdx)

[Adding third-party scripts« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-handling-third-party-scripts)[Displaying content for authenticated usersNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

Contributors

1

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

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus%23overview)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus%23usage)

[Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus%23components)

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/components/storefront-features/building-navigation-menus.mdx)

Copy page

On this page

ON THIS PAGE

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus%23overview)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus%23usage)

[Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-navigation/docs/guides/faststore/storefront-features-building-navigation-menus%23components)

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