Frontend Development

Theme Header and Footer

The theme header sits at the top of your site. You can put whatever you want in your header to ensure that it can pixel-perfect match the rest of your web site (if you have one). It completely belongs to you.

Header And Footer Assets

All of the header/footer information rests in the following assets:

header.html : This is an HTML file that contain's your header's HTML. You can put whatever you want in this file with one exception: Don't put script tags in your header. Vanilla uses strict security headers on many of its pages that will block scripts to protect from XSS attacks. If you want to write some javascript there is a specific asset for that.
footer.html : This is an HTML file similar to the header.html , but for your footer.
styles.css : This is where your CSS header/footer CSS goes. Your CSS will only affect the header/footer because it is included within a shadow dom. This allows you to use whatever CSS classes you want without affecting the rest of the site.
javascript.js : Put all of your javascript here.

When using the theme editor, you will see tabs for each of these assets. When creating a file based theme, put these files in the /assets folder. The theming API has endpoints that specifically reference these assets too.

Example Footers

Here is a very basic footer with a copyright and a watermark logo.

Here is more complex example with columns of corporate and social links.

Accessing the Header & Footer through Javascript

The Header and Footer are semi-isolated from the rest of the page. While this makes styling easier, it makes executing javascript on your header and footer slightly more complicated.

Let's take an example. Let's say you have some call to action button in your header, and you wanted to react to it being clicked.

header.html

<header>
    <a href="/some/link">A Link!</a>
    <button type="button" id="my-call-to-action">Call to Action!</button>
</header>

If there was no isolation adding a click handler to your button would look like this:

not-working.js

var headerCTA = document.querySelector("#my-call-to-action");

headerCTA.addEventListener("click", function (e) {
    // Do something here.
});

This won't work though, due to the shadow DOM isolation. Instead we need to access the header's element first, then search inside of it. Instead 1 extra line of code is required.

working.js

var themeHeader = document.querySelector("#themeHeader");

// Alternatively if you wanted the footer
var themeFooter = document.querySelector("#themeFooter");

var headerCTA = themeHeader.shadowRoot.querySelector("#my-call-to-action");
headerCTA.addEventListener("click", function (e) {
    // Do something here.
});