[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 product highlights 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-product-highlights/docs/guides)

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

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

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Product Highlights

Official extension

Version: 2.3.2

Latest version: 2.3.2

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

The Product Highlights app provides blocks to display highlight badges on products according to the collection or promotion they are linked to.

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

_In the image above, the product has a `Top Seller` highlight._

## Configuration

### Step 1 - Adding the Product Highlights app to your theme dependencies

In your theme `manifest.json` file, add the Product Highlights app as a dependency:

`1

 "dependencies": {

2

+ "vtex.product-highlights": "2.x"

3

}

`

Now, you can use all the blocks exported by the `product-highlights` app. See the full list below:

| Block name                | Description                                                                                |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| product-highlights        | Parent block for defining how the Product Highlights component will be displayed, based on its children blocks (product-highlight-text and product-highlight-wrapper) and props. |
| product-highlight-text    | Renders a span HTML tag with the highlight name. It also provides data attributes and CSS handles for style customizations.                                                      |
| product-highlight-wrapper | You may use this block if you need to render other blocks alongside the highlight name. It renders a div HTML tag and its children blocks, if any.                               |

### Step 2 - Adding the Product Highlights blocks to your theme templates

Copy one of the examples stated below and paste it into your desired theme template, making the necessary changes. If needed, add the `product-highlights` block to the template block list.

* Simple example:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "children": ["product-highlight-text"]

4

 },

5

 "product-highlight-text": {

6

 "props": {

7

 "message": "{highlightName}"

8

 }

9

 }

10

}

`

* Example using the `link` prop:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "children": ["product-highlight-text"]

4

 },

5

 "product-highlight-text": {

6

 "props": {

7

 "message": "{highlightName}",

8

 "link": "/collection/{highlightId}"

9

 }

10

 }

11

}

`

* Example using `product-highlight-wrapper`:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "children": ["product-highlight-wrapper"]

4

 },

5

 "product-highlight-wrapper": {

6

 "children": [

7

 "icon-star", // You can add anything inside a product-highlight-wrapper

8

 "product-highlight-text"

9

 ]

10

 },

11

 "product-highlight-text": {

12

 "props": {

13

 "message": "{highlightName}"

14

 }

15

 }

16

}

`

* Example using the prop `filter` and the prop `type`:

`1

{

2

 "vtex.product-highlights@2.x:product-highlights": {

3

 "props": {

4

 "type": "teaser",

5

 "filter": {

6

 "type": "show",

7

 "highlightNames": ["10% Boleto"]

8

 }

9

 },

10

 "children": ["product-highlight-text"]

11

 },

12

 "product-highlight-text": {

13

 "props": {

14

 "message": "{highlightName}",

15

 "blockClass": "boleto"

16

 }

17

 }

18

}

`

> warning
>
> Note that **the Product Highlights blocks require a Product context to work properly, as they handle product data**. Therefore, when declaring these blocks, ensure that they are in a theme template or block where this context is available, such as the `store.product` and `product-summary.shelf`.

#### `product-highlights` props

| Prop name | Type   | Description                                                                                | Default value |
| --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| type      | enum   | The desired type of product highlight to be displayed. Possible values are: collection, promotion, and teaser. collection highlights the product's collection, so it must be used with the [Collection Highlight](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/collection-highlight-control--1tGdb2ndjqy6yWsk2YwKMu?locale=en) feature. promotion and teaser should be used when the product is configured with a [promotion that includes highlights](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/configuring-promotions-with-a-highlightflag--tutorials%5F2295?locale=en). It can be used even if the promotion does not have any restrictions. On the other hand, the teaser must only be used when the promotion has restrictions. ⚠\* Note that nominal promotions will only be displayed in the cart, not on the shelf or product page.\* | collection    |
| filter    | object | Defines which highlights should and should not be displayed by the block.                                                                                | undefined     |

> Technically, the `collection` highlight maps to the [clusterHighlights](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/ea1d7e244e6b00b58e5aa4272fbb16987c483468/graphql/types/Product.graphql%23L29) property; the `promotion` highlight maps to the [discountHighlights](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/ea1d7e244e6b00b58e5aa4272fbb16987c483468/graphql/types/Product.graphql%23L283) property; and the `teaser` highlight maps to the [teasers](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/ea1d7e244e6b00b58e5aa4272fbb16987c483468/graphql/types/Product.graphql%23L284) property.

* **`filter` object:**

| Prop name      | Type       | Description                                                                                | Default value |
| -------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| highlightNames | \[string\] | An array of highlight names that determine which highlights should be hidden or shown based on the type property defined in the product-highlights block.                                                                                | undefined     |
| type           | enum       | Determines whether the highlights for the highlightNames prop should be displayed or hidden on the UI. Possible values are: hide (hides highlights declared in the highlightNames prop) or show (only shows the highlights declared in the highlightNames prop). | undefined     |

#### `product-highlight-text` props

| Prop name  | Type       | Description                                                                                | Default value |
| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass | string     | The block ID you chose to be used for [CSS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property).                                                                                | undefined     |
| message    | string     | Defines the block default text message to be rendered in the UI. You can also use the Admin Site Editor and the markers prop to specify the text message that the block will render on the UI.                                                                                | undefined     |
| markers    | \[string\] | IDs you chose to identify the block's rendered text message and customize it using the Admin Site Editor. Learn how to use them in [Using the Markers prop to customize a block message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message). Note that a block message can also be customized in the Store Theme source code using the message prop. | \[\]          |
| link       | string     | If this prop is set, it creates a link to the string passed. You can interpolate the variables highlightText and highlightId. Example: /collection/{highlightId}.                                                                                | undefined     |

#### `product-highlight-wrapper` props

| Prop name  | Type   | Description                                                                                | Default value |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| blockClass | string | The block ID you chose to be used in [CSS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property). | undefined     |

### Step 3 - Editing the `product-highlight-text` messages

The `product-highlight-text` block uses the [ICU Message Format](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/), enabling comprehensive customization of the rendered text messages.

When using the `message` prop, you will not need to create an advanced configuration: declare the prop directly in your Store Theme app and pass to it the desired text value to be rendered with the block.

The `markers` prop, in turn, requires you to add an extra configuration in the Site Editor of the Admin to properly work. When using this prop, do not forget to check out the block's message variables (shown in the table below) and the [Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message) documentation.

| Message variable | Type   | Description          |
| ---------------- | ------ | -------------------- |
| highlightName    | string | Highlights the name. |

## Customization

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

| CSS handles             |
| ----------------------- |
| productHighlightText    |
| productHighlightWrapper |

| Data attributes     |
| ------------------- |
| data-highlight-name |
| data-highlight-id   |
| data-highlight-type |

[Product Customizer« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-customizer)[Product IdentifierNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-identifier)

See also

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

ON THIS PAGE

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

[Step 1 - Adding the Product Highlights app to your theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-highlights%23step-1-adding-the-product-highlights-app-to-your-theme-dependencies)[Step 2 - Adding the Product Highlights blocks to your theme templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-highlights%23step-2-adding-the-product-highlights-blocks-to-your-theme-templates)[Step 3 - Editing the product-highlight-text messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-highlights/docs/apps/vtex.product-highlights%23step-3-editing-the-product-highlight-text-messages)

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

Was this helpful?

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


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

[User] How do I use the VTEX b2b organizations app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

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

B2B Organizations

Official extension

Version: 3.1.2

Latest version: 3.1.2

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

> 9 The **B2B Organizations** app is part of VTEXs [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-suite) solution: a collection of apps that allow stores to manage organizations, storefront roles and permissions, and checkout settings for B2B commerce relationships. We recommend that you use it alongside the other apps in this suite for all functionalities to work as expected.

In the B2B model, sales goals go beyond a high order conversion rate. They include simplifying the relationship between companies, reducing costs, and increasing performance by providing the customer with the best possible shopping experience.

B2B commerce relations are usually complex and often require a customized service. Therefore, grouping different users from the same company under an organization, and defining custom payment methods, product selections, and prices for each customer are common tasks in this scenario.

The **B2B Organizations** app enables you to group B2B users into organizations. You can assign specific payment methods, price tables, and product collections to each organization, allowing all of the organizations users to share the same commercial conditions. Each organization is further segmented into one or more cost centers, with its own shipping addresses.

## Before you start

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

Note that installing B2B Organizations will also result in [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/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/vtex-developer-docs/docs/vtex-storefront-permissions) app documentation for information on the available roles and how to customize their permissions.

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/vtex-developer-docs/docs/vtex-storefront-permissions-ui) as well.

## Installation

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

## User widget configuration

To enable the [user widget](#user-widget) in your storefront, this app provides a `b2b-user-widget` block that you can add to the account's store theme. We recommend that you add it to the store header, as shown below.

![{"base64":"  ","img":{"width":1894,"height":313,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40446,"url":"https://user-images.githubusercontent.com/77292838/159766647-a8d22a55-61da-4169-a1be-1072a4ca8d73.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766647-a8d22a55-61da-4169-a1be-1072a4ca8d73.png)

Follow the instructions below to display the user widget.

1. Open your store theme apps repository in your local files.
2. In the `manifest.json` file, under `dependencies`, add `"vtex.b2b-organizations": "1.x"`, like so:
`1
"dependencies": {
2
 "vtex.b2b-organizations": "1.x"
3
 },
`
3. Within your store theme's `store` \> `blocks` \> `header` folder, edit the `header.jsonc` file, placing the `b2b-user-widget` block in the desired location, as exemplified below.
We recommend placing it on the top row of the store header. The `b2b-user-widget` block accepts no props.
`1
"header-layout.desktop": {
2
 "children": [
3
 "flex-layout.row#0-desktop",
4
 "flex-layout.row#1-desktop",
5
 "flex-layout.row#2-desktop",
6
 "flex-layout.row#3-desktop",
7
 "sticky-layout#4-desktop"
8
 ]
9
 },
10

11
 "flex-layout.row#0-desktop": {
12
 "children": ["b2b-user-widget"],
13
 "props": {
14
 "fullWidth": true
15
 }
16
 },
`
4. Publish and install the modified store theme. You can follow our documentation on [Making your theme content public](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-making-your-theme-content-public) to do so.

## Seller Wrapper configuration

To complete the Seller experience, follow the instructions:

1. Check if the `"vtex.b2b-organizations": "1.x"` is a dependency on `manifest.json` file
2. Within your store theme's `store` \> `blocks` \> `product` \> `box.jsonc` and `store` \> `blocks` \> `product.jsonc` you must wrap the target content to the block `b2b-seller-wrapper`.

_**box.jsonc**_

`1

 "flex-layout.row#box": {

2

 "children": ["flex-layout.col#box"],

3

 "props": {

4

 "blockClass": ["b2b-seller-wrapper#product"],

5

 }

6

 },

7

 "b2b-seller-wrapper#product": {

8

 "children": ["flex-layout.col#box"]

9

 },

`

_**product.jsonc**_

`1

 "flex-layout.row#product": {

2

 "children": ["b2b-seller-wrapper#pdp"]

3

 },

4

 "b2b-seller-wrapper#pdp": {

5

 "children": ["flex-layout.col#product"]

6

 },

`

1. Publish and install the modified store theme. You can follow our documentation on [Making your theme content public](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-making-your-theme-content-public) to do so.

## Configuration

if we have only one associated organization:

![{"base64":"  ","img":{"width":1057,"height":61,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":7739,"url":"https://i.imgur.com/5yXFU6y.png"}}](https://read.calvincode.net/reader?url=https://i.imgur.com/5yXFU6y.png)

if we have more than one associated organization:

![{"base64":"  ","img":{"width":994,"height":98,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":10498,"url":"https://i.imgur.com/ScQtfIz.png"}}](https://read.calvincode.net/reader?url=https://i.imgur.com/ScQtfIz.png)

### `b2b-user-widget`

| Prop name            | Type    | Description                                                                                | Default value |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | ------------- |
| showDropdown         | Boolean | controls whether we are viewing the dropdown if we have more than one organization associated with the same email. | true          |
| showLoadingIndicator | Boolean | controls whether a loading indicator will be displayed while widget data is loading.                               | false         |

## Customization

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

CSS handles are available for the **Organization Request Form** component and the **User Widget** component.

| **CSS Handles**                 |
| ------------------------------- |
| newOrganizationContainer        |
| newOrganizationInput            |
| newOrganizationAddressForm      |
| newOrganizationButtonsContainer |
| newOrganizationButtonSubmit     |
| userWidgetContainer             |
| userWidgetLoading               |
| userWidgetRow                   |
| userWidgetItem                  |
| userWidgetButton                |
| userWidgetImpersonationItem     |
| userWidgetImpersonationButton   |
| userWidgetImpersonationError    |

## How the app works

The **B2B Organizations** app adds the following functionalities and components to your VTEX store, divided into VTEX Admin, Master Data v2, and Storefront capabilities:

| Public                                                     | Availability                                                                                | Location                   | Feature                                                                                |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| B2B store administrator                                    | [VTEX Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-organizations%23vtex-admin)         | Organization Requests page | Review Organization Requests                                                                                |
| Organizations page                                         | Manage Organizations                                                                                |                            |                                                                                |
| Organization Details page                                  | Manage Cost Centers associated with organizations                                                            |                            |                                                                                |
| Manage Collections associated with organizations           |                                                                                |                            |                                                                                |
| Manage Payment Terms associated with organizations         |                                                                                |                            |                                                                                |
| Manage Price Tables associated with organizations          |                                                                                |                            |                                                                                |
| Manage organization Users                                  |                                                                                |                            |                                                                                |
| Message Center Templates page                              | Manage email templates related to the B2B Organizations app                                                  |                            |                                                                                |
| B2B store administrator or developers                      | [Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-organizations%23master-data-v2) | Master Data API v2         | Retrieve and edit information on organization requests, organizations, and cost centers stored in Master Data v2 |
| B2B customer (organization user) with required permissions | [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-organizations%23storefront)         | Storefront form            | Request New Organization                                                                                |
| My Organization                                            | Manage Organization                                                                                |                            |                                                                                |
| Manage Cost Centers                                        |                                                                                |                            |                                                                                |
| Manage Users                                               |                                                                                |                            |                                                                                |
| Impersonate Users                                          |                                                                                |                            |                                                                                |
| Storefront navigation                                      | User Widget                                                                                |                            |                                                                                |

> This app can also be used together with [B2B Quotes](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-orderquote), allowing order quotes to be managed at the organization level. Please read our B2B Quotes documentation for more details.

### VTEX Admin

After installing and setting up the **B2B Organizations** app, its VTEX Admin capabilities can be found by accessing **Account Settings > B2B Organizations & Cost Centers**.

#### Organization Requests

To request the creation of an organization, B2B customers can use the page available at `/organization-request`. This page allows customers to request an organization creation and its cost center. Add `/organization-request` to your store’s domain to access it.

Once this step is done by the customer, B2B store administrators may review the organization request by going to **VTEX Admin** \> **Account Settings** \> **B2B Organizations & Cost Centers** \> **Organization Requests** (or at `/admin/b2b-organizations/requests`).

In this page, they can view a list of all the organization requests placed in their store.

![{"base64":"  ","img":{"width":1831,"height":722,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":157812,"url":"https://user-images.githubusercontent.com/77292838/159766650-d989a5bc-a33b-4fee-9e60-76f26567b067.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766650-d989a5bc-a33b-4fee-9e60-76f26567b067.png)

Each organization can have a status of **pending**, **approved** or **declined**. Pending requests are the ones that still need review.

To review a request, you must:

1. Click on a request from the table  or click on ![](https://user-images.githubusercontent.com/77292838/159766633-dfcb818f-6bd7-4cd0-92dc-9c682fb50d04.png) \> `View`.
2. Write a comment on the **Add note** field, if necessary.
3. Click on `Approve` or `Decline`.

![{"base64":"  ","img":{"width":1150,"height":602,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":63415,"url":"https://user-images.githubusercontent.com/77292838/159766653-ba4f6d4b-4bda-4856-86a3-0080f8d22e1e.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766653-ba4f6d4b-4bda-4856-86a3-0080f8d22e1e.png)

Upon approval, the request status will change to **Approved** and the organization will be created. The [Organization Admin and the Sales Admins](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions%23available-storefront-roles) will be notified about this via email. You can learn more about this notification in the [Email templates](#email-templates) section. In addition, the user designated as the Organization Admin will be granted access to the [My Organization](#my-organization) tab on the **My Account** page of your storefront.

If the organization request is declined, the request status will be changed to **Declined** and the organization will not be created. The user designated as the Organization Admin is notified via email of this result. Read more about this notification in the [Email templates](#email-templates) section.

#### Organizations

The **Organizations** page includes a list of all the organizations created in your store and their respective status, and also allows store administrators to:

* [Add organizations](#add-organization).
* Access the [Organization details](#organization-details) page, which includes organization data, cost centers, collections, payment terms, price tables and users.

To access the page, go to **Account Settings** \> **B2B Organizations & Cost Centers** \> **Organizations** in the VTEX Admin (or at `/admin/b2b-organizations/organizations`).

![{"base64":"  ","img":{"width":1536,"height":747,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":50875,"url":"https://user-images.githubusercontent.com/77292838/159766661-63f7191a-51c4-49d7-a34d-d909456f2692.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766661-63f7191a-51c4-49d7-a34d-d909456f2692.png)

You can click `Refetch` to refresh the organizations list on this page, fetching information about recently created organizations.

It is possible to use the search bar to find an organization by name or filter the organizations by status.

Each organization can have one of the following statuses:

* **Active**: the organization has been approved by the store administrators and it is currently active.
* **On hold**: the organization is currently paused, which means its users are not allowed to complete purchases at the moment.
* **Inactive**: the organization has been deactivated by the store administrators, so its users will not be able to login.

##### Add organization

You can manually create a new organization on the **Organizations** page. Follow these steps to do so:

1. Click on the `New` button.
2. Fill in the required information about the new organization, as illustrated in the image below.
   * **Name of organization:** name of the organization you want to create.
   * **Name of cost center:** name of the initial cost center associated with the organization.
   * **Country:** country where the cost center is located.
   * **ZIP:** postal code of the cost center address.
   * **Address Line 1:** primary address information, including street number and street name where the cost center is located.
   * **Address Line 2:** optional field for additional address information.
   * **City:** city where the cost center is located. This is filled in automatically based on the ZIP code informed.
   * **State:** state where the cost center is located. This is filled in automatically based on the ZIP code informed.
   * **Receiver:** name of the person that will receive orders in the informed address.
3. Click on `Add`.

![{"base64":"  ","img":{"width":1890,"height":828,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1076654,"url":"https://user-images.githubusercontent.com/77292838/159766663-e1b2005a-0c2d-4bec-84ad-612007f17d64.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766663-e1b2005a-0c2d-4bec-84ad-612007f17d64.gif)

> Additional cost centers and addresses may be added after creating the organization, as explained in the next section of this documentation.

#### Organization Details

In the **Organizations Details** page, you can see and edit the information of an existing organization:

* [Organization Name and Status](#organization-name-and-status)
* [Cost Centers](#cost-centers)
* [Collections](#collections)
* [Payment Terms](#payment-terms)
* [Price Tables](#price-tables)
* [Users ](#users)

You can access this page by going to **Account Settings** \> **B2B Organizations & Cost Centers** \> **Organizations** in the VTEX Admin and clicking on the organization whose details you want to view, or on ![](https://user-images.githubusercontent.com/77292838/159766633-dfcb818f-6bd7-4cd0-92dc-9c682fb50d04.png) \> `View`.

> Note that assigning collections, payment terms, and price tables to an organization is optional. If these are not assigned, users of the organization will see the stores default catalog, have access to all payment methods, and see the store's default pricing.

##### Organization Name and Status

In the top section of the page, you can view the following information:

* **Organization Name:** name of the organization. This information can be edited.
* **Status:** status of the organization. You can set it to **Active**, **On Hold** or **Inactive** by selecting from a list.
* **Created:** date when the organization was created.

![{"base64":"  ","img":{"width":1763,"height":419,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19715,"url":"https://user-images.githubusercontent.com/77292838/159766675-bd899388-7537-427d-af37-fc048aaf8636.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766675-bd899388-7537-427d-af37-fc048aaf8636.png)

##### Cost Centers

In the **Cost Centers** section, you can view all the cost centers associated with the organization. VTEX Admin users can view and manage cost centers for any organization.

![{"base64":"  ","img":{"width":1763,"height":394,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22434,"url":"https://user-images.githubusercontent.com/77292838/159766678-0fd6c361-e1e6-470b-a9fc-c98b530c05e9.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766678-0fd6c361-e1e6-470b-a9fc-c98b530c05e9.png)

> Each organization must have at least one cost center.

By default, each cost center will allow all of the [payment terms](#payment-terms) that have been assigned to the parent organization. However, **Organization Admin** users have the ability to enable or disable individual payment terms at the cost center level  see [Manage Cost Centers](#manage-cost-centers) for more information on this.

To create a new cost center, follow the steps below.

1. Click on the `New` button.
2. Fill in the required information about the new cost center, as illustrated in the image below.
   * **Name:** name of the cost center.
   * **Country:** country where the cost center is located.
   * **ZIP:** postal code of the cost center address.
   * **Address Line 1:** primary address information, including street number and street name where the cost center is located.
   * **Address Line 2:** optional field for additional address information.
   * **City:** city where the cost center is located. This is filled in automatically based on the ZIP code informed.
   * **State:** state where the cost center is located. This is filled in automatically based on the ZIP code informed.
   * **Receiver:** name of the person that will receive orders in the informed address.
3. Click on `Add`.

![{"base64":"  ","img":{"width":1797,"height":828,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1300543,"url":"https://user-images.githubusercontent.com/77292838/159766680-5eb39381-a7da-4278-b8da-8cc7efe3e90a.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766680-5eb39381-a7da-4278-b8da-8cc7efe3e90a.gif)

##### Cost Center Details

You can view or edit the details of an existing cost center by clicking on it in the **Organization Details** page.

This will lead you to the **Cost Center Details** page, where you can:

* View or edit the cost centers **Name** and **Addresses**.
* View or edit the cost center's **Business Document**.
* Add a new shipping address associated with the cost center.
* Delete the cost center

![{"base64":"  ","img":{"width":1810,"height":664,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":44790,"url":"https://user-images.githubusercontent.com/77292838/159766691-4557a032-a38c-4abb-a5a1-29019b833ad2.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766691-4557a032-a38c-4abb-a5a1-29019b833ad2.png)

The optional **Business Document** field may be used to store a Tax ID, VAT ID, CNPJ, or similar business identifier. If a Business Document is present in a user's cost center, it will be applied as the `corporateDocument` in the user's profile and therefore attached to any orders placed by the user.

> The shipping addresses assigned to a cost center will be available to that cost center's users at checkout if you install [B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-checkout-settings). No other addresses will be available. Therefore, each cost center must have at least one shipping address.

To edit or delete an existing address, click ![](https://user-images.githubusercontent.com/77292838/159766633-dfcb818f-6bd7-4cd0-92dc-9c682fb50d04.png) next to it and select **Edit** or **Delete**.

If you would like to add a new shipping address related to that cost center, follow these instructions:

1. Click on `Add new address`.
2. Fill in the required information about the new address.
   * **Country:** country where the cost center is located.
   * **ZIP:** postal code of the cost center address.
   * **Address Line 1:** primary address information, including street number and street name where the cost center is located.
   * **Address Line 2:** optional field for additional address information.
   * **City:** city where the cost center is located. This is filled in automatically based on the ZIP code informed.
   * **State:** state where the cost center is located. This is filled in automatically based on the ZIP code informed.
   * **Receiver:** name of the person that will receive orders in the informed address.
3. Click on `Add`.

Make sure to click `Save` in the top right of the **Cost Center Details** page after any changes.

If you want to delete the cost center, click on `Delete` instead.

##### Collections

> You must use the **Collections Beta** solution to be able to associate collections to organizations using **B2B Organizations**. Read our article on [Creating Collections Beta](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/creating-collections-beta--yJBHqNMViOAnnnq4fyOye) for more information.

This section allows you to manage the [product collections](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/creating-collections-beta--yJBHqNMViOAnnnq4fyOye) assigned to the organization. Your selections define the assortment of products the organization users will see in the storefront.

To add a collection, select the collection you want to add from the **Available** list and click `Add to org`.

To remove a collection, select the collection you want to remove from the **Assigned to organization** list and click `Remove from org`.

![{"base64":"  ","img":{"width":1800,"height":742,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":387324,"url":"https://user-images.githubusercontent.com/77292838/159766692-aec018f6-d09b-4290-a180-a0e2b7040295.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766692-aec018f6-d09b-4290-a180-a0e2b7040295.gif)

##### Payment Terms

In this section, you can choose which [payment conditions](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-configure-payment-conditions--tutorials%5F455?%26utm%5Fsource=autocomplete) are assigned to the organization. Your selections determine which payment options are available to organization users during checkout.

Note that the available payment options can be further customized per cost center by the **Organization Admin**. Check the [Manage Cost Centers](#manage-cost-centers) section for more information on this.

To add a payment term, select the option you want to add from the **Available** list and click `Add to org`.

To remove a payment term, select the option you want to remove from the **Assigned to organization** list and click `Remove from org`.

![{"base64":"  ","img":{"width":1800,"height":432,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":274406,"url":"https://user-images.githubusercontent.com/77292838/159766697-27de2f5b-18b3-4067-a4f1-81da8fb61bc0.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766697-27de2f5b-18b3-4067-a4f1-81da8fb61bc0.gif)

> To customize the checkout according to each organization users role, you need to install and configure [B2B Checkout Settings](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/b2b-checkout-settings).

##### Price Tables

This section allows you to choose which [price tables](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/creating-price-tables--58YmY2Iwggyw4WeSCGg24S) are assigned to the organization. The price tables you select determine the prices the organization users will see in the storefront.

Price tables associated with an organization override the base price only when fulfillment is performed by the main account. When franchises perform the fulfillment, the price table is not applied, resulting in incorrect price displays. To ensure correct operation, configure both the logistics and the price tables directly in the main account, avoiding the use of franchises that inherit price settings.

To add a price table, select the option you want to add from the **Available** list and click `Add to org`.

To remove a price table, select the option you want to remove from the **Assigned to organization** list and click `Remove from org`.

![{"base64":"  ","img":{"width":1800,"height":729,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":352355,"url":"https://user-images.githubusercontent.com/77292838/159766700-34ebfaaf-f6fa-42b6-85a9-a83dca5505ef.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766700-34ebfaaf-f6fa-42b6-85a9-a83dca5505ef.gif)

##### Users

This section presents a list of users associated with the organization, showing their **emails**, their **roles** within the organization, and the **cost center** to which they are associated. It is worth noting that the same email can be associated with up to 949 different organizations or cost centers.

![{"base64":"  ","img":{"width":1530,"height":405,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25833,"url":"https://user-images.githubusercontent.com/77292838/159766707-572dd167-e948-4300-b259-1c9cd0b8a341.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766707-572dd167-e948-4300-b259-1c9cd0b8a341.png)

To add a new user to the organization, follow these steps:

1. In the **Users** list, click on the `New` button.
2. Fill in the users information, as illustrated below.
   * **Name:** full name of the user.
   * **Email:** email of the user.
   * **Cost Center:** cost center the user will be associated with.
   * **Role:** role the user will have in the storefront. See more details on the available roles in the [Storefront Permissions documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions%23available-storefront-roles).
3. Click on `Add`.

![{"base64":"  ","img":{"width":887,"height":815,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":41693,"url":"https://user-images.githubusercontent.com/77292838/159766710-4e35973c-880d-4e98-8f93-4a6c87d3f4e8.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766710-4e35973c-880d-4e98-8f93-4a6c87d3f4e8.png)

Once you add a new user to the organization, if a customer account did not already exist in your store for the provided email address, it will be created.

To edit or remove an existing user, follow these steps:

1. Click on the user you want to edit or delete in the **Users** list.
2. Edit the desired information.
You can change the users **Cost Center** and their **Role**.
If you want to remove the user from the organization, click `Remove user` instead and skip the next step.
3. To apply your changes, click `Save`.

![{"base64":"  ","img":{"width":980,"height":700,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30365,"url":"https://user-images.githubusercontent.com/77292838/159766713-03778c4a-370a-4c13-be4a-8f507cee0a73.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766713-03778c4a-370a-4c13-be4a-8f507cee0a73.png)

If a user is removed from an organization, their account will continue to exist in the store, but they will no longer be assigned to an organization, a cost center, and a B2B role. Thus, they will no longer have access to details of their organization in the **My Organization** page. Instead, they will have the ability to [request the creation of a new organization](#request-new-organization), if necessary.

> As an optional feature, you can install the [Admin Customers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers) app for additional customer management capabilities on the VTEX Admin.

#### Email templates

The **B2B Organizations** app provides a set of four email templates to be sent to B2B organization users, triggered automatically based on specific changes:

| **Template name**               | **Recipient**                          | **Trigger**                                 |
| ------------------------------- | -------------------------------------- | ------------------------------------------- |
| **Organization Approved**       | User with the Organization Admin role  | The organization request has been approved. |
| **Organization Created**        | Users with a Sales Admin role          | The organization has been created.          |
| **Organization Declined**       | User with the Organization Admin role  | The organization request has been declined. |
| **Organization Status Changed** | Users with the Organization Admin role | The organization status has changed.        |

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 `organization`.
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`.

![{"base64":"  ","img":{"width":1194,"height":877,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1201391,"url":"https://user-images.githubusercontent.com/77292838/159766714-6b5feaaf-3d81-472e-a713-55d952a1e556.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766714-6b5feaaf-3d81-472e-a713-55d952a1e556.gif)

### Master Data v2

The **B2B Organizations** app stores information about organization requests, organizations, and cost centers in [Master Data v2](https://read.calvincode.net/reader?url=https://help.vtex.com/pt/tutorial/master-data-v2--3JJ1mlzuo88w22gO0gy0QS).

This means that it is possible for store administrators or developers to fetch this information using the [Master Data API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/master-data-api-v2-overview), by using their **data entity name** as the value for the `data_entity_name` parameter.

You can see the data entity names in the table below.

| **Data entity names**  |
| ---------------------- |
| organization\_requests |
| organizations          |
| cost\_centers          |

### Storefront

Storefront capabilities, in turn, are accessible to B2B customers who visit a suppliers store, provided that they are logged in and have the required permissions.

The following sections describe what your customer can do in your storefront, after you've finished setting up the B2B Organizations app.

#### Request New Organization

A B2B user who is not already part of an organization can request the creation of a new buyer organization in your store by filling in the **Request New Organization** form. They can follow the steps below to do so.

1. Access the store website.
2. Click on **My Account** \> **My Organization**.
3. Provide the required information, as shown in the image below.
   * **Organization Name:** name of the organization.
   * **User to become Organization Admin:** section where you must provide information about the first user of the organization, who will be assigned as the Organization Admin.
         * **First Name:** first name of the Organization Admin user.
         * **Last Name:** last name of the Organization Admin user.
         * **Email Address:** email address of the Organization Admin user.
   * **Default Cost Center:** section where you must provide information about the first cost center associated with the organization.
         * **Cost Center Name:** name of the cost center.
         * **Business Document:** optional field for a business document such as a Tax ID, CNPJ, etc.
         * **Country:** country where the cost center is located.
         * **ZIP:** postal code of the cost center address.
         * **Address Line 1:** primary address information, including street number and street name where the cost center is located.
         * **Address Line 2:** optional field for additional address information.
         * **City:** city where the cost center is located. This is filled in automatically based on the ZIP code informed.
         * **State:** state where the cost center is located. This is filled in automatically based on the ZIP code informed.
         * **Receiver:** name of the person that will receive orders in the informed address.
4. Click `Submit`.

![{"base64":"  ","img":{"width":1892,"height":958,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1971577,"url":"https://user-images.githubusercontent.com/77292838/159766733-14da23e9-55d6-44e8-8cfc-95d62e3b4ade.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766733-14da23e9-55d6-44e8-8cfc-95d62e3b4ade.gif)

After submitting the form, the request will be sent to a queue for review by the B2B store administrator  for more details on this, refer to the [Organization Requests](#organization-requests) section.

The user designated as the **Organization Admin** for the new organization will receive an email notification when the request has either been approved or declined by the store administrator. You can learn more about this notification in the [Email templates](#email-templates) section.

#### My Organization

Users who are designated as the **Organization Admin** or **Sales Admin** can manage the details of their organization in the storefront, on the **My Organization** page.

Users with the **Organization Buyer** or **Organization Approver** roles can also view a read-only version of this page.

To access **My Organization**, follow the instructions below.

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

![{"base64":"  ","img":{"width":1920,"height":1379,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":119400,"url":"https://user-images.githubusercontent.com/77292838/159766773-4d62c3ed-4282-45a9-bf36-d0041684cc50.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766773-4d62c3ed-4282-45a9-bf36-d0041684cc50.png)

On this page, the user with the **Organization Admin** or **Sales Admin** roles may do the following:

* [Manage Cost Centers](#manage-cost-centers)
* [Manage Users](#manage-users)

##### Manage Cost Centers

**Organization Admin** or **Sales Admin** storefront users can find the cost centers associated with their organization in the **Cost Centers** section of the **My Organization** page.

To add a new cost center, they should go to **My Account > My Organization**, where they have access to the same options described in [Cost Centers](#cost-centers). It is possible to view or edit the details of an existing cost center by clicking on it, the same way as described in [Cost Center Details](#cost-center-details).

**Organization Admins** may also view and/or edit the **Business Document** assigned to each cost center, as described in [Cost Center Details](#cost-center-details).

In addition, **Organization Admins** can enable specific payment terms for a cost center, by using the toggle button to activate or deactivate the payment terms assigned to the organization, as shown below.

> This section will only be available on the **My Organization** page if [payment terms](#payment-terms) have previously been assigned to the organization by the VTEX Admin users.

![{"base64":"  ","img":{"width":1514,"height":354,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34045,"url":"https://user-images.githubusercontent.com/77292838/159766775-dd0a17bd-8418-401b-a377-7d4c9ed0cf11.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766775-dd0a17bd-8418-401b-a377-7d4c9ed0cf11.png)

##### Manage Users

**Organization Admin** or **Sales Admin** storefront users can also see and manage the users of their organization in the **Users** section in **My Organization**. To do this, they should go to **My Account > My Organization**, where they have access to the same options described in the [Users](#users) section of this documentation.

Users with the **Organization Admin** role may add, edit, or remove users with any of the following roles: **Organization Admin**, **Organization Approver**, and **Organization Buyer**.

Users with the **Sales Admin** role may add, edit, or remove users with any of the following roles: **Sales Admin**, **Sales Manager**, and **Sales Representative**.

###### Impersonate Users

In telesales, assisted sales, or customer support scenarios where the B2B customer needs help from a salesperson to navigate the store or place orders, it is common to make use of impersonation.

In the **B2B Organizations** app, only users with **Sales** roles or the **Organization Admin** role may impersonate another user.

This action will temporarily apply the impersonated user's email, organization, and cost center to their storefront session. It allows the impersonating users to do the following:

* Browse the store and see the prices, products, shipping addresses and payment methods that would be seen by the impersonated user.
* Take actions on behalf of the impersonated user, such as placing orders.
* Use their regular permissions.

To use impersonation, users with **Sales** roles or the **Organization Admin** role must follow the steps below.

1. In the **Users** section of [My Organization](#my-organization), click on ![](https://user-images.githubusercontent.com/77292838/159766633-dfcb818f-6bd7-4cd0-92dc-9c682fb50d04.png) in the row of the user they want to impersonate.
2. Click on **Impersonate User**.

![{"base64":"  ","img":{"width":1536,"height":412,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25966,"url":"https://user-images.githubusercontent.com/77292838/159766777-1ff83458-cad0-46de-82e4-1e3c3e4bb144.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766777-1ff83458-cad0-46de-82e4-1e3c3e4bb144.png)

#### User widget

To give storefront users visibility into their currently assigned organization, cost center, and role, this app provides a user widget which can be added to the account's store theme:

![{"base64":"  ","img":{"width":1675,"height":60,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42831,"url":"https://user-images.githubusercontent.com/77292838/159766781-8edabb7e-292c-4c8e-a88e-ae937ec7db86.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766781-8edabb7e-292c-4c8e-a88e-ae937ec7db86.png)

> To display the user widget, it is necessary to follow the instructions in the [User widget configuration](#user-widget-configuration) section.

If users click `Manage organization`, they can access the **My Organization** page directly.

In case impersonation is currently active, this block will also show the email of the user being impersonated, as well as a `Stop impersonation` button:

![{"base64":"  ","img":{"width":1675,"height":112,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":66691,"url":"https://user-images.githubusercontent.com/77292838/159766784-6bce63af-9cc6-4ac4-bc59-460b74722dbe.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/159766784-6bce63af-9cc6-4ac4-bc59-460b74722dbe.png)

#### Seller Wrapper Block

> 10 This topic is related to the Seller functionality.

To persist the Organization seller throughout the PDP and shelves, it must have the "seller-wrapper" block in the store theme configuration.

Please check [Seller wrapper configuration](#seller-wrapper)

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

See also

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

ON THIS PAGE

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

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

[User widget configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations/docs/apps/vtex.b2b-organizations%23user-widget-configuration)

[Seller Wrapper configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations/docs/apps/vtex.b2b-organizations%23seller-wrapper-configuration)

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

[b2b-user-widget](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations/docs/apps/vtex.b2b-organizations%23b2b-user-widget)

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

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

[VTEX Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations/docs/apps/vtex.b2b-organizations%23vtex-admin)[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations/docs/apps/vtex.b2b-organizations%23master-data-v2)[Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-organizations/docs/apps/vtex.b2b-organizations%23storefront)

Was this helpful?

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