Skip to main content

Different header images for each page?

Hello, I would like to make it possible to have individual header images on each page of the site, whilst keeping the homepage header the same. I am not clear on what liquid statement would make this happen and where to place it. Any help would be much appreciated! Thank you.

Official response from

Hello Jacob,

Below I have pasted an example of what something like that would look like. This example uses the header image in the theme to call out different images depending on the page slug using liquid conditional statements. Edits where made to the layout.html file.

{% if page.slug == 'home' %} 
<a href="/"><img src="{{ site.header_image_url_960 }}"></a>
{% elsif page.slug == 'blog' %}
<a href="/"><img src="blogheader.png"></a>
{% else %}
<a href="/"><img src="restofsiteheader.png"></a>
{% endif %}


You can apply the same logic to your own theme, and just upload your homepage header under Websites > Settings > Header Image, which will display in your theme with {{ site.header_image_url_960 }}. 


Share this post

Showing 7 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.