Tutorial: How to remove the collection banner

In this tutorial, we will create an alternate collection template which will allow you to remove the banner for certain collection pages. The purpose is to still have a collection image in the collection settings but not display the image when viewing the collection in your shop. That allows you to feed the collection image to the homepage for the Collection list section module. 


Create a new collection template

Open the Code Editor:


In the Templates folder, choose Add a new template

Choose collection (1) for the first drop-down

Call the template no-banner (2) 

Press the Create template button to complete.

Change the default code from:

Change to:

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

Save the file.


Create a new section file

In the Sections folder, choose Add a new section

Call it collection-no-banner (1)

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 collection template

We will now move on from the Code Editor to the Collection setup. Open your Collections manager:


Choose the collection in which you'd like to use the new no-banner template. Then, in the Theme templates drop-down choose:  collection.no-banner

Save the collection settings.

Why can't I see that option in the drop-down?
The theme templates drop-down will only show collection.no-banner as an option if you're working out of a published theme. if you've created the new template and section file in a non-published theme, this option will not be available. Once you publish the theme, then return to the drop-down and the selection option will be available to use.

When the new template is used, it will hide both the Collection image and the title of the collection (1). The Collection Description (2) will not be hidden. 

If you'd like to have a title on your collection page, then add the title name in the Description area (2). Use and use the text format (3) to change that text to a Heading 1 style.

Select the text (4) and then choose Heading 1 (5) to make it a valid <H1> style heading.

Correctly changed to Heading 1:

That will result with a title on your collection page without an image (image is still available for the Collection list section on the homepage). 

You can also remove all text from the Collection Description to start listing your products without any banner or title:


Still need help? Contact Us Contact Us