import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Customization/Adding Components to your theme" />

# How to
Theme page templates are normal HTML files. See our online help for more information about the theme structure.

To add a component to a page template, add a component HTML tag like this:

```jsx
    <component name="ImageBanner" id="ImageBanner"></component>
```
| Props | Description |
| name | Name of the exported component, as shown in the index.js |
| :-- | :-: |
| id | A choosen unique identifier accross all pages to identify the component. |

## Use the Storefront Builder visual editor

To use the WYSIWYG editor, place the component on a supported page template so that the editor can detect it. These are the pages that the editor currently supports:

* content/pages/home/home.html
* content/pages/listing/listing.html
* content/pages/profile/profile.html
* content/pages/profile/profile-editions.html

You can add components to any theme template file (layout, macros, or pages) and it will be rendered properly, but WYSIWYG capabilities are restricted to the pages above.
