[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 store video 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.store-video/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-newsletter)

[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-video)

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-newsletter)

[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-video)

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Video

Official extension

Version: 1.4.3

Latest version: 1.4.3

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

The Video app allows you to display video assets on your store pages.

![{"base64":"  ","img":{"width":1420,"height":854,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1189801,"url":"https://storecomponents.vtexassets.com/arquivos/ids/155640"}}](https://read.calvincode.net/reader?url=https://storecomponents.vtexassets.com/arquivos/ids/155640)

## Configuration

1. Add the `store-video` app to your theme's dependencies in the `manifest.json` file:

`1

 "dependencies ": {

2

+ "vtex.store-video": "1.x"

3

 }

`

1. In any desired theme template, add the `video` block with the desirable props. For example:

`1

 "video#background": {

2

 "props": {

3

 "width": "100%",

4

 "height": "600px",

5

 "loop": false,

6

 "autoPlay": true,

7

 "muted": false,

8

 "src": "https://www.youtube.com/watch?v=wygFqZXMIco",

9

 "blockClass": "videoEl"

10

 }

11

 }

`

### `video` props

| Prop name      | Type             | Description                                                                                | Default value   |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
| name           | string           | Video name for SEO and accessibility.                                                                                | undefined       |
| description    | string           | Video description for SEO and accessibility.                                                                                | undefined       |
| src            | string           | Video URL. It can be a youtube URL, vimeo URL or a self-hosted video URL.                                                                                | undefined       |
| type           | string           | Video type.                                                                                | undefined       |
| poster         | string           | Cover image URL to be displayed before the video playback.                                                                                | undefined       |
| controlsType   | enum             | The type of controls. It can be custom-vtex( only works if the video URL represents a HTML5 player ), native or none.                                                                                | undefined       |
| autoPlay       | boolean          | Whether the video will start automatically after loaded(true) or not(false). Note that if the value is true, the muted property will automatically be setted to true.                                  | false           |
| muted          | boolean          | Whether the video will start with the audio on(false) or not(true).                                                                                | false           |
| loop           | boolean          | Whether the video will run in a loop(true) or not(false).                                                                                | false           |
| playsInline    | boolean          | Whether the video will play inline(true) or not(false).                                                                                | false           |
| width          | number or string | The width of the video exhibition area. It could be as %(string) or pixels(number).                                                                                | undefined       |
| height         | number or string | The height of the video exhibition area. It could be as %(string) or pixels(number).                                                                                | undefined       |
| PlayIcon       | string           | Video play icon for custom-vtex controls.                                                                                | icon-play       |
| PauseIcon      | string           | Video pause icon for custom-vtex controls.                                                                                | icon-pause      |
| VolumeOnIcon   | string           | Video volume on icon for custom-vtex controls.                                                                                | icon-volume-on  |
| VolumeOffIcon  | string           | Video volume off icon for custom-vtex controls.                                                                                | icon-volume-off |
| FullscreenIcon | string           | Video fullscreen icon for custom-vtex controls.                                                                                | icon-extend     |
| classes        | CustomCSSClasses | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're importing this block as a React component. | undefined       |

Use the **admin's Site Editor** to manage some props declared in the `video` block.

## 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://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles       |
| ----------------- |
| controlsContainer |
| fallbackContainer |
| fallbackImage     |
| fullscreenButton  |
| playButton        |
| trackBar          |
| trackContainer    |
| trackTimer        |
| videoContainer    |
| videoElement      |
| volumeContainer   |
| volumeButton      |
| volumeSlider      |

:warning: \_It's required that `controlsType` prop is set as `custom-vtex` in order to have the following CSS Handles properly working: `controlsContainer`, `fullscreenButton`, `playButton`, `trackContainer`, `trackTimer`, `trackBar`, `volumeContainer`, `volumeSlider`, and `volumeButton`.

[Store Newsletter« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-newsletter)[VTEX IO Sandbox ComponentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.sandbox)

See also

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

ON THIS PAGE

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

[video props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-video/docs/apps/vtex.store-video%23video-props)

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

Was this helpful?

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


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

[User] Provide a guide on guides vtex product summary productsummaryskuname 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-summary-productsummaryskuname/docs/guides)

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

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

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

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

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

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

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

---

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

Product Summary SKU Name

Product Summary SKU Name is a block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary) responsible for rendering the selected SKU's name.

## Configuration

1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:

`1

 "dependencies": {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-sku-name` block to your store theme as a child of `product-summary.shelf`. For example:

`1

 "product-summary.shelf": {

2

 "children": [

3

 "product-summary-image",

4

 "product-summary-name",

5

+ "product-summary-sku-name",

6

 "product-summary-attachment-list",

7

 "product-summary-space",

8

 "product-summary-column#1"

9

 ]

10

 },

`

## Customization

To apply CSS customizations in this and other blocks, follow the [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) guide.

| CSS Handles      |
| ---------------- |
| skuNameContainer |

Contributors

1

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

Contributors

1

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryskuname/docs/guides/vtex-product-summary-productsummaryskuname%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/basic-components/vtex-product-summary-productsummaryskuname.md)

Copy page

On this page

ON THIS PAGE

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryskuname/docs/guides/vtex-product-summary-productsummaryskuname%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 store components productdescription 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-store-components-productdescription/docs/guides)

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

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

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

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

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

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

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

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

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

---

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

Product Description

The `product-description` block displays the description of a product. This Component can be imported and used by any VTEX App.

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

## Configuration

1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "2.x"

3

 }

`

1. Add the `product-description` block to any child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

 "flex-layout.row#product",

4

 ]

5

 },

6

 "flex-layout.row#product": {

7

 "children": [

8

+ "product-description"

9

 ]

10

 }

`

1. Then, declare the `product-description` block using the props stated in the [Props](#props) table.

### Props

| Prop name       | Type             | Description                                                                                | Default   |
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| classes         | CustomCSSClasses | Overrides default CSS handles. To better understand how this prop works, check [this document](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only helpful if you're using this block as a React component. | undefined |
| collapseContent | Boolean          | If true, whenever the product description is too big, it will collapse and show a "Show More" button. When false, it will never collapse and will always show the whole description.                                                       | true      |
| showTitle       | boolean          | Define whether or not to show the title.                                                                                | true      |
| title           | string           | Defines a custom title for the description section.                                                                                | undefined |

## Customization

To apply CSS customizations in this and other blocks, follow the [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) guide.

| CSS Handles                 |
| --------------------------- |
| productDescriptionContainer |
| productDescriptionText      |
| productDescriptionTitle     |

Contributors

1

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

Contributors

1

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-productdescription/docs/guides/vtex-store-components-productdescription%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-productdescription/docs/guides/vtex-store-components-productdescription%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/store-components/vtex-store-components-productdescription.md)

Copy page

On this page

ON THIS PAGE

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-productdescription/docs/guides/vtex-store-components-productdescription%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-productdescription/docs/guides/vtex-store-components-productdescription%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 working with json schemas in master data v2 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/working-with-json-schemas-in-master-data-v2/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/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/working-with-json-schemas-in-master-data-v2/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/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/working-with-json-schemas-in-master-data-v2/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/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/working-with-json-schemas-in-master-data-v2/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data)

[Understanding Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/understanding-master-data)

[Master Data best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-best-practices)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v2)

Schemas

[Schema Lifecycle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-schema-lifecycle)

[Working with JSON Schemas in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2)

Triggers

[Master Data v2 document saving flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v2-document-saving-flow)

[Creating relationships between data entities using Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/creating-relationships-between-data-entities-using-master-data-v2)

[Using dynamic expressions on Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/using-dynamic-expressions-on-master-data-v2)

[Searching by geocoordinates in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/searching-by-geocoordinates-in-master-data-v2)

[Setting up alternate keys in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/setting-up-alternate-keys-in-master-data-v2)

[Setting up an auto increment field in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/setting-up-an-auto-increment-field-in-master-data-v2)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v1)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data)

[Understanding Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/understanding-master-data)

[Master Data best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-best-practices)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v2)

Schemas

[Schema Lifecycle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-schema-lifecycle)

[Working with JSON Schemas in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2)

Triggers

[Master Data v2 document saving flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v2-document-saving-flow)

[Creating relationships between data entities using Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/creating-relationships-between-data-entities-using-master-data-v2)

[Using dynamic expressions on Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/using-dynamic-expressions-on-master-data-v2)

[Searching by geocoordinates in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/searching-by-geocoordinates-in-master-data-v2)

[Setting up alternate keys in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/setting-up-alternate-keys-in-master-data-v2)

[Setting up an auto increment field in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/setting-up-an-auto-increment-field-in-master-data-v2)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v1)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides)

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/master-data-v2)

Schemas

[Working with JSON Schemas in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2)

Working with JSON Schemas in Master Data v2

Learn more about how to set up your JSON schemas

A JSON Schema defines how your data will be validated. Further information can be found in [External documentation on JSON Schemas](https://read.calvincode.net/reader?url=https://json-schema.org/), this article on [Understanding JSON Schema](https://read.calvincode.net/reader?url=https://json-schema.org/understanding-json-schema), and our article about the [Master Data schema lifecycle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-schema-lifecycle).

Use the following API requests to manage your Master Data schemas:

* [Get schemas](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/master-data-api-v2%23get-/api/dataentities/-dataEntityName-/schemas)
* [Get schemas by name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/master-data-api-v2%23get-/api/dataentities/-dataEntityName-/schemas/-schemaName-)
* [Save schema by name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/master-data-api-v2%23put-/api/dataentities/-dataEntityName-/schemas/-schemaName-)

Below you can learn more about how to set up your JSON schemas, and some Master Data features you can use with them.

## Configuring a JSON Schema

A JSON Schema is composed of three main fields:

* Properties: fields with their respective types.
* Required: mandatory fields.
* Title: Schema name.

Example:

`1

{

2

 "title": "Basic information of SKU",

3

 "properties": {

4

 "name": { "type": "string" }

5

 },

6

 "required": ["name"]

7

}

`

The schema above defines the basic format of an SKU. In this case, only the `name` property. We also define this field as mandatory by adding the field name into the required array.

This JSON Schema validates the following JSON:

`1

{

2

 "name": "T-shirt"

3

}

`

You can add these examples to [JSON Schema Validator](https://read.calvincode.net/reader?url=http://www.jsonschemavalidator.net/). If you change the JSON example in the validator to an integer, you will receive an error message, like in the example below.

* Changing the name to an integer:
`1
{
2
 "name": 1
3
}
`
* Error message:
`1
Invalid type. Expected String but got Integer.
`

The JSON Schema validates only the fields configured in properties. The exceeding fields will be maintained without validation. To preserve only the fields configured in the JSON schema, see the `additionalProperties` property information in [external documentation about JSON schema](https://read.calvincode.net/reader?url=https://json-schema.org/understanding-json-schema/reference/object.html%23properties).

> Master Data v2 data entities can have up to 60 schemas per entity.

## Indexing fields

Use the property `v-indexed` to set up indexed fields. You must add the field to the properties to generate the indexer configuration with the right type.

`1

{

2

 "properties": {

3

 "field1": { "type": "string" },

4

 "field2": { "type": "integer" }

5

 },

6

 "v-indexed": ["field1", "field2"]

7

}

`

## Default fields

Use the property `v-default-fields` to configure which fields will return without indication in the `fields` query string.

`1

{

2

 "v-default-fields": ["field1", "field2"]

3

}

`

## Inheritance of schemas

Use the property `v-canonicalto` to set up another JSON Schema in the same data entity to inheritance.

`1

{

2

 "v-canonicalto": "https://{host}/api/dataentities/{data-entity-name}/schemas/{my-base-schema}"

3

}

`

## Enabling public fields

Use the property `v-security` to set up which fields are public (request without user authentication).

`1

{

2

 "v-security": {

3

 "allowGetAll": false,

4

 "publicRead": ["field1"],

5

 "publicWrite": ["field1"],

6

 "publicFilter": ["field1"]

7

 }

8

}

`

## Disabling default caching

Use the property `v-cache` to disable default caching.

`1

{

2

 "v-cache": false

3

}

`

## Creating triggers

Use the property `v-triggers` to set up automatic actions that will be performed by the platform if the creation or update of a document meets certain criteria defined by you. Learn more in [Setting up triggers in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-triggers-on-master-data-v2).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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/Master-Data/master-data-v2/schemas/working-with-json-schemas-in-master-data-v2.md)

[Schema Lifecycle« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2//docs/guides/master-data-schema-lifecycle)[Setting up triggers on Master Data v2Next »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2//docs/guides/setting-up-triggers-on-master-data-v2)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

ON THIS PAGE

[Configuring a JSON Schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23configuring-a-json-schema)

[Indexing fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23indexing-fields)

[Default fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23default-fields)

[Inheritance of schemas](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23inheritance-of-schemas)

[Enabling public fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23enabling-public-fields)

[Disabling default caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23disabling-default-caching)

[Creating triggers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23creating-triggers)

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/Master-Data/master-data-v2/schemas/working-with-json-schemas-in-master-data-v2.md)

Copy page

On this page

ON THIS PAGE

[Configuring a JSON Schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23configuring-a-json-schema)

[Indexing fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23indexing-fields)

[Default fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23default-fields)

[Inheritance of schemas](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23inheritance-of-schemas)

[Enabling public fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23enabling-public-fields)

[Disabling default caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23disabling-default-caching)

[Creating triggers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/working-with-json-schemas-in-master-data-v2/docs/guides/working-with-json-schemas-in-master-data-v2%23creating-triggers)

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 how to implement product color variation 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/how-to-implement-product-color-variation/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/catalog-integration)

[Categories](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/categories)

[Brands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/brands)

[Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/products)

[Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/specifications)

[Product specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/product-specifications)

[SKU specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/sku-specifications)

[Updating SKU Specifications with Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/updating-sku-specifications-with-catalog-api)

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/skus)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/images)

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/alternative-api-requests)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/how-to-implement-product-color-variation)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides)

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

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

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

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

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

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/catalog-integration)

[Categories](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/categories)

[Brands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/brands)

[Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/products)

[Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/specifications)

[Product specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/product-specifications)

[SKU specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/sku-specifications)

[Updating SKU Specifications with Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/updating-sku-specifications-with-catalog-api)

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/skus)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/images)

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/alternative-api-requests)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/how-to-implement-product-color-variation)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides)

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/catalog-integration)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/docs/guides/how-to-implement-product-color-variation)

Implementing product color variation

Product variations occur when an item has different attributes such as color and size. These variants are grouped together on a single product page.

On the Amazon marketplace, they are referred to as parent and child relationships. The parent is the actual product, and the children are the variants. For example, with a cotton shirt as the parent, the child could be a blue cotton shirt, a small cotton shirt, or a small blue cotton shirt, if multiple variants apply.

If configured correctly, product variations can improve the customer experience and increase sales. They can enhance visibility, especially for colors or sizes that may get lost among other search results. Customers may find a color or size they didn’t realize existed in the range.

When dealing with colors as product variations, there are often specific requirements to consider, such as:

* A specific URL for each color.
* A specific product page and unique content for a specific color.
* Landing pages with products with the same colors.
* The ability to share only some colors and not all product variations with external services or marketplaces such as Google Shopping.

To meet these needs, we suggest using color as a Similar Product, rather than a SKU specification. Learn more on [Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants). This approach allows you to create unique URLs and pages for each color, helping with SEO, and improving the customer experience. By following these tips, you can optimize your product color variation strategy, increase sales, and improve visibility.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/catalog-integration/how-to-implement-product-color-variation.md)

[Alternative API requests« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation//docs/guides/alternative-api-requests)[CheckoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation//docs/guides/checkout-api-overview)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-implement-product-color-variation/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/catalog-integration/how-to-implement-product-color-variation.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 b2b setup 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/b2b-setup/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

B2B Suite

Official extension

Version: 2.0.0

Latest version: 2.0.0

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

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

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

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

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

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

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

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

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

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

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

## Frequently Asked Questions

### How do I fix the schema issue?

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

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

See also

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

ON THIS PAGE

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

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

Was this helpful?

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