Collection banner
Split hero carrying the collection title, description, and image, with focal-point aware cropping.
- Merchant-addable
- Yes
- Settings
- 21
- Block types
- —
- File
sections/collection-banner.liquid
Used by default on: Collection, collection.concern
Screenshots pending
Captures for Collection banner at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
The top of every collection page.
Setting it up
- Add the section above the product grid on the collection template.
- Title, description, and image come from the collection record in your Shopify admin — set them there, not here.
- Adjust Section padding to sit correctly against the grid below.
Where the content comes from
Shopify collection data owns title, description, and image. The section owns layout only.
Notes and cautions
- Set a focal point on the collection image in Shopify admin so the crop keeps the subject centered at every viewport.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
The heading, supporting text, and image come from the collection’s title, description, and image.
Background uses the collection image as a full-width backdrop behind the text.
Controls the minimum banner height. Split styles stretch the collection image to fill taller heights. Match image ratio sizes the banner from the collection image instead, so wider screens show the whole image with no cropping.
Shortens the banner by removing this much of the collection image. The crop position decides which edge is removed, and the banner keeps one crop on every screen size.
When the banner is shorter than the collection image, this much of the cropped area comes off the top and the rest comes off the bottom. Use a higher value for photography that stages the product along the lower edge.
Choose a surface behind overlaid text, or place the text below the image on desktop.
Choose a surface behind overlaid text, or place the text below the image on mobile.
Small text above the collection title.
Shows the description as supporting text under the collection title.
Leave this off when the product grid toolbar already shows the count.
Lists subcollections as links below the text.
Optional. Choose the collections to show. When empty, the custom.sub_collections collection metafield is used, then the nested subcollections.
3200 x 1800px .jpg recommended, 16:9 aspect ratio. Use the same aspect ratio for every collection image, then set the banner height to Match image ratio.
Controls the minimum height when the collection image is hidden.
Fades the banner in on scroll and applies the text reveal style to its content. Respects the theme motion settings.