Tutorial: How to use a different collection banner image

We have an article on how to remove the collection banner from the page while still keeping the image to use on the homepage for a Collection list. That method uses an alternate template which can be assigned to one or more collections. In this tutorial we will create a collection template that removes the image and inserts a new banner section. This will allow you to display a different image on the homepage Collection list and still have a banner on your collection page. 

This alternate template is designed to apply for one collection. If you have many collections, additional versions of this template would need to be created. I would recommend recommend using the other tutorial (link at the bottom) if you're managing many collections. This method can be used multiple times if you create multiple templates. More information at the end of the article. 


Create a new template

Open your Code Editor:


In the Templates folder, choose Add a new template

Choose collection in the first drop-down (1) and call the template custom (2):

Use the Create template button to complete.

Erase the default code that's generated and replace with:

{% section 'collection-custom' %}
{% section 'collection-no-banner' %}

Save the file.


Create a new section file

In the Sections folder, choose Add a new section

Call it collection-custom

Use the Create section button to complete.

Erase all the default code that's generated:

Replace with all the code from this file:


Save the file.


Create a another section file: collection-no-banner

Note: If you've used the other tutorial I mentioned at the start, then you will already have this section file. If you haven't, then create the following section which is needed:

In the Sections folder, choose Add a new section

Call it collection-no-banner

Press the Create section button to complete. 

Erase all the default code that's generated:

  Replace with all the code from this file:


Save the file. 


Choose the new template in your collections admin

Open your Collections editor:


Choose the collection that you'll be applying the custom template to. Below the Collection image, change the template to collection.custom:

If you preview the collection now, you'll see the new Image with text overlay banner-style section:


Customize the image

Open your Theme Editor:


Navigate to the collection you've applied the new template to. This step is important, as on you can only change the image in the Theme Editor once you navigate to that collection.

You will now see the new Banner section on the left sections panel, choose that to customize the image options:

The Banner options are the same as your homepage Image with text overlay section:

You can customize text options as well for the title:

The original Collection image in your Collection admin will still be used for the homepage Collection list:

Final Notes

If you use this template with another collection, the same banner image and text will appear. To have a custom banner for another collection, you can create a different template file like collection-custom-2 and a new section file like collection-custom-2. The collection-no-banner file does not have to recreated, it's used when you have a Collection image set but won't display that image. The new template will also need to be changed, the first line will be: {% section 'collection-custom-2' %}. 


{% section 'collection-custom-2' %}
{% section 'collection-no-banner' %}

You can use the same code from Step 2, just give the file a different name. 

Still need help? Contact Us Contact Us