Header images are often used on Collection pages in Shopify as a bit of a preview of what is to come. Your collection page is often overlooked as far as styling, but shouldn’t be, considering how frequently a user has to pass through a collection page like this to make a sale. It is important to take this collection page into consideration when building your website, and more importantly to keep it dynamic as people shop. In this article, we will discuss a trick that will help you change your collection header image based on what tag the user is viewing.

These collection header images are usually taken from the collection’s administration, from the Collection image section. If we use this strategy and we want to display the products that have a specific tag in a collection, we can open an address like:

https://your-shop.myshopify.com/collections/your-collection/your-tag

Generally speaking, if we display the collection image in the header, all the tag’s addresses will have the same header image. What if we want to display different images for each tag so that the view is more custom?

For this, we can add some blocks in the collection’s template, so that those blocks can store the titles and the images for the tag’s pages. We want to have customized titles and images for these pages and we want to administer them from the same place in Shopify Customize to make things simpler. In order to do this, these blocks will have one more text field where we store the tag for which the title and image are set.

After these blocks are created in the collection’s template administration, we have to code the header, so that for the tags pages it loads the information from these blocks. 

First, we check if the blocks exist, and if this is true, we go through each block and compare the tag field with the tag in the URL. When the tag is found, we display the image and title associated with it.

The code looks something like this:

{% if section.blocks.size > 0 %}
 {% for block in section.blocks %}
   {% for tag in current_tags %}
     {% assign lowerTag = tag | downcase %}
     {% if lowerTag == block.settings.tag %}
         {% if block.settings.title != blank %}
           {%- assign collectionTitle = block.settings.title -%}
         {% endif %}
         {% if block.settings.tag_image != blank %}
           {%- assign collectionImage = block.settings.tag_image -%}
         {% endif %}
     {% endif %}
   {% endfor %}
 {% endfor %}
{% endif %}

Where collectionTitle  and collectionImage  are the customized values for title and image that we need to display. And that’s it! You’ve got yourself a customized header image for your collection pages based on the tag that is selected. Play around with this feature and take control of those collection pages! These collection pages are not just a boring stop on the way to a product, but a perfect opportunity to tie together your product pages and the rest of your brand aesthetic.