[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 4 declaring a theme block 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-4-declaring-a-theme-block/docs/guides)

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

App Development

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

---

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

---

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

---

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

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-getting-started)

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

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

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

---

Project structure

---

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

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

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

---

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

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/ab-tests)

---

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

---

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

---

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

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

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

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

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

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

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

---

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

App Development

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

---

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

---

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

---

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

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-getting-started)

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

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

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

---

Project structure

---

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

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

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

---

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

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/ab-tests)

---

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

---

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

---

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

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-getting-started)

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

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

3\. Declaring a theme block

Learn how to create a new theme block.

With the app template already copied, we will now create a new theme block. Follow the instructions below to create the new theme block.

## Understanding interfaces

An interface describes the shape of an object, including its properties and data types. This is crucial for ensuring type safety and preventing potential bugs.

In VTEX Store Framework, interfaces are used to link theme blocks to their corresponding React components. This way, interfaces provide a set of rules that dictate the behavior of theme blocks when rendering their React components and the available properties and methods.

For each theme block exported by your app, you should define a corresponding [interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-interface) that defines the props available to the React component.

The following table shows some possible keys that could be added to the block interface, as well as their respective descriptions:

| Key         | Description                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| component   | Name of the React component that the theme block will render.                                                                                |
| allowed     | List of other theme blocks that help build the desired React component. When declared, these blocks can be included as children to the block you developed in the Store Theme app.                                                                                |
| composition | Defines the rendering position of the children of the block that you are developing. Remember that when defining the composition key, you don't control the position of the block it defines but the position of the children of that block. Possible values for this key are blocks (the child blocks have a specific position in the interface based on the React component on which they are based) or children (the position of the child blocks depends exclusively on how they are declared in the theme). If no value is defined for the composition key, the platform default is blocks. |
| device      | Defines whether your theme block is designed for mobile or desktop devices. Possible values are mobile and desktop.                                                                                |
| required    | List of theme blocks that must be rendered in the interface to support the block rendering you are developing.                                                                                |
| around      | List of theme blocks that must be rendered in the interface around your new block for it to work correctly.                                                                                |
| before      | List of theme blocks that must be rendered in the interface before your block (above it) for it to work correctly. For example: header.                                                                                |
| after       | List of theme blocks that must be rendered in the interface after your block (below it) for it to work correctly. For example: footer.                                                                                |
| preview     | Defines the behavior of the page while the block is loading.                                                                                |
| render      | Defines the block rendering type. Possible values are lazy (the block is only rendered when a user interacts with it), server (the block is rendered from the server side), or client (the block is rendered from the client side.                                                                                |

The only mandatory key that needs to be declared in a block interface is `component`. You have to declare the other ones based on the desired scenario for your new theme block.

## Step 1 - Declaring an interface

To add new custom blocks to your storefront, you need to declare their interfaces in the `interfaces.json` file of your Store Theme app.

> The `interfaces.json` file is used by the `store` [Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders/) during the website building process.

For this example, we will create an interface for a basic block called `hello-world`. This block will render the React component defined in `HelloWorld.tsx`.

When following these steps, remember to replace the values with the ones that correspond to the actual scenario of your app based on the React component you are importing.

1. Open your app's code (previously called `react-app-template`) in the code editor.
2. In the `react` folder, create a new TypeScript file with the name of the desired React component. Following our example, we would have `HelloWorld.tsx`.
3. In the newly created file, add the sample code provided below:

`1

import React from 'react'

2

3

const HelloWorld = () => <div>Hello, World!</div>

4

5

export default HelloWorld

`

> Read the [React documentation](https://read.calvincode.net/reader?url=https://reactjs.org/docs/getting-started.html) and [Developing custom storefront components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components) documentation to better understand how React components work.

1. Create a new folder called `store` in the first level of your app folders.
2. In the `store` folder, add a new file called `interfaces.json`.
3. Declare the block interface in the `interfaces.json` file. For example:

`1

{

2

 "hello-world": {

3

 "component": "HelloWorld"

4

 }

5

}

`

Note that in the above structure, the first definition given by the interface is the name of your new theme block (`hello-world`). Within it, we declare an object containing the interface keys previously described.

In our example, we only used the `component` key to link the`hello-world` block to the React component that it will render (`HelloWorld`). Note that the value of the `component` key is `HelloWorld` — the file name that was previously created for the React component (`react/HelloWorld.tsx`).

> To learn more about structuring the `interfaces.json` file, check the code of native Store Framework apps, such as [Search Result](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-result/blob/master/store/interfaces.json) and [Header.](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-header/blob/master/store/interfaces.json) Remember that how we declare an interface depends directly on the behavior we want for the new block. That is why, as we study different apps and blocks, we understand more the possibilities for interfaces.

After saving your code changes, any user who installs your app will be ready to implement the new block.

Note that, if the app under development exports more than one theme block for rendering the React component, all the interfaces of these blocks must also be declared in the `interfaces.json` file, according to the above format.

### Declaring device-specific interfaces

You may want your app to export different blocks for rendering different components based on the store's _breakpoint_, that is, based on the device accessing it.

To do this, you have to create different blocks for each possible device and create interfaces for each one.

For example, you are developing the `hello-world` block and want to create mobile and desktop versions. You will have to create the `HelloWorld`,`HelloWorldMobile`, and `HelloWorldDesktop` components, and define interfaces for each, such as `hello-world`, `hello-world.mobile`, and `hello-world.desktop`.

The interface of the parent block, `hello-world`, has to contain only the `component` and `allowed` keys, with the `allowed` key declaring the `hello-world.mobile` and `hello-world.desktop` blocks.

The interfaces for the mobile and desktop blocks, in turn, have to declare the desired keys (e.g., `device`) to define the behavior of each block according to the device for which they were designed.

App examples that use different React components for different devices are [Header](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-header) and [Footer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-footer).

## Step 2 - Using your new theme block

We will now implement the new block you created in the Store Theme app.

If the VTEX account you are working on has the Store Theme app for Store Framework installed, follow the instructions below from step 2\. If your account does not yet have the Store Theme app installed, follow the instructions from step 1:

1. Read carefully [step 3 in the Building stores with Store Framework section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) and follow the steps detailed in the article. Once you are done, you will have implemented the standard theme for Store Framework and will be ready to test your new block.
2. Open the Store Theme app folder in your local files using the code editor of your choice.
3. In the Store Theme `manifest.json` file, add the app you are developing as a dependency in `dependencies`. For example:

`1

"dependencies": {

2

+ "{accountName}.{appName}": "{appVersion}",

3

 "vtex.store": "2.x",

4

 "vtex.store-header": "2.x",

5

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

6

 "vtex.store-footer": "2.x",

7

 "vtex.store-components": "3.x",

8

 ...

9

}

`

1. Add the new theme block (`hello-world` in our example) to one of the templates. For this walkthrough, we will add the `hello-world` block to the store's home page, in the `store.home` template:

`1

{

2

 "store.home": {

3

 "blocks": [

4

+ "hello-world"

5

 ]

6

 },

7

 ...

8

}

`

1. [Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) the store's theme to the VTEX IO platform to verify the results:

![{"base64":"  ","img":{"width":2194,"height":1531,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":622434,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-4-declaring-a-theme-block-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-4-declaring-a-theme-block-0.png)

1. Access your VTEX store using the `{workspaceName}-{accountName}.myvtex.com` format to see your new `hello-world` block being displayed in your development workspace:

![{"base64":"  ","img":{"width":1818,"height":1140,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57023,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-4-declaring-a-theme-block-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-4-declaring-a-theme-block-1.png)

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-4-declaring-a-theme-block.md)

[2\. Creating the new app« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block//docs/guides/vtex-io-documentation-3-creating-the-new-app)[4\. Defining stylesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block//docs/guides/vtex-io-documentation-5-defining-styles)

See also

[4\. Defining stylesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-5-defining-styles)

Contributors

1

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

ON THIS PAGE

[Understanding interfaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23understanding-interfaces)

[Step 1 - Declaring an interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23step-1-declaring-an-interface)

[Declaring device-specific interfaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23declaring-device-specific-interfaces)

[Step 2 - Using your new theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23step-2-using-your-new-theme-block)

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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-4-declaring-a-theme-block.md)

Copy page

On this page

ON THIS PAGE

[Understanding interfaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23understanding-interfaces)

[Step 1 - Declaring an interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23step-1-declaring-an-interface)

[Declaring device-specific interfaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23declaring-device-specific-interfaces)

[Step 2 - Using your new theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block/docs/guides/vtex-io-documentation-4-declaring-a-theme-block%23step-2-using-your-new-theme-block)

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

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

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

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

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

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

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

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

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

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/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-infrastructure/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

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

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

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

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

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

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

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

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

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/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-infrastructure/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

Master Data infrastructure

Learn how Master Data's core services (API, Worker, Storage, and Search Engine) ensure data consistency and efficient document management.

Master Data ensures businesses maintain consistent, reliable, and searchable information across their systems. This guide explains how its core services — API, Worker, Storage, and Search Engine — work together to manage large-scale data efficiently.

## Core services

A service is a program that performs automated tasks or responds to specific events, whether hardware-related or triggered by requests from other software. Master Data consists of four core services:

* **API:** Serves as the entry point for external systems to interact with Master Data.
* **Worker:** Manages backend processes, ensuring data consistency and enabling advanced operations.
* **Storage:** Serves as a central repository for storing documents securely.
* **Search engine:** Provides advanced search and aggregation capabilities.

### API

The API service acts as the main gateway for accessing and manipulating data in Master Data. It processes HTTP requests and routes them to the appropriate internal services. Its key features include:

* Endpoints for reading, writing, searching, and managing documents.
* Routing requests to internal services like [Storage](#storage) and [Search Engine](#search-engine).
* Ensuring secure communication between client applications and Master Data.

For detailed API endpoints, refer to:

* [Master Data V1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/masterdata-api)
* [Master Data V2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/master-data-api-v2)

> The API service does not process or store data directly. Instead, it routes requests to the appropriate services for execution.

### Worker

The Worker service automates backend processes to maintain data consistency and streamline operations. Its key features are:

* **Document indexing:** Sends documents to the [Search Engine](#search-engine) to keep search results up-to-date.
* **Trigger execution:** Automates tasks based on specific events, such as updating fields, notifying external systems, or sending customer emails.
* **Bulk data operations:** Supports large-scale data imports and exports in CSV format.

For example, when a customer updates their email address, the Worker service can automatically synchronize this change across multiple records and notify other systems.

### Storage

The Storage service functions as the central repository for Master Data, designed to store billions of documents securely and in a scalable way. Its key features are:

* **Document storage:** Securely stores documents, which can be retrieved via the Master Data API.
* **Account-specific access:** Ensures strict data isolation between different VTEX accounts.

### Search engine

The Search engine service enables efficient retrieval of documents through filtering, sorting, and aggregation. It indexes data from the Storage service, allowing users to perform advanced queries. Check out its key features:

* **Full-text search and filtering:** Retrieve relevant documents quickly using structured queries.
* **Pagination and scrolling:** Handle large data sets efficiently.

> Use the Search and Scroll APIs to retrieve large sets of indexed data from the Search Engine with advanced filtering and pagination capabilities. Learn more at [Extracting data from Master Data with search and scroll](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/extracting-data-from-master-data-with-search-and-scroll) and [Pagination in the Master Data API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pagination-in-the-master-data-api).

## Data consistency workflow

Master Data employs a synchronized workflow to ensure data consistency across all services:

1. **Storage update:** When a document is updated in Storage, a notification is triggered.
2. **Worker execution:** The Worker processes the notification, executes associated triggers, and forwards the updated document to the Search engine.
3. **Search engine update:** The Search engine indexes the document, making the latest version available for retrieval.

StorageWorkerSearch engineDocument updated (trigger notification)Process notificationExecute relevant triggersForward updated documentIndex documentMake latest version available for retrievalStorageWorkerSearch engine

For more details, see [Data consistency and synchronization in Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-consistency-and-synchronization-in-master-data).

Contributors

1

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

[Master Data components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure//docs/guides/master-data-components)[Master Data APINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure//docs/guides/master-data-api)

See also

[Masterdata APIAPI Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/api-reference/masterdata-api)[Master Data API V2API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/api-reference/master-data-api-v2)[Extracting data from Master Data with search and scrollGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/extracting-data-from-master-data-with-search-and-scroll)[Pagination in the Master Data APIGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/pagination-in-the-master-data-api)[Data consistency and synchronization in Master DataGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/data-consistency-and-synchronization-in-master-data)

Contributors

1

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

[Core services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23core-services)

[API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23api)[Worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23worker)[Storage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23storage)[Search engine](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23search-engine)

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

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/understanding-master-data/master-data-infrastructure.md)

Copy page

On this page

ON THIS PAGE

[Core services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23core-services)

[API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23api)[Worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23worker)[Storage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23storage)[Search engine](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-infrastructure/docs/guides/master-data-infrastructure%23search-engine)

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

On this page

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


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

[User] Provide a guide on guides faststore global tokens grid and layout in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/headless-cms-overview)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/sdk-overview)

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

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/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/global-tokens-grid-and-layout/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/global-tokens-grid-and-layout/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides)

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

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

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

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

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

---

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

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore)

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

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/headless-cms-overview)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/sdk-overview)

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

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/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/global-tokens-grid-and-layout/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/global-tokens-grid-and-layout/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/styling-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-overview)

Grid & Layout

`Padding`, `Container`, `Gaps` and `Breakpoints` definitions.

`Padding`, `Container`, `Gaps` and `Breakpoints` definitions.

## Padding

| Global Token       | Value               |
| ------------------ | ------------------- |
| \--fs-grid-padding | var(--fs-spacing-3) |

## Container

| Global Token         | Value               |
| -------------------- | ------------------- |
| \--fs-grid-max-width | var(--fs-spacing-3) |

## Gaps

| Global Token     | Value               |
| ---------------- | ------------------- |
| \--fs-grid-gap-0 | var(--fs-spacing-1) |
| \--fs-grid-gap-1 | var(--fs-spacing-2) |
| \--fs-grid-gap-2 | var(--fs-spacing-3) |
| \--fs-grid-gap-3 | var(--fs-spacing-4) |
| \--fs-grid-gap-4 | var(--fs-spacing-5) |

## Breakpoints

The following tokens are used as a mirror for the breakpoint system, and they can be used to create a component that has a width related to it (see [Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal%23design-tokens) `--fs-modal-max-width` as an example).

> We do not recommend to change theses tokens, if you want to override these sizing system, check the [Mixins & Breakpoints](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-mixins-breakpoints) page.

`1

$breakpoints: (

2

 "phone": 320px,

3

 "phonemid": 375px,

4

 "tablet": 768px,

5

 "notebook": 1280px,

6

 "desktop": 1440px,

7

);

`

| Global Token                   | Value                                |
| ------------------------------ | ------------------------------------ |
| \--fs-grid-breakpoint-phone    | #{map-get($breakpoints, "phone")}    |
| \--fs-grid-breakpoint-phonemid | #{map-get($breakpoints, "phonemid")} |
| \--fs-grid-breakpoint-tablet   | #{map-get($breakpoints, "tablet")}   |
| \--fs-grid-breakpoint-notebook | #{map-get($breakpoints, "notebook")} |
| \--fs-grid-breakpoint-desktop  | #{map-get($breakpoints, "desktop")}  |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/_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/styling/global-tokens/grid-and-layout.mdx)

[Colors« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-colors)[Interactive controlsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-interactive-controls)

Contributors

1

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

[Padding](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23padding)

[Container](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23container)

[Gaps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23gaps)

[Breakpoints](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23breakpoints)

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/styling/global-tokens/grid-and-layout.mdx)

Copy page

On this page

ON THIS PAGE

[Padding](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23padding)

[Container](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23container)

[Gaps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23gaps)

[Breakpoints](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-grid-and-layout/docs/guides/faststore/global-tokens-grid-and-layout%23breakpoints)

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