Supported Versions
The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.
Adding a Banner to your Collection Pages
All of our themes allow for the option to enable a top banner for your Collections pages.
Turbo, Parallax, Artisan and Flex themes allow you to enable the 'banner image' setting within the theme editor settings under Customize > Collection Pages.
For more information on collection banner settings in the Flex theme, check out this article.
Retina, Responsive, and, Mobilia include a 'collection.banner' template that you would assign your Collection in order to display the banner image.
The banners will use the collection's "collection image" by default. You will need to create at least one collection before you are able to implement the banner image!
Select your theme:
-
Turbo/Parallax/Artisan/Flex
In Turbo, Parallax, Artisan or Flex you will first need to upload a 'Collection image' for your collections. This will be the image that is displayed as the banner by default:
From your Shopify Admin, click Online Store > Themes > Customize to open the Theme Editor. Navigate to a Collection page which will bring up the Collection page settings in the Sections tab of your theme editor.
For Turbo, Parallax and Artisan: Under Sections > Collection > Banner image, enable the 'Show top banner image' setting to display the banner image:
For Flex: Under Sections > Collection Banner, enable the 'Show banner' setting to display the banner image:
If you do not have a 'Collection image' uploaded, you can upload a fallback banner image within the theme editor settings as well. This fallback image will only display as the banner if there is no 'collection image' uploaded.
-
Retina/Responsive/Mobilia
In Retina, Responsive, or Mobilia you will first need to upload a 'Collection image' for your collections. This will be the image that is displayed as the banner:
Underneath the 'Collection image' option, you will see another setting called 'Theme Templates.' You'll need to change this template to 'collection.banner':
