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

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.

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.

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)

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