Collection Banner Setup Guide

The Collection Banner is the top section of your Shopify Collection Page — it displays key information (title, image, description) for the collection. Its content (title, image, description) is automatically synced from your Collection’s backend settings (edited in Products → Collections), while its style (padding, text visibility) is configured in the theme customizer.

1. Edit Collection Banner Content (Backend Collection Settings)

All content in the Collection Banner is pulled directly from your Collection’s backend setup — no manual input in the theme customizer:

Collection Title

• Source: Title field in the backend Collection page (e.g., "AUTOMATED COLLECTION" in the preview).
• This text automatically displays as the banner’s main heading — keep it short (2-3 words) for visibility.

Collection Image

• Source: Image section in the backend Collection page (upload/edit via the "Edit" button).
• This image becomes the banner’s background (if Show collection image is enabled in the theme customizer).

Collection Description

• Source: Description field in the backend Collection page.
• This text displays below the title (if Show collection description is enabled).

2. Collection Banner Style Settings (Theme Customizer)

These settings control the visual presentation of the synced content:

Banner Padding (Top/Bottom)

Adjusts the internal spacing (in rem) above and below the banner’s text.

• Default: 1 rem (balanced spacing for most designs).
• Increase to 1.5-2 rem for larger banners (e.g., with long descriptions); decrease to 0.5 rem for compact layouts.

Show Collection Description

Toggle to display/hide the Collection’s description (from the backend) below the title.

• Disabled (default): Only the collection title shows (clean, minimal look).
• Enabled: Adds the description — use for collections that need extra context (e.g., "Summer 2025 Limited Edition").

Font Size

Slider (default: 100%) that adjusts the size of the banner’s text (title + description).

• Adjust between 80% (subtle) and 120% (prominent) to match your page hierarchy.
• Avoid sizes over 120% — oversized text can overflow the banner, especially on mobile.

Show Collection Image

Toggle to use the Collection’s backend image as the banner’s background.

• Disabled (default): Banner uses a solid background (matches your theme’s color scheme).
• Enabled: Displays the Collection image as the background — ideal for visual collections (e.g., apparel, home decor).
• Recommendation: Use a 16:9 aspect ratio for the image (as noted in the settings) — this fits most banner layouts without cropping.

Use Text Protection Layer

Adds a semi-transparent overlay to the background image to make text easier to read (critical if your image has busy visuals).

• Disabled (default): No overlay — text may blend into busy images.
• Enabled: Activates the Text protection layer slider (below).

Text Protection Layer

Adjusts the overlay’s brightness to improve text readability (only active if Use text protection layer is enabled):

• 0 (default): Darkens the image (best for light text on bright images).
• Slide right to lighten the image (best for dark text on dark images).

Border Style (Theme Settings)

Adds a border around the entire Collection Banner section:

• No border (default): Clean, seamless look (blends with the page).
• Border: Adds a subtle outline (helps the banner stand out as a distinct section).

Best Practices

• Use high-quality images: Upload 1920×1080 px (16:9 ratio) images for sharp, responsive banners.
• Keep descriptions concise: If enabling the description, limit it to 1-2 sentences (long text clogs the banner).
• Prioritize readability: Always use the Text protection layer if your background image is busy — unreadable text defeats the banner’s purpose.
• Match brand style: Use font sizes/padding that align with other page sections (e.g., Product Page banners) for consistency.