# Create a theme extension

Theme extensions follow the same directory structure as theme. As themes, they have blocks, sass, page templates, ability to inject code in the head of the page, etc...

### How to create your theme extension from an existing code in a theme?

Just like creating a theme, inside the folder `integration` create a new folder for your theme extension

{% hint style="warning" %}
The folder name will be the unique key to identify your extension. Once websites start using it, **it will not be possible to change the folder name**. You can change the label displayed to the client, but not the name of the folder.
{% endhint %}

Folder structure is the same as for a theme.

```
my-extension-key/
├─ block/
├─ footer/
├─ header/
├─ list/
├─ lightbox/
├─ page/404.html
├─ partial/
├─ public/
├─ sass/
├─ screen/
├─ theme/
├─ README.md

```

We will provide you a blank template to create theme extension, that has basic features.

### Declare the folder as "an extension" (and not a theme)

Inside Testeur, in the configuration of your theme, you can choose if this a theme or an extension.

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Me01HGxPQXf6OtqkXja%2F-Me09F8ekcMLOcgwFhqY%2Ftype-extension.png?alt=media\&token=aebd1870-67be-4cd4-a553-0ebc73658bf2)

### Move the code from your theme to your extension

1 - identify from your current theme the elements that should be part of the theme extension. (which blocks, pages, etc..)

2 - Copy these elements from the theme to the extension (following the same syntaxe, same directories. For example, if you have a list "contact", copy the existing folder `list/contact` from your theme, to your folder extension

3 - In the BO, add the extension to your website.

For example, did you have code to add to the head of all pages? \
On your theme, this code was inside `integration/folder-key/theme/head.html`. \
This is exactly the same logic for a theme extension, you just have to copy the lines you want inside the file `theme/head.html` of the extension, and this is done.

You need sass variables? \
You just have to copy your existing files from your theme to the folder `sass` of you extension.

Testeur tool and development is **exactly the same as for a theme**. You will use the same syntax, the same folder directory structure, the same way to create blocks, etc...

#### Example - Migrate a work that was started as a branch on a theme

Let's imagine you started working on a feature inside the theme `my-theme`, on a branch `integration/my-branch` and you now want to move this code to an extension `my-extension`

Using git tools, do a diff between your branch and master, **to identify which files you need to copy (the files that are doing code for your feature)**

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-MgQvFRK8iqLzg25cnzb%2F-MgQvRxgNphGw-GM0m_u%2Fexample-extension.png?alt=media\&token=ba54c506-efad-47c1-9c21-00b57ec67ce4)

**For new files:**

you need to move these files from your theme, to the extension

You just have to copy them from the theme, to your extension.\
For example, there is a new file `my-theme/json/checkout-config.json` . Copy it to `my-extension/json/checkout-config.json` and it will be accessible in your extension.\
Same for all the new files that should be part of your extension.

**For edited files**

Yu can see on the diff that the file `my-theme/theme/bottom.html` was changed to add new lines (a hardcoded common Google Tag manager). Just copy these lines to the file `my-extension/theme/bottom.html`
