Add a custom banner image to each collection page

Please note: this document is not applicable for 2.0 themes, and only for vintage themes. For those, please refer to the metafields documentation for unique imagery per collection.

Our themes each contain the option to show a banner image on collection pages. Using sections means that unless you have a unique section or template for each collection then each will show the same image.

We use a simple workaround that circumvents the need for unique templates and sections allowing you to set a specific banner for each of your collections without the need for code editing. 

Prepare the banner image

Create your image, we recommend an image of 2800px wide with at least 1000px of height. Note that this image will not be displayed in full and will be cropped but good coverage of the area will be presented on the largest screen sizes.

1. Open the collection page within your Shopify admin that you want to add the full-width banner image to. Scroll to the bottom of the page and click on the "Edit Website SEO" link as pictured below. The last section here is named: URL and handle The handle is the piece that appears right after /collections/   in this instance, the handle is: best-selling
   
   
   
   
2. Open the collection description and enter the following shortcode: [banner] and save the collection
   
   
   
   
3. Create a JPG image and name it identically to the handle of your collection.
   For this example, our image would be called best-selling.jpg. 
   If your collection handle is called dresses then you would be saving the image as dresses.jpg
   
   
4. When ready open Settings > Files and upload your image.
   This is now ready to show in your store for each collection.
   If your theme version is a pre OS 2.0 version the image will show automatically on it's given collection.
   
   
5. OS 2.0 themes only In your theme editor open a Collection page and in the Sections list on the left side ensure that the Collection banner is visible.
   An image uploaded to this will be overridden on collections where a custom banner has been added using the above steps.