[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 modal layout 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.modal-layout/docs/guides)

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

Modal Layout

Official extension

Version: 0.14.2

Latest version: 0.14.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-3-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

The Modal Layout app provides blocks to help you create modals in your store.

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

## Configuration

1. Add the Modal Layout app to your theme dependencies in the `manifest.json`:

`1

 "dependencies": {

2

+ "vtex.modal-layout": "0.x"

3

 }

`

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

| Block name          | Description                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| modal-trigger       | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Defines how the modal content will be triggered through its children blocks.                                                                                |
| modal-layout        | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Defines how the modal content will be rendered through its children blocks. You can declare the modal-header and modal-content blocks, described below, as children to create a modal with a header and footer. |
| modal-header        | Renders a close button and the blocks listed as its children, building a modal header. Note that it does not automatically render a header for your modal. Instead, you should create the modal header as you desire using the children list of this block.                                                                                |
| modal-content       | Defines how the modal content will be rendered through its children blocks. Preferably, this block should be used along with the modal-header block in order to create a modal with a header and a footer.                                                                                |
| modal-actions       | Logical block that only renders its child blocks that, in turn, render call-to-action buttons inside the modal, such as a confirmation button.                                                                                |
| modal-actions.close | Button that closes the modal when clicked. It is extremely useful when your modal only has a form or a disclaimer box providing information to the users.                                                                                |

1. Add the `modal-trigger` block in any store template you choose. In the example below, it will be added to the homepage:

`1

{

2

 "store.home": {

3

 "children": [

4

 "modal-trigger#example"

5

 ]

6

 },

`

1. Declare the `modal-trigger` block using its prop and configure the children blocks. The first child block of `modal-trigger` must be a block you choose to trigger the modal content. Then, a sibling block called `modal-layout` will be needed to effectively define the modal content through its child block list. For example:

`1

{

2

 "store.home": {

3

 "children": ["modal-trigger#example"]

4

 },

5

 "modal-trigger#example": {

6

 "children": ["rich-text#example", "modal-layout#example"]

7

 },

8

 "rich-text#example": {

9

 "props": {

10

 "text": "Click me"

11

 }

12

 },

13

 "modal-layout#example": {

14

 "children": ["rich-text#modal-content"]

15

 },

16

 "rich-text#modal-content": {

17

 "props": {

18

 "text": "Hello"

19

 }

20

 }

21

}

`

In the example above, the [Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rich-text/) block renders the `Click me` text that will trigger the modal content when clicked. The modal content, in turn, is defined by the `modal-layout` block. Based on the example above, the modal content triggered by the `Click me` Rich Text would be a `Hello` text.

### `modal-trigger` props

| Prop name            | Type   | Description                                                                                | Default value |
| -------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| trigger              | enum   | Defines whether the modal content should be triggered by user click (click), when the page is fully loaded (load), or when the page is fully loaded, but the modal will appear just once per session (load-session).                                                                                | click         |
| customPixelEventId   | string | Store event ID that triggers the modal-trigger block (hence triggering the opening of modal-layout blocks on the interface as well).                                                                                | undefined     |
| customPixelEventName | string | Store event name that triggers the modal-trigger block (hence triggering the opening of modal-layout blocks on the interface as well). Some event examples are 'addToCart' and 'removeFromCart'. Note that using this prop will make the associated modal-layout open in **every** event with the specified name if no customPixelEventId is set. | undefined     |

### `modal-layout` props

| Prop name            | Type    | Description                                                                                | Default value |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| scroll               | enum    | Defines how users should scroll the modal. Possible values are: body (users can scroll the whole modal by normally scrolling the page) and content (users can scroll the modal _content_ when hovering over it).                                                                                | content       |
| blockClass           | string  | Unique block ID to be used in [CSS customizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).                                                                                | undefined     |
| disableEscapeKeyDown | boolean | Defines whether the modal should be closed when pressing the Esc key (true) or not (false).                                                                                | false         |
| fullScreen           | boolean | Defines whether the modal should fill the whole screen (true) or not (false). This prop is responsive, i.e., it adapts to the device breakpoints.                                                                                | false         |
| backdrop             | enum    | Defines whether the modal will have a clickable backdrop (clickable) or no backdrop at all (none). This prop is responsive, i.e., it adapts to the device breakpoints.                                                                                | clickable     |
| customPixelEventId   | string  | Store event ID that triggers the modal-layout block (hence triggering the closing of modal-layout blocks on the interface as well).                                                                                | undefined     |
| customPixelEventName | string  | Store event name that triggers the modal-layout block (hence triggering the closing of modal-layout blocks on the interface as well). Some event examples are 'addToCart' and 'removeFromCart'. Note that using this prop will make the associated modal-layout close in **every** event with the specified name if no customPixelEventId is set. | undefined     |

### `modal-header` props

| Prop name       | Type    | Description                                                                                | Default value |
| --------------- | ------- | --------------------------------------------------------------------------------------------------- | ------------- |
| showCloseButton | boolean | Defines whether the close icon button should be rendered in the modal header (true) or not (false). | true          |
| iconCloseSize   | number  | Size (in pixels) of the close icon button in the modal header.                                      | 32            |

### `modal-actions.close` props

| Prop name | Type   | Description                                                                                | Default value                                                                                |
| --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| label     | string | Defines the text to be rendered in the close button. The default value of this prop depends on the store's default language, which is set according to the website [binding](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-binding--4NcN3NJd0IeYccgWCI8O2W?locale=en). | Cancel, Cancelar, or Cancelar for stores whose default language is, respectively, English, Spanish, or Portuguese. |

## Customization

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

| CSS handles          |
| -------------------- |
| modal                |
| backdropContainer    |
| backdrop             |
| closeButtonContainer |
| closeButton          |
| container            |
| contentContainer     |
| headerContainer      |
| headerContent        |
| paper                |
| topRow               |
| triggerContainer     |

[Flex Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.flex-layout)[Overlay LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.overlay-layout)

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.modal-layout/docs/apps/vtex.modal-layout%23configuration)

[modal-trigger props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.modal-layout%23modal-trigger-props)[modal-layout props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.modal-layout%23modal-layout-props)[modal-header props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.modal-layout%23modal-header-props)[modal-actions.close props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout/docs/apps/vtex.modal-layout%23modal-actionsclose-props)

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Product Summary Shelf

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

Version: 2.91.0

Latest version: 2.91.0

The Product Summary Shelf is the main block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary). It includes the child blocks required to display the Product Summary component in your store.

![{"base64":"  ","img":{"width":2852,"height":1550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":543765,"url":"https://user-images.githubusercontent.com/40380674/96649443-7d21d480-1307-11eb-9100-534fa9e70ca6.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/40380674/96649443-7d21d480-1307-11eb-9100-534fa9e70ca6.png)

)

## Configuration

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

`1

 dependencies: {

2

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

3

 }

`

1. Add the `product-summary.shelf` block as a child of the [list-context.product-list block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarylist%23product-list-block):

`1

 "list-context.product-list": {

2

+ "blocks": ["product-summary.shelf"]

3

 },

`

1. Declare the `product-summary.shelf` block, passing the desired blocks exported by the Product Summary app to build your Product Summary component. For example:

`1

{

2

+ "product-summary.shelf": {

3

+ "children": [

4

+ "product-summary-image",

5

+ "product-summary-name",

6

+ "product-rating-inline",

7

+ "product-summary-space",

8

+ "product-summary-price",

9

+ "product-summary-buy-button"

10

+ ]

11

+ }

12

}

`

> Remember to define the other Product Summary blocks in your theme, otherwise the component will not be displayed.

| Prop name              | Type    | Description                                                                                | Default value                 |
| ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| priceBehavior          | enum    | Determines whether the component should fetch the most up-to-date price (async) or (default). Remember to configure the [Search Result](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/content-blocks/vtex.search-result@3.79.1/%23configuration)'s simulationBehavior prop to skip and use the Product Price [product-price-suspense](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/product-price/blob/master/docs/README.md) block to render a loading spinner while the price information is being fetched. | default                       |
| trackListName          | boolean | Determines whether the component should send the list name to the product page when the product summary is clicked. Disabling it will prevent the productDetail GTM event sent on the PDP to identify from which list the user navigated.                                                                                | true                          |
| sponsoredBadgeLabel    | String  | The text of the "Sponsored" tag, if applicable.                                                                                | "store/sponsored-badge.label" |
| sponsoredBadgePosition | enum    | The position of the "Sponsored" tag, if applicable. Possible values are titleTop, containerTopLeft and none.                                                                                | "containerTopLeft"            |

## Customization

The Product Summary Shelf merely establishes the block structure to render the Product Summary component. Therefore, this block does not have CSS Handles for its specific customization.

Instead, you should use its child block Handles.

See also

[Vtex.product SummaryVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryshelf/docs/apps/vtex.product-summary)[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-summary-productsummaryshelf/docs/apps/vtex.product-summary/ProductSummaryShelf%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryshelf/docs/apps/vtex.product-summary/ProductSummaryShelf%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 getting started 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/getting-started/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/api-usage)

---

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

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/catalog-overview)

[Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/marketplace-overview)

[Orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/orders-overview)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/checkout-overview)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/payments-overview)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/fulfillment)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/search-overview)

[Pricing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/pricing-overview)

[Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/promotions-overview)

[Subscriptions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/subscriptions)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/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/getting-started/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/api-usage)

---

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

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/catalog-overview)

[Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/marketplace-overview)

[Orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/orders-overview)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/checkout-overview)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/payments-overview)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/fulfillment)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/search-overview)

[Pricing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/pricing-overview)

[Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/promotions-overview)

[Subscriptions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/subscriptions)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/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/getting-started/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

Getting started with VTEX Core Commerce APIs

Discover the features and capabilities of VTEX Core Commerce APIs.

VTEX is a comprehensive headless commerce platform, designed to deliver flexibility and scalability for diverse ecommerce operations. This guide introduces VTEX Core Services and provides essential information to help developers integrate and extend the platform’s features.

> Please note that you are in our Developer Portal. For business-oriented content, visit our [Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/).

## Platform overview

VTEX’s modular architecture ensures security, data privacy, and composability while providing robust developer tools. This architecture facilitates integration with third-party systems and allows extensive customization to meet diverse business needs.

To learn more about VTEX's platform capabilities, see the [VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-platform-overview) documentation.

## VTEX REST APIs

VTEX REST APIs provide the foundation for custom integrations, enabling third-party connections and unifying data for a simplified commerce experience.

* [List of REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/getting-started-list-of-rest-apis)
* [Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/getting-started-authentication)
* [Making your first request](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/getting-started-making-your-first-request)

At the core of VTEX are microservices, each designed to provide specific ecommerce functionalities and targeted capabilities. The following image offers an overview of VTEX Core Services covered in our API Guides and Reference:

![{"base64":"  ","img":{"width":1462,"height":872,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":108965,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/refs/heads/main/docs/guides/Getting-Started/getting-started/getting-started.png"}}](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/blob/main/docs/guides/Getting-Started/getting-started/getting-started.png?raw=true)

[ CatalogManage all aspects of product information, including categories, brands, SKUs, and specifications.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/catalog-overview) [ CheckoutAccess and manage checkout cart data to enhance the purchasing experience.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checkout-overview) [ OrdersReceive, process, and manage every order through the VTEX Orders API.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orders-overview) [FulfillmentCoordinate store logistics, including warehouses, pickup points, carriers, shipping rates, and inventory updates for each SKU.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/fulfillment) [ PaymentsAccess payment data and process transactions within the VTEX ecosystem.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-overview) [ PromotionsBoost sales by creating and managing promotions and coupons for your store.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/promotions-overview) [ PricingCreate, read, and edit prices for each SKU, sales channel, or price table.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pricing-overview) [ Account ManagementManage users, roles, hosts, AppKeys, and AppTokens within the VTEX platform.](https://read.calvincode.net/reader?url=https://help.vtex.com/category/account-management--2d48l0t9GweqoGkWCg2IQU) [ SearchSearch and sort products in the catalog using full-text, category, and brand search terms. Retrieve product information to create custom searches and product shelves.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-overview) [SubscriptionsManage store subscription rules to optimize revenue and reduce bounce rate and churn.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/subscriptions)

Contributors

5

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/_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/getting-started/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F47991446%3Fv%3D4%26w=64%26q=75)](https://github.com/PedroAntunesCosta)

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

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

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/Getting-Started/getting-started/getting-started.md)

[Best practices for avoiding rate limit errors« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started//docs/guides/best-practices-for-avoiding-rate-limit-errors)[CatalogNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started//docs/guides/catalog-overview)

Contributors

5

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/_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/getting-started/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F47991446%3Fv%3D4%26w=64%26q=75)](https://github.com/PedroAntunesCosta)

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

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

ON THIS PAGE

[Platform overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23platform-overview)

[VTEX REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23vtex-rest-apis)

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23catalog)[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23checkout)[Orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23orders)[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23fulfillment)[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23payments)[Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23promotions)[Pricing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23pricing)[Account Management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23account-management)[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23search)[Subscriptions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23subscriptions)

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/Getting-Started/getting-started/getting-started.md)

Copy page

On this page

ON THIS PAGE

[Platform overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23platform-overview)

[VTEX REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23vtex-rest-apis)

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23catalog)[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23checkout)[Orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23orders)[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23fulfillment)[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23payments)[Promotions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23promotions)[Pricing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23pricing)[Account Management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23account-management)[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23search)[Subscriptions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started/docs/guides/getting-started%23subscriptions)

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 store framework building pages 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/store-framework-building-pages/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/faststore)

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/getting-started-3)

Concepts

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

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-building-a-product-details-page)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

[Creating a Black Friday page from template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

[Creating a custom search results page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)

[Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-creating-a-new-custom-page)

[Customizing the Header and Footer blocks by page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-dealing-with-events)

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

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-managing-performance)

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

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/faststore)

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/getting-started-3)

Concepts

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

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-building-a-product-details-page)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

[Creating a Black Friday page from template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

[Creating a custom search results page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)

[Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-creating-a-new-custom-page)

[Customizing the Header and Footer blocks by page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-dealing-with-events)

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

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-managing-performance)

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

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/storefront-best-practices)

---

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

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

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

Building pages

Discover how to leverage Store Framework to build various types of pages tailored to your business needs.

Store Framework streamlines page creation by offering a set of pre-built components and [development tools](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/developer-experience%23developer-tools). These resources simplify building and customizing different page types, such as product details pages, promotional layouts, and custom pages.

This section covers a range of page-building scenarios, and each guide focuses on practical implementation, ensuring you can effectively develop pages that meet your business needs.

## Before you begin

### Develop your Store Theme

Make sure your store has a [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) developed following the [Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) tutorial.

### Check the builders

Check if the builders are properly installed in your Store Theme. To use builders, your account must have at least version `vtex.builder-hub@0.293.4` installed. Also, you need to specify them in the app's `manifest.json` file. Learn more in [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders).

Make sure the [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder) is configured, as it enables the development of Store Framework storefronts.

### Learn about VTEX IO apps

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

## Essential concepts

To better understand how to build your store pages, you should understand the concepts of **components** and **templates**.

Components are building blocks created using the [VTEX IO development platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) and [React](https://read.calvincode.net/reader?url=https://react.dev/) technology, which are used to create storefronts and admin apps.

Learn more in the [Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-using-components) guide.

A template refers to the structural layout of your site pages. Templates define the components for various pages, such as the home, product, and search results pages, by declaring `json` blocks that render these components.

Learn more in the [Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-configuringtemplates) guide.

## Guides in this section

[Building a product details pageDiscover how to create a product details page for your store.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page)[Building a search results page with multiple layoutsLearn how to create search result pages leveraging our VTEX IO apps.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)[Creating a Black Friday page from templateExplore our templates to create promotional pages.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)[Creating a custom search results pageLearn how to customize your search results page and enhance user interaction.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)[Creating a new custom pageUnderstand the process of building a custom page that meets specific business needs.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-new-custom-page)[Customizing the Header and Footer blocks by pageDiscover how to optimize your site’s navigation by customizing header and footer blocks by page.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)[Creating an institutional page with Content typesLearn how to create an institutional page using various content types.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1)

Contributors

2

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/store-framework-building-pages.md)

[Slots« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages//docs/guides/vtex-io-documentation-slots)[Building a Product Details PageNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages//docs/guides/vtex-io-documentation-building-a-product-details-page)

Contributors

2

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

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23check-the-builders)[Learn about VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23learn-about-vtex-io-apps)

[Essential concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23essential-concepts)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23guides-in-this-section)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/store-framework-building-pages.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23check-the-builders)[Learn about VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23learn-about-vtex-io-apps)

[Essential concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23essential-concepts)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages/docs/guides/store-framework-building-pages%23guides-in-this-section)

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 master data 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/master-data/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

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

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

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

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/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/master-data/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

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

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

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

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/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/master-data/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

Master Data

Master Data is a native key-document database with a powerful search engine to enable users to store, search, expand and personalize their data. Master Data is a distributed database solution with low latency access, which enables the implementation of stores all around the world. To enable this level of access and other features, Master Data has some requirements on how it works, which are explained by some of the articles of this section.

## What you will find in this section?

The table below shows each subsection with a small description of their respective contents.

| Subsection                                            | Description                                              |
| ----------------------------------------------------- | -------------------------------------------------------- |
| [How it works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/docs/guides/master-data-how-it-works) | Fundamentals of Master Data.                             |
| [Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/docs/guides/master-data-v2-guides)          | Master Data tutorials for different purposes.            |
| [Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/docs/guides/getting-started-1)     | Basic how-to guides to get you started with Master Data. |

Contributors

1

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

[Checkout error codes« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data//docs/guides/checkout-error-codes)[Understanding Master DataNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data//docs/guides/understanding-master-data)

Contributors

1

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

[What you will find in this section?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/docs/guides/master-data%23what-you-will-find-in-this-section)

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.md)

Copy page

On this page

ON THIS PAGE

[What you will find in this section?](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data/docs/guides/master-data%23what-you-will-find-in-this-section)

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