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. 

1

Create a new collection template

Open the Code Editor:

https://myshopify.com/admin/themes/current

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.

2

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:

Click to view code

Save the file. 

3

Choose the new collection template

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

https://myshopify.com/admin/collections

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:


How to I display the sort drop-down, sidebar links or change number of products per row?

When you use a new template, the default collection settings will be applied. Features like the sort drop-down, sidebar links and number of items per row will have reset. To change that, simply use the Theme Editor and browse to a collection that's using the new no-banner template. Then on the left section settings, you'll be able to change the settings. This will apply to all the collections that are using the no-banner template so you only need to do it once.

Open Theme Editor

Be sure to browse in the Theme Editor to a Collection page that has the new no-banner template in order to see the setting options. 

Still need help? Contact Us Contact Us