KovaThemes Join the waitlist

Collection banner

Split hero carrying the collection title, description, and image, with focal-point aware cropping.

Merchant-addable
Yes
Settings
18
Block types
—
File
sections/collection-banner.liquid

Used by default on: Collection

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

  1. Add the section above the product grid on the collection template.
  2. Title, description, and image come from the collection record in your Shopify admin — set them there, not here.
  3. 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.

Banner styleDropdown

Background uses the collection image as a full-width backdrop behind the text.

ID
banner_style
Default
Background
  • Classicclassic
  • Archarch
  • Squaresquare
  • Backgroundbackground
Banner heightDropdown

Controls the minimum banner height. Split styles stretch the collection image to fill taller heights.

ID
banner_height
Default
Compact
  • Compactcompact
  • Regularregular
  • Talltall
Content surfaceDropdown

The panel behind the text when the collection image is used as a backdrop.

ID
content_surface
Default
Vignette
Shown when
banner_style is 'background' and show_collection_image
  • Solidsolid
  • Glassglass
  • Vignettevignette
  • No surfacenone
Content positionDropdown
ID
content_position
Default
Center
  • Top lefttop_left
  • Middle leftmiddle_left
  • Bottom leftbottom_left
  • Centercenter
Text alignmentDropdown
ID
text_alignment
Default
Center
  • Leftleft
  • Centercenter
EyebrowText

Small text above the collection title.

ID
eyebrow
Default
Rituals
Show collection descriptionCheckbox

Shows the description as supporting text under the collection title.

ID
show_collection_description
Default
On
Show product countCheckbox

Leave this off when the product grid toolbar already shows the count.

ID
show_product_count
Default
Off
Show subcollectionsCheckbox

Lists subcollections as links below the text.

ID
show_subcollections
Default
On
SubcollectionsCollection list

Optional. Choose the collections to show. When empty, the custom.sub_collections collection metafield is used, then the nested subcollections.

ID
subcollections_list
Subcollections sizeDropdown
ID
subcollections_size
Default
Regular
Shown when
show_subcollections
  • Smallsmall
  • Regularregular
  • Largelarge
Show collection imageCheckbox

1400 x 1000px .jpg recommended

ID
show_collection_image
Default
On
Text-only heightDropdown

Controls the minimum height when the collection image is hidden.

ID
text_only_height
Default
Compact
Shown when
show_collection_image is false
  • Compactcompact
  • Comfortablecomfortable
Image positionDropdown
ID
image_position
Default
Right
Shown when
show_collection_image and banner_style is not 'background'
  • Rightright
  • Leftleft
Color schemeColor scheme
ID
color_scheme
Default
scheme-7
Show entrance animationCheckbox

Fades the banner in on scroll and applies the text reveal style to its content. Respects the theme motion settings.

ID
enable_entrance_animation
Default
On

Section padding

Top paddingSlider
ID
padding_top
Default
16
Range
0px to 100px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
16
Range
0px to 100px, in steps of 4px