Since you're already familiar with Store Framework, you know that we use blocks, like shelf and sku-selector, to create a VTEX IO store. In this step, you're going to create a block that is going to be used in your store's home page theme.

1. In the local template cloned, open up the Countdown.tsx file. You will see that it contains a template implementation of a React component, which is an empty div, as shown below:

   
   

   _17

   //react/Countdown.tsx

   _17

   import React from 'react'

   _17

   _17

   interface CountdownProps {}

   _17

   _17

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {

   _17

   return <div></div>

   _17

   }

   _17

   _17

   Countdown.schema = {

   _17

   title: 'editor.countdown.title',

   _17

   description: 'editor.countdown.description',

   _17

   type: 'object',

   _17

   properties: {},

   _17

   }

   _17

   _17

   export default Countdown

   
   

   Some things to pay attention:

   • The typings for the component props are defined in here:

     
     

     _10

     interface CountdownProps {}

     
     

   • This schema refers to the content that it's shown in the Site Editor:

     
     

     _10

     Countdown.schema = {

     _10

     title: 'editor.countdown.title',

     _10

     description: 'editor.countdown.description',

     _10

     type: 'object',

     _10

     properties: {},

     _10

     }

     
     

   In order for your block to accept user customizations, you need to export a schema in the React component responsible for the block using JSON schema. This will, automatically, generate a form in Site Editor linked to the block that you're developing.

2. Now, let's add a h1 tag inside the component.

   
   

   _10

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {

   _10

   - return <div></div>

   _10

   + return (

   _10

   + <div>

   _10

   + <h1>Countdown Test</h1>

   _10

   + </div>

   _10

   + )

   _10

   }

   
   

3. Now, in order to see the block that you've just created, it's necessary for you to declare the block that the app defines in a theme.

   Which theme should I use?

   In case of already having a theme from the previous courses, you can use it. However, if you do not have one, you can use vtex.store-theme, which can be cloned by running this command in your terminal.

   
   

   _10

   git clone https://github.com/vtex-apps/store-theme.git

   
   

   Note: It can be cloned in a folder of your preference, but not inside the app's directory that you're developing.

   Now, to avoid conflicts, go to your terminal and unlink any theme or apps you have linked

   
   

   _10

   vtex unlink --all

   
   

   With both repositories ready to go, one need to link both, in two different terminals, using the following command:

   
   

   _10

   vtex link

   
   

   Remember to use your own workspace!

4. With both links active (theme and custom block), let's add the block into the theme. To do that, it's necessary to add it in the theme's dependencies:

   
   

   _10

   {

   _10

   ...

   _10

   "dependencies": {

   _10

   ...

   _10

   + "vtex.countdown": "0.x",

   _10

   ...

   _10

   },

   _10

   ...

   _10

   }

   
   

5. And lastly, we do want to add the block to the store, in order for it to be seen. Inside the file store-theme/store/blocks/home/home.jsonc, declare countdown block:

   
   

   _10

   {

   _10

   "store.home": {

   _10

   "blocks": [

   _10

   + "countdown",

   _10

   ...

   _10

   ]

   _10

   ...

   _10

   }

   _10

   ...

   _10

   }

   
   

The expected result is to find a h1 in the top of the store, you can see it below:

In case of adding the block as the last one on the store.home, you're going to see it in the bottom of the page.