Add code to the head / end of body

You can add code to the head of ALL pages of the website, or you can add it only on specific templates

All pages - Add code to the head (or end of body)

Add your code inside the file theme/head.html or theme/bottom.html

This code will be on all pages of the website if the extension is activated.

Specific templates - Add code to the head / or end of body

If you need to add code to the head of the page, only on some page templates, you can do it by adding a file head.html or bottom.html in the configuration folder of the page.

Add code from a block template to the head

From a block, you can inject code in the head of the page using this syntax:

[[start-head-inject]]
<!--  inject content -->
[[stop-head-inject]]

This is helpful for example to preload hero image

Example - Preload hero image

Let's imagine we have a hero slider, and we want to preload the 1st image.

Inside my block hero-item.html

[[start-head-inject]]
    {if=" '[[loop_index]]' == '1' "}
        <link rel="preload" as="image" href="#$variable|slider-image$#"/>
    {/if}
 [[stop-head-inject]]

The condition on line 2 and 4 is here to preload only the first image of the slider.

This is a very simple version, without using the media attribute on the link tag (for example for a responsive image), or specifying srcset.