[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 components 3.178.5 Newsletter 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-components@3.178.5/Newsletter/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Newsletter/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-components@3.178.5/Newsletter/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-components@3.178.5/Newsletter/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-components@3.178.5/Newsletter/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-components@3.178.5/Newsletter/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-components@3.178.5/Newsletter/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Newsletter

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

Version: 3.178.5

Latest version: 3.178.5

![{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red)

> Warning
>
> **The Newsletter block has been deprecated in favor of the [Newsletter app](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-newsletter/).** Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Specification's blocks in order to keep up with the component's evolution.

The `newsletter` block displays a newsletter form.

## 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": "3.x"

3

 }

`

1. Add the `newsletter` block to any template of your choice. For example:

`1

 "store.home": {

2

 "children": [

3

+ "newsletter",

4

 ]

5

 },

`

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

### Props

| Prop name   | Type    | Description                              | Default value                                 |
| ----------- | ------- | ---------------------------------------- | --------------------------------------------- |
| hideLabel   | Boolean | Hide label.                              | false                                         |
| label       | String  | Label of the form used by the component. | Subscribe to our newsletter (translated text) |
| placeholder | String  | Placeholder of the email input.          | Enter your email address (translated text)    |
| submit      | String  | Label of the submit button.              | Sign up (translated text)                     |

## 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/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles       |
| ----------------- |
| buttonContainer   |
| confirmation      |
| confirmationText  |
| confirmationTitle |
| container         |
| error             |
| form              |
| inputGroup        |
| label             |
| newsletter        |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Newsletter/docs/apps/vtex.store-components)[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-components@3.178.5/Newsletter/docs/apps/vtex.store-components@3.178.5/Newsletter%23configuration)

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

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

Was this helpful?

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


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

[User] How do I use the VTEX checkout summary 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.checkout-summary/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Summary

Official extension

Version: 0.23.0

Latest version: 0.23.0

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

The Summary block displays the order totalizers and allows the user to add coupon codes. Currently, the Summary block only works out of the box within the [Minicart](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/minicart) and the [Checkout Cart](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/checkout-cart).

![{"base64":"  ","img":{"width":1101,"height":941,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":127273,"url":"https://user-images.githubusercontent.com/8902498/71037159-eb04da80-20fd-11ea-983e-ce49d2ca27c9.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/8902498/71037159-eb04da80-20fd-11ea-983e-ce49d2ca27c9.png)

Compact version:

![{"base64":"  ","img":{"width":1319,"height":944,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":327436,"url":"https://user-images.githubusercontent.com/8902498/71039765-b7c54a00-2103-11ea-9e38-32fc9eb174ba.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/8902498/71039765-b7c54a00-2103-11ea-9e38-32fc9eb174ba.png)

## Configuration

1. Add the Summary app to your theme's dependencies in `manifest.json`. For example:

`1

{

2

 "dependencies": {

3

 "vtex.checkout-summary": "0.x"

4

 }

5

}

`

1. Add the `checkout-summary.compact` block to the `minicart-summary` block of the Minicart or the `checkout-summary` block to the `summary-wrapper` block of the Checkout Cart. For example:

`1

{

2

 "minicart-summary#example": {

3

 "blocks": ["checkout-summary.compact"]

4

 }

5

}

`

### Advanced Customization

The `checkout-summary` block is made up of other smaller blocks. Currently, its default implementation is as follows:

`1

{

2

 "checkout-summary": {

3

 "children": ["flex-layout.row#summary-coupon", "summary-totalizers"]

4

 },

5

 "flex-layout.row#summary-coupon": {

6

 "children": ["summary-coupon"],

7

 "props": {

8

 "marginBottom": 6

9

 }

10

 },

11

 "summary-coupon": {

12

 "blocks": ["coupon"]

13

 }

14

}

`

By default implementation we mean that whenever you use `checkout-summary` in your store you're actually using the `json` above behind the scenes.

Therefore, in order to customize the Checkout Summary configuration, you can simply use the default implementation in your code and change it as you wish. For more information on which props you need to pass to the Summary component, [see below](#components).

This app exports all of the following blocks. You can see more detailed information of the`checkout-summary`, `checkout-summary.compact`, and `summary-totalizers` blocks in the [Components](#components) section.

`1

{

2

 "checkout-summary": {

3

 "props": {

4

 "title": "Order Summary"

5

 }

6

 },

7

 "checkout-summary.compact": {

8

 "props": {

9

 "totalizersToShow": ["Items"]

10

 }

11

 },

12

 "summary-totalizers": {

13

 "props": {

14

 "showTotal": true,

15

 "showDeliveryTotal": true,

16

 "showOriginalTotal": false

17

 }

18

 },

19

 "summary-coupon": {

20

 // this block doesn't have any props

21

 },

22

 "summary-installments": {

23

 "props": {

24

 "message": "Up to {installmentsNumber}x {installmentValue}",

25

 "markers": []

26

 }

27

 }

28

}

`

Additionally, you can also include a [Drawer](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/content-blocks/vtex.store-drawer) inside the `checkout-summary`.

Notice the following: the block declared as children of the `drawer-trigger` block will appear alongside the Summary title.

`1

{

2

 "checkout-summary": {

3

 "blocks": ["drawer#my-drawer"],

4

 "children": ["flex-layout.row#summary-coupon", "summary-totalizers"]

5

 },

6

 "drawer#my-drawer": {

7

 "blocks": ["drawer-trigger#my-trigger"]

8

 },

9

 "drawer-trigger#my-trigger": {

10

 "children": [

11

 // whatever you put inside here will

12

 // appear alongside the summary title

13

 ]

14

 }

15

}

`

## Components

### SummaryTotalizers

The component rendered when the `summary-totalizers` block is used.

#### Props

| Prop name         | Type    | Default | Description                                                                                |
| ----------------- | ------- | ------- | ------------------------------------------------------------------------------------------------ |
| showTotal         | boolean | true    | Whether to display the overall order total                                                       |
| showDeliveryTotal | boolean | true    | Whether to display the shipping/delivery total                                                   |
| showOriginalTotal | boolean | false   | Whether to display the original items value (sum of item list prices) next to the items subtotal |

### SummarySmall

The component rendered when used the `checkout-summary.compact` block.

#### Props

| Prop name                                          | Type   | Default           |
| -------------------------------------------------- | ------ | ----------------- |
| [totalizers](#summarysmall-totalizers)             | array  | undefined         |
| [totalizersToShow](#summarysmall-totalizersToShow) | array  | \['Items'\]       |
| [total](#summarysmall-total)                       | number | undefined         |
| [totalCalculation](#summarysmall-totalCalculation) | enum   | visibleTotalizers |

##### SummarySmall totalizers

`Array<{ id: string; value: number | null; name: string }>`

Same as the [Summary totalizers](#summary-totalizers) prop.

##### SummarySmall total

Same as the [Summary total](#summary-total) prop.

##### SummarySmall totalCalculation

Controls how the `Total` shown in the bottom of the summary is calculated. Possible values are: `visibleTotalizers`, which means that the `Total` shown will only take into account visible totalizers (the ones included in the `totalizersToShow` array), and `allTotalizers`, which will take into account all totalizers from `orderForm`, even if they're not being displayed.

##### SummarySmall totalizersToShow

`string[]`

Id of the totalizers that should be displayed inside this component, e.g.:

`1

;[

2

 // Value of the subtotal

3

 'Items',

4

 // Delivery value

5

 'Shipping',

6

]

`

### SummaryInstallments

The component rendered when used the `summary-installments` block. Renders the product installments. If more than one option is available, the one with the biggest number of installments will be displayed.

#### Props

| Prop name  | Type       | Description                                                                                | Default value |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| markers    | \[string\] | IDs of your choosing to identify the block's rendered message and customize it using the admin's Site Editor. Learn how to use them accessing the documentation on [Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-the-markers-prop-to-customize-a-blocks-message). Notice the following: a block's message can also be customized in the Store Theme source code using the message prop. | \[\]          |
| blockClass | string     | Block ID of your choosing to be used in [CSS customization](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization%23using-the-blockclass-property).                                                                                | undefined     |
| message    | string     | Defines the block's default text i.e. the block message. You can also define which text message a block will render on the UI using the admin's Site Editor.                                                                                | undefined     |

#### Message variables

| Message variables      | Type    | Description                                                   |
| ---------------------- | ------- | ------------------------------------------------------------- |
| installmentsNumber     | string  | Number of installments.                                       |
| installmentValue       | string  | Value of each installment.                                    |
| installmentsTotalValue | string  | Total value of installments.                                  |
| interestRate           | string  | Interest rate.                                                |
| paymentSystemName      | string  | Payment System of the installments.                           |
| hasInterest            | boolean | Whether the installments have interest (true) or not (false). |

## 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              |
| ------------------------ |
| installments             |
| installmentsNumber       |
| installmentValue         |
| installmentsTotalValue   |
| interestRate             |
| paymentSystemName        |
| summaryTitle             |
| summaryContent           |
| summarySmallContent      |
| summarySmallDisclaimer   |
| summaryItemContainer     |
| summaryItemLabel         |
| summaryItemPrice         |
| summaryItemOriginalPrice |

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

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

[Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-summary/docs/apps/vtex.checkout-summary%23components)

[SummaryTotalizers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-summary/docs/apps/vtex.checkout-summary%23summarytotalizers)[SummarySmall](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-summary/docs/apps/vtex.checkout-summary%23summarysmall)[SummaryInstallments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-summary/docs/apps/vtex.checkout-summary%23summaryinstallments)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-summary/docs/apps/vtex.checkout-summary%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 faststore overrides getoverriddensection function in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-overview)

[Overriding native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-component-props)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-native-component)

[Overriding section styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-section-styles)

[\`getOverriddenSection\` function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function)

[Syncing components with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

[Migrating Overrides v1 to v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-migrating-v1-to-v2)

[Overriding native components and props (v1)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-components-and-props-v1)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-overview)

[Overriding native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-component-props)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-native-component)

[Overriding section styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-section-styles)

[\`getOverriddenSection\` function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function)

[Syncing components with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

[Migrating Overrides v1 to v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-migrating-v1-to-v2)

[Overriding native components and props (v1)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-components-and-props-v1)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-overview)

getOverriddenSection function

The `getOverriddenSection` function lets you customize sections in your FastStore project without altering its core components and behavior. Instead, it returns a new React component representing the customized section.

This allows the creation of multiple overrides based on native components, enabling precise adjustments to specific parts of a section without affecting the rest.

## Usage example

Imagine an Alert section with an icon. You want to make the icon bolder without changing anything else. `getOverriddenSection` allows you to target just the Icon component.

`1

import { getOverriddenSection } from '@faststore/core';

2

import { AlertSection } from '@faststore/core';

3

import styles from './simple-alert.module.scss'

4

5

const SimpleAlert = getOverriddenSection({

6

// Specify the original section to be overridden

7

Section: AlertSection,

8

// Add a class for potential styling (optional)

9

className: styles.simpleAlert,

10

// Define components to override within the section

11

components: {

12

 // Override the "Icon" component

13

 Icon: {

14

 // Change only the "props" of the Icon

15

 props: {

16

 // Set the "weight" prop to "bold"

17

 weight: "bold"

18

 }

19

 }

20

}

21

});

22

23

export default SimpleAlert;

`

## Instructions

Here's how you can use `getOverriddenSection` to customize sections within your FastStore project:

1. Import the `getOverriddenSection` from the `@faststore/core` package.
2. Import the native section from `@faststore/core`. In this example, we considered the `AlertSection`.
3. Define a new component using the `getOverriddenSection` function (e.g., `SimpleAlert`).
4. In the `Section` parameter of the `getOverriddenSection` function, specify the original section. Note that the `getOverriddenSection` uses the original `AlertSection` as the base for customization.
5. (Optional) Add a `className` for styling the section.
6. In the `components` parameter of the `getOverriddenSection` function, declare the components you wish to override (e.g., `Icon`).
7. Set the new props for the specified component. In this example, we overrode the weight prop to `bold` within the Icon's props.

> Additional props can be applied to the overridden section. Refer to the [List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections) to check the available props for each component.

## Parameters

### `override`

Define how to override the native section. This parameter can have the following properties:

| Properties | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Section    | React component representing the overridden section.                                                                                |
| components | An object containing overrides for specific components within the section. The keys of this object should match the component names used in the section, and the values should be objects defining overrides for those components. For more details on overrides, refer to [Overriding components props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-component-props) and [Overriding a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-native-component). |
| className  | Property that behaves similarly to [React's className](https://read.calvincode.net/reader?url=https://react.dev/reference/react-dom/components/common%23applying-css-styles).                                                                                |

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/overrides/getoverriddensection-function.mdx)

[Overriding section styles« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-section-styles)[Syncing components with the Headless CMSNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

Contributors

1

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

ON THIS PAGE

[Usage example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23usage-example)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23instructions)

[Parameters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23parameters)

[override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23override)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/overrides/getoverriddensection-function.mdx)

Copy page

On this page

ON THIS PAGE

[Usage example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23usage-example)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23instructions)

[Parameters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23parameters)

[override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-getoverriddensection-function/docs/guides/faststore/overrides-getoverriddensection-function%23override)

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 io documentation cms in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

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

---

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

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

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

Concepts

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

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

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

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

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

[Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/vtex-io-documentation-site-editor-schema-examples)

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

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

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/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/vtex-io-documentation-cms/docs/guides/store-framework-setting-up-cross-border-stores)

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

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

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

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

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

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

---

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

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

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

Concepts

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

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

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

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

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

[Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/vtex-io-documentation-site-editor-schema-examples)

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

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

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/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/vtex-io-documentation-cms/docs/guides/store-framework-setting-up-cross-border-stores)

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

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

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

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

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

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Working with Site Editor

Discover how Site Editor simplifies the customization of your Store Framework storefront.

[Site Editor](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/site-editor-overview) works as a Content Management System (CMS) designed for stores developed with [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework), reflecting the blocks defined in the [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) of the VTEX account.

Based on the source code, the Site Editor displays an editable version of the website's storefront, enabling non-technical users to manage content as desired and modify components and their behavior through a friendly interface.

In your VTEX Admin, go to **Storefront > Site Editor** to see the main available tools.

![{"base64":"  ","img":{"width":2878,"height":1436,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":703177,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-site-editor-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-site-editor-0.png)

Changes made in Site Editor are immediately reflected in the store, and every storefront block can have its properties changed there. For example, you can change the content of a rich text block and shelf properties, such as which collection is being shown, among other changes.

> Developers are responsible for creating components, defining the structure of the [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme), and ensuring seamless integration with Site Editor. This integration allows non-technical users to manage and update components easily, empowering store administrators to make changes to their storefronts without modifying the codebase.

Learn more in [Site Editor - Overview](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/site-editor-overview--299Dbeb9mFczUTyNQ9xPe1).

## 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 [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) guide.

### Check the builders

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

You must have at least the following builders configured:

* [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder): Enables the development of Store Framework storefronts.
* [react builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-react-builder): Used to develop apps with [React](https://read.calvincode.net/reader?url=https://react.dev/) when your project requires customized frontend solutions.

### Create the store pages

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

### Configure your components

Set up your components following the [Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-using-components) guides.

## Essential concepts

It is important to understand the concept of a Content Management System (CMS) to learn how to work with Site Editor.

A Content Management System (CMS) is a tool for creating, managing, and modifying website content. VTEX offers different CMS options based on the storefront technology used to develop your site. Store Framework uses Site Editor, Legacy CMS Portal uses [Layout](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/1oN446gRGcR2s70RvBCAmj), and FastStore leverages [VTEX Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview).

On VTEX, these tools allow you to manage the pages that make up your store website with the autonomy to create, organize, edit, and define the entire structure of folders, files, and components to create the storefront you want.

To learn more, see [CMS - Overview](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/6OCY6S9tqBXPD5mgpbBInC).

## Guides in this section

In this section, you will find the following guides.

[Integrating a frontend app with Site EditorDiscover how to integrate a frontend app with Site Editor.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)[Making a custom component available in Site EditorAllow component customization directly in Site Editor.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)[Site Editor schema examplesExplore practical schema examples for configuring custom components in Site Editor.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-site-editor-schema-examples)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/_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/vtex-io-documentation-cms/_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-working-with-site-editor.md)

[Using Flex Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms//docs/guides/vtex-io-documentation-using-flex-layout)[Integrating a frontend app with Site EditorNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms//docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/_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/vtex-io-documentation-cms/_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/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23check-the-builders)[Create the store pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23create-the-store-pages)[Configure your components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23configure-your-components)

[Essential concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23essential-concepts)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%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-working-with-site-editor.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23check-the-builders)[Create the store pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23create-the-store-pages)[Configure your components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23configure-your-components)

[Essential concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%23essential-concepts)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cms/docs/guides/store-framework-working-with-site-editor%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=)