Skip to main content
The Collection Banner section displays a hero banner at the top of collection pages, automatically showing the collection title, description, and optional featured image. This banner creates a visually striking introduction to collection pages, establishing clear branding and context before the product grid. Use this section on all collection pages to elevate your catalog presentation with professional, immersive collection headers.

​
What this section controls

This section controls collection page headers with the following capabilities:
  • Hero banner with collection title and description
  • Optional featured image display
  • Transparent header overlay option
  • Section height control (30vh to 100vh)
  • Three banner layout modes (Full, Split, Text)
  • Desktop and mobile image support
  • Image position controls (Center, Top, Bottom)
  • Color scheme and spacing controls
  • Template-only section (collection pages)

​
Template Settings

Makes the site header transparent, overlaying the banner.
  • Type: Checkbox
  • Default: Enabled
When enabled, the header becomes transparent and floats over the banner, creating a modern, immersive design. The header background appears when scrolling down.
Transparent headers work best with high-contrast banner images. Ensure collection images have good contrast for header visibility.
Control the vertical height of the banner.
  • Range: 30vh - 100vh (viewport height)
  • Step: 10vh increments
  • Unit: vh (viewport height percentage)
  • Default: 40vh
Height Recommendations:
  • 30-40vh: Standard collection banners
  • 50-60vh: Prominent featured collections
  • 70-100vh: Full-screen hero collections
vh units scale with viewport (browser window) height. 40vh = 40% of screen height.
  • Select from available theme color schemes
  • Default: scheme-1
Color scheme affects text overlay and background areas. Choose schemes with good contrast against collection images.

​
Automatic Content

The banner automatically displays collection information:

​
Collection Data

  • Automatically pulls from collection settings
  • Rendered as H1 heading (SEO-friendly)
  • Prominent, large typography
  • Centered or left-aligned based on layout
  • Displays collection description if set
  • Rich text formatting supported
  • Appears below title
  • Optional (shows only if description exists)
Add collection descriptions in Shopify Admin → Products → Collections → Select collection → Description field for better SEO and customer context.
  • Uses collection featured image
  • Full-width background or side panel (based on layout)
  • Responsive scaling
  • Optional overlay for better text contrast
Set collection images in Shopify Admin → Products → Collections → Select collection → Image. Recommended minimum size: 1920x600px.
Some themes display product count in collection banner:
  • “120 products” or similar
  • Dynamic based on collection filters
  • Helps set expectations

​
Layout Comparison

Full Layout

Structure:
  • Full-width background image
  • Centered text overlay
  • Title + description stacked vertically
Best For:
  • Lifestyle/fashion collections
  • Strong imagery
  • Minimal text content
  • Hero-style presentation

70/30 Layout

Structure:
  • 70% image area (left)
  • 30% content area (right)
  • Asymmetric balance
Best For:
  • Image-primary with sidebar text
  • Medium-length descriptions
  • Modern, magazine-style layouts

30/70 Layout

Structure:
  • 30% image area (left)
  • 70% content area (right)
  • Text-focused layout
Best For:
  • Content-heavy collections
  • Detailed descriptions
  • Product education
  • Text-primary presentations

Split Layout

Structure:
  • 50% image (left)
  • 50% content (right)
  • Perfectly balanced
Best For:
  • Equal image-text emphasis
  • Clean, symmetric design
  • Professional presentations
  • Versatile collections

​
Best practices

Image guidelines

Use high-resolution collection images (minimum 1920x600px) in 16:9 or 3:1 aspect ratios, keeping file sizes under 300KB for optimal performance. Choose lifestyle images showing products in context with good contrast for text overlay, avoiding busy backgrounds that compete with your collection title and description.

Transparent header usage

Enable transparent headers for high-quality, visually striking collection images with good contrast and modern, immersive aesthetics. Disable for low-contrast or busy background images where header visibility is a concern. Always test with all collections to ensure adequate contrast for header elements.

Height selection

Use 30vh for quick context with minimal emphasis, 40vh (default) for balanced presence across most collection types, 60vh for featured seasonal campaigns with strong visual impact, or 80-100vh for landing page collections and premium luxury products. Choose height based on whether you want to focus on products or create maximum visual impact.

Layout selection guide

Choose Full layout for stunning lifestyle photography with short titles, 70/30 for balanced image-text with moderate descriptions, 30/70 for text-heavy educational collections, or Split layout for clean symmetric aesthetics with equal emphasis. Match your layout to your content emphasis and brand positioning.

Mobile considerations

Layouts automatically stack vertically on mobile with proportionally reduced banner heights and adjusted text sizes for readability. Test banners on actual mobile devices to ensure text remains readable, image focal points work on narrow screens, and transparent headers maintain adequate contrast throughout the mobile experience.

​
Use Cases

Seasonal Collections

Full layout with 60vh height, transparent header, lifestyle imagery showcasing seasonal products

Sale Collections

70/30 layout highlighting sale imagery with promotional text in sidebar

New Arrivals

Split layout with product photography and “What’s New” description

Category Collections

Standard 40vh full layout with product category imagery and short description

Brand Collections

30/70 layout with brand logo/image and detailed brand story in content area

Curated Collections

Full layout, tall height (60-80vh), editorial-style imagery

Collection Page

Collection product grid template that appears below this banner

Featured Collections

Section for displaying collection grid on homepage or other pages

Hero Banner

Similar hero section for homepage with manual content control

​
SEO Considerations

  • Automatically renders collection name as H1 tag
  • Critical for SEO (one H1 per page)
  • Use keyword-rich collection names
  • Keep titles descriptive (50-60 characters)
  • Appears in banner and in meta description
  • Provides SEO context for collection pages
  • Use 150-160 characters for optimal search results
  • Include relevant keywords naturally
  • Set alt text for collection images in Shopify Admin
  • Describes image content for accessibility and SEO
  • Include collection name and key details

​
Troubleshooting

Possible Issues:
  • Dark header on dark image background
  • Light header on light image background
  • Insufficient contrast
Solutions:
  • Use collection images with contrasting areas
  • Disable transparent header for problematic collections
  • Add overlay gradient in theme code (developer)
  • Choose different color scheme
Check:
  • Collection has featured image set
  • Image file uploaded successfully
  • Image file format is supported (JPG, PNG, GIF, WebP)
  • Browser cache (hard refresh: Cmd/Ctrl + Shift + R)
Improve Readability:
  • Choose color scheme with better contrast
  • Select different collection image with clearer background
  • Disable transparent header if it interferes
  • Use darker/lighter images based on text color
  • Add text shadow via theme code (developer)

​
Quick Summary

  • Purpose: Collection page hero banner
  • Content: Automatic (collection title, description, image)
  • Layouts: Full, 70/30, 30/70, Split
  • Height: 30-100vh (default: 40vh)
  • Transparent Header: Optional overlay effect
  • Settings: Layout, height, color scheme, transparent header toggle
  • SEO: H1 heading, collection description, image alt text
Collection information (title, description, image) is set in Shopify Admin → Products → Collections, not in the Theme Customizer. The banner template controls how this content is displayed.