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

1. It is important that you are already familiar with VTEX Store Framework and fully understand what a block, store theme, and template are. If you are not familiar with these concepts or want to refresh them a little before working with the settings, check Build stores with Store Framework.

2. When creating a storefront component, follow the best practices regarding tooling, features, flexibility, scalability, performance, accessibility, internationalization, and styling, to be adopted when creating your storefront component. Check Developing custom storefront components for more information.

An interface basically works as an API (application programming interface) that defines the theme blocks’ behaviour following the React component that they render.

In the same way that an API uses parameters to define how the conversation with a server will take place, the interface uses what we call keys.

The interfaces, using their keys, define a block's behavior when implementing and rendering in a store theme.

This means that, for each theme block exported by your app, you will need to define an interface, linking the block to a React component of your choice.

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

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

We declare the interface of one or more blocks in the app's interfaces.json file, used by Store Builder to correctly build your website's front-end.

For this example, we will create an interface for a basic block called hello-world (based on the React HelloWorld component).

When following these steps, remember to replace the values with the ones that correspond to your app’s actual scenario, in accordance with the React component you are actually importing.

1. Open your app's code (previously called react-app-template) in your code editor.
2. In the react folder, create a new TypeScript file with the name of the desired React component. According to our example, we would have HelloWorld.tsx.
3. Once you are in the file, add the sample code below (replacing the values according to your scenario):

import { React } from 'react'

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

export default HelloWorld

Be sure to check out the React solution and Developing custom storefront components documentation to better understand how components work.

4. On the first level of your app's folders create a new folder called store.
5. In the store folder, add a new file called interfaces.json.
6. Declare the component's interface in the new file. For example:

{
 "hello-world": {
    "component": "HelloWorld"
  }
}

Notice 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 basic example, we only use the component key to link thehello-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).

Be sure to check code from native Store Framework apps to learn more about structuring the interfaces.json file, such as Search Result and Header. Remember that the way 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, your new block will be ready to be implemented by any user who installs your app.

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

You may want your app to export different blocks for rendering different components according to the store's breakpoint, in other words, according to the device that is accessing it.

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

For example, you are developing the hello-world block and want to create mobile and desktop versions for it. 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 parent block's hello-world interface has to contain only the component and allowed keys, the latter declaring the hello-world.mobile and hello-world.desktop blocks.

The interfaces for the last blocks, in turn, have to declare the desired keys to define the behavior of each block according to the device for which they were designed, such as the device key.

App examples that use different React components for different devices are Header and Footer.

We will now implement the new block you created.

If the VTEX account you are working on already has the Store Theme app for VTEX 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 Build stores with Store Framework section and follow the steps detailed in the article. Once you are done, you will have implemented the standard theme for the VTEX 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 front app you are developing as a dependency in dependencies. For example:

"dependencies": {
+   "yourVTEXAccountName.yourAppName": "0.x",
    "vtex.store": "2.x",
    "vtex.store-header": "2.x",
    "vtex.product-summary": "2.x",
    "vtex.store-footer": "2.x",
    "vtex.store-components": "3.x",
    ...
}

4. Then, 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:

{
  "store.home": { 
     "blocks": [
+       "hello-world"
     ]
  },
  ...
}

5. Link the store's theme with the VTEX IO platform to verify the results:

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