Collections banner settings

The banner at the top of the collections list page (“Collections”). It shows a title, a description and optional breadcrumbs, with an optional image. The section has no blocks: all settings are in the section panel.

Section settings

Setting Description
Color scheme Color scheme applied to the banner. Schemes are managed in Theme settings → Colors; use Edit scheme to jump there. Default: Scheme 1.

Image

Setting Description
Show banner image Shows an image in the banner. The settings below appear only when this is on. Default: Off.
Image Image of the banner.
Custom image mobile Optional image for mobile. Available only when an image is selected.
Image position Cover (fills the whole banner behind the content), Right or Left. Left and right positions are always shown at the top on mobile. Available only when an image is selected. Default: Cover.
Image height Height of the image on desktop. Available only when the position is Left or Right. Range: 100–1000 px, step 10. Default: 400 px.
Image height mobile Height of the image on mobile. Available only when the position is Left or Right. Range: 100–1000 px, step 10. Default: 300 px.
Minimum height Height as a percentage of the banner width, so cover banners keep the same proportion on every screen. Content that needs more room still expands the banner. 0 lets the banner follow its content. Available only for the Cover position. Range: 0–100 %, step 5. Default: 0 %.
Minimum height mobile The same setting on mobile. Available only for the Cover position. Range: 0–150 %, step 5. Default: 0 %.
Content position Where the content sits when the banner is taller than its content: Top, Center or Bottom. Available only for the Cover position. Default: Center.
Overlay type Solid or Gradient overlay over the image. Available only when an image is selected. Default: Solid.
Overlay opacity Strength of the overlay. Available only when an image is selected. Range: 0–80 %, step 5. Default: 0 %.

Subheading

Setting Description
Subheading Short line above the title. Supports inline formatting. Leave empty to hide it. The settings below appear only when a subheading is entered.
Preset Typography preset: Hero, H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Presets are edited in Theme settings → Typography. Default: Subheading.
Icon Decorative icon before the text: None, Dot, Square or Triangle. Available only with the Subheading preset. Default: Triangle.
Icon color Color of the icon: Heading, Text, Accent or Custom. Available only with the Subheading preset and an icon selected. Default: Custom.
Icon custom Custom icon color. Available only when Icon color is Custom. Default: #2B62C8.
Icon custom dark mode Custom icon color used in dark mode. Available only when Icon color is Custom and dark mode is enabled in Theme settings. Default: #2B62C8.
Font Font family: Heading large, Heading small, Body or Accent. Default: Accent.
Color Text color: Heading, Text or Accent. Default: Accent.
Text style Letter case: Normal, Uppercase or Lowercase. Default: Uppercase.
Bottom space Space between the subheading and the title on desktop. Range: 0–60 px. Default: 40 px.
Bottom space mobile The same space on mobile. Range: 0–40 px. Default: 20 px.

Title

Setting Description
Banner title Title of the banner. Leave empty to hide it. The settings below appear only when a title is entered.
Banner title line 2 Optional second line of the title.
Left space Indents the second line. Available only when both lines are entered. Default: Off.
Preset Typography preset (same options as the subheading). Default: H2.
Font Font family: Heading large, Heading small, Body or Accent. Default: Heading large.
Color Text color: Heading, Text or Accent. Default: Heading.
Text style Letter case: Normal, Uppercase or Lowercase. Default: Uppercase.
Bottom space Space between the title and the description on desktop. Shown when a description is entered. Range: 0–60 px. Default: 16 px.
Bottom space mobile The same space on mobile. Range: 0–40 px. Default: 8 px.

Description

Setting Description
Description Text under the title. Supports rich text formatting. Leave empty to hide it. The settings below appear only when a description is entered.
Preset Typography preset: Default, Hero, H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Default: Default.
Font Font family: Heading large, Heading small, Body or Accent. Not available with the Default preset. Default: Body.
Color Text color: Heading, Text or Accent. Not available with the Default preset. Default: Text.
Text style Letter case: Normal, Uppercase or Lowercase. Not available with the Default preset. Default: Normal.
Bottom space Space below the description on desktop. Range: 0–60 px. Default: 0 px.
Bottom space mobile The same space on mobile. Range: 0–40 px. Default: 0 px.
Split heading and description Places the title and the description in two columns. Available only for the Cover image position. Default: On.

Layout

Setting Description
Content alignment Aligns the content to the Left, Center or Right on desktop. Default: Left.
Content alignment mobile Aligns the content to the Left, Center or Right on mobile. Default: Left.
Show container Puts the content on a container. The settings below appear only when this is on. Default: Off.
Container color scheme Color scheme of the container. Default: Scheme 1.
Container background Solid or Blur (a blurred translucent background). Default: Solid.
Blur strength Strength of the blur. Available only when the background is Blur. Range: 2–24 px, step 2. Default: 8 px.
Setting Description
Show breadcrumbs Shows the breadcrumb trail (for example Home / Collections). Default: Off.
Breadcrumbs position In the banner or Above the banner. Available only when breadcrumbs are shown. Default: In the banner.
Breadcrumbs color scheme Color scheme of the breadcrumbs strip. Available only when the position is Above the banner. Default: Scheme 1.

The settings below are available only when the breadcrumbs are shown above the banner.

Setting Description
Top (padding) Space above the breadcrumbs on desktop. Range: 0–100 px, step 2. Default: 24 px.
Bottom (padding) Space below the breadcrumbs on desktop. Range: 0–100 px, step 2. Default: 24 px.
Top mobile (padding) Space above the breadcrumbs on mobile. Range: 0–100 px, step 2. Default: 24 px.
Bottom mobile (padding) Space below the breadcrumbs on mobile. Range: 0–100 px, step 2. Default: 24 px.
Type (shape divider) Shape of the cut on the breadcrumbs strip, same options as the banner shape divider. Default: None.
Position (shape divider) Which edge is cut: Top, Bottom or Both. Available only when a shape is selected. Default: Bottom.
Top: scheme of the section above Color scheme of the neighbouring section above. Available when the cut is at the top or on both edges. Default: Scheme 1.
Bottom: scheme of the section below Color scheme of the neighbouring section below. Available when the cut is at the bottom or on both edges. Default: Scheme 1.
Cut size How large the cut is on desktop. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %.
Cut size mobile How large the cut is on mobile. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %.

Shape divider

Cuts the banner edge. Add padding so the content doesn’t overlap the cut.

Setting Description
Type Shape of the cut: None, Triangle corners, Rounded corners, Zigzag, Diagonal (left), Diagonal (right), Chevron notch or Stairs. Default: None.
Position Which edge is cut: Top, Bottom or Both. Available only when a shape is selected. Default: Top.
Top: scheme of the section above Color scheme of the neighbouring section above, so the cut shows its background in light and dark mode. Available when the cut is at the top or on both edges. Default: Scheme 1.
Bottom: scheme of the section below Color scheme of the neighbouring section below. Available when the cut is at the bottom or on both edges. Default: Scheme 1.
Cut size How large the cut is on desktop. Higher values cut deeper. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %.
Cut size mobile How large the cut is on mobile. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %.

Padding

Setting Description
Top Space above the banner content on desktop. Range: 0–200 px, step 2. Default: 0 px.
Bottom Space below the banner content on desktop. Range: 0–200 px, step 2. Default: 0 px.
Top mobile Space above the banner content on mobile. Range: 0–120 px, step 2. Default: 0 px.
Bottom mobile Space below the banner content on mobile. Range: 0–120 px, step 2. Default: 0 px.

Custom CSS

The Custom CSS field at the bottom of the section panel is a standard Shopify setting. CSS entered there applies to this section only.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us