Skip to main content

​
What It Does

The Collection Banner section displays at the top of collection pages (PLP), showcasing the collection’s featured image, title, description, and optional sub-collections navigation menu. This banner provides context and visual appeal to your collection pages while helping customers navigate between related collections. Content auto-populates from your Collection settings in Shopify Admin (image, title, description), with customization options for background color, image display, overlay transparency, and sub-collection menu styles (text links, square thumbnails, or rounded thumbnails).
This is a template section (appears on PLP - Collection pages only). Not available as a regular section on other pages. Configure in Theme Customizer → Collection page template.

​
Getting Started

1

Add Collection Content in Admin

Go to Shopify Admin → Products → Collections → Select collection → Add description and featured image. This content auto-displays in banner.
2

Configure Banner Display

In Theme Customizer (Collection page template), choose background color, enable/disable description and image display.
3

Set Up Sub-Collections Menu (Optional)

Create a navigation menu in Admin (Online Store → Navigation) with links to sub-collections, then select it in “Collections menu” setting.
4

Customize Menu Style

Choose menu display: text links, square thumbnails, or rounded thumbnails. Add menu item blocks for custom thumbnail images.

​
Settings

Type: Select dropdown
Options: White, Black, Main
Default: WhiteControls the background color of the collection banner section.

​
Color Options

White (Default):
  • Clean, professional, high readability
  • Best for: Most collections, light/airy aesthetic
  • Text: Dark text automatically applied for contrast
  • Image: Looks best with colorful/vibrant collection images
Black:
  • Bold, dramatic, premium feel
  • Best for: Luxury collections, fashion, dark-themed stores
  • Text: Light/white text automatically applied
  • Image: Works well with high-contrast or light-toned images
Main:
  • Uses your theme’s primary brand color
  • Best for: Strong brand identity, unique aesthetic
  • Text: Adjusts automatically based on color brightness
  • Note: “Main” color set in theme settings (globally)

​
Choosing Background Color

White when:
  • Collection image has dark/bold elements (provides contrast)
  • Store aesthetic is minimal, clean, Scandinavian
  • High readability is priority
Black when:
  • Store brand is luxury, premium, edgy
  • Collection image is light-toned (provides contrast)
  • Want dramatic, fashion-forward aesthetic
Main when:
  • Strong brand color identity (e.g., Tiffany blue, Coca-Cola red)
  • Want consistent brand color across all collection banners
  • Collection images are neutral (brand color pops)
Tip: Test background color with actual collection image in Theme Customizer preview.
Type: Checkbox
Default: Enabled (checked)Controls whether the collection description (from Shopify Admin) displays in the banner.

​
When Enabled (Default)

  • Description appears below collection title in banner
  • Content pulls from Collection → Description field in Shopify Admin
  • Supports rich text formatting (paragraphs, bold, italic, links)
  • Helps SEO (descriptive content indexed by search engines)

​
When Disabled

  • Description hidden (cleaner, more minimal banner)
  • Only title and image display
  • Useful when descriptions are empty, very long, or redundant

​
Use Cases

Enable when:
  • Collections have valuable descriptions (category overview, styling tips, buying guides)
  • SEO is priority (descriptive content helps rankings)
  • Customers benefit from context (e.g., “Sustainable Materials Collection - All products eco-certified”)
  • Descriptions are 1-3 sentences (concise, scannable)
Disable when:
  • Descriptions are missing/empty in Admin (avoid blank space)
  • Descriptions are very long (clutters banner, distracts from products)
  • Minimal aesthetic preferred (image + title only)
  • Collection title is self-explanatory (e.g., “Women’s Shoes” needs no extra description)

​
Best Practices

If enabled:
  • Keep descriptions 1-3 sentences (30-60 words ideal)
  • Focus on benefits/category overview (“Discover handcrafted jewelry made with recycled metals”)
  • Avoid repeating title (“Jewelry Collection” title + “Shop our jewelry collection” description = redundant)
  • Use Admin’s rich text editor for formatting (bold key phrases, add links if needed)
Managing descriptions in Admin:
  1. Products → Collections → Select collection → Description field
  2. Write 1-3 sentence overview
  3. Save → Preview on storefront
Recommendation: Enable for curated/seasonal collections with meaningful descriptions, disable for utility collections (Sale, New Arrivals) unless you add context.
Type: Checkbox
Default: Enabled (checked)
Info: “For best results, use an image with a 16:9 aspect ratio. Learn more”Controls whether the collection’s featured image (from Shopify Admin) displays in the banner.

​
When Enabled (Default)

  • Featured image appears as hero background in banner
  • Content pulls from Collection → Image field in Shopify Admin
  • Creates visual interest and brand storytelling
  • Helps customers quickly identify collection type
Image specifications:
  • Recommended size: 1920x1080px (16:9 aspect ratio)
  • File format: JPG (photos), PNG (graphics with transparency)
  • File size: Under 500KB (compress for fast loading)
  • Content: Lifestyle, products in use, category-defining imagery

​
When Disabled

  • No background image (solid background color only)
  • Simpler, faster-loading banner
  • Focus shifts entirely to title + description text
  • Useful when images are missing or low-quality

​
Use Cases

Enable when:
  • Collections have high-quality featured images in Admin
  • Visual storytelling enhances category (e.g., outdoor gear collection with mountain landscape)
  • Brand aesthetic is image-heavy, editorial
  • Want to differentiate collections visually (Summer vs Winter)
Disable when:
  • Featured images missing/empty in Admin (avoid broken image placeholders)
  • Images are low-quality, inconsistent, or off-brand
  • Fast page load is critical priority
  • Minimal, text-focused aesthetic preferred
  • All collections use same generic image (no differentiation value)

​
Image Position Setting

After enabling, use “Image Position” setting to control vertical alignment:
  • Top: Shows top portion of image (use for images with important content at top)
  • Center (Default): Shows middle of image (best for balanced compositions)
  • Bottom: Shows bottom portion (use for images with ground/products at bottom)

​
Best Practices

Image selection:
  • Use lifestyle images (products in use, not white background product shots)
  • Show collection theme (e.g., “Beach Collection” with ocean/sand imagery)
  • Keep subjects centered vertically (works with Center position)
  • Avoid busy images (text becomes hard to read over complex backgrounds)
  • Consider image overlay opacity (use 40-60% overlay for better text readability)
Managing images in Admin:
  1. Products → Collections → Select collection → Featured image
  2. Upload 1920x1080px image (16:9 ratio)
  3. Use Shopify image editor to crop/adjust if needed
  4. Save → Preview on storefront
Common mistake: Using product photos as collection images. Product photos are for products, lifestyle/category images are for collections.Recommendation: Enable with high-quality lifestyle images at 16:9 ratio, or disable and use solid background color if images aren’t ready.
Type: Select dropdown
Options: Top, Center, Bottom
Default: CenterControls which portion of the collection image is visible in the banner (vertical alignment).

​
How It Works

Collection images are often taller than banner height (banner may be 400-600px tall, image is 1080px tall). This setting controls which part of the image displays.Top:
  • Shows top ~50-60% of image
  • Bottom portion cropped out of view
Center (Default):
  • Shows middle ~50-60% of image
  • Top and bottom portions cropped equally
Bottom:
  • Shows bottom ~50-60% of image
  • Top portion cropped out of view

​
Choosing Position

Top when:
  • Important content is at top of image (skyline, person’s face, product at top)
  • Example: Image of person wearing hat (face is at top, needs to be visible)
Center when:
  • Image is balanced/symmetrical (subject centered vertically)
  • Most images work well centered
  • Example: Product shot of shoes centered on neutral background
Bottom when:
  • Important content is at bottom (products on table, ground-level subjects)
  • Example: Image of products on beach sand (products at bottom, sky at top can be cropped)

​
Testing Your Images

  1. Upload collection image in Admin (16:9 ratio)
  2. Preview collection page in Theme Customizer
  3. Try each position (Top/Center/Bottom)
  4. Choose position that shows most important content
Tip: If you’re cropping out critical content at any position, your image may have wrong aspect ratio. Re-crop to 16:9 in Admin.Recommendation: Start with Center (default), adjust to Top or Bottom only if critical content is being cropped.
Type: Range slider
Range: 0-100% (step: 5%)
Default: 50%Controls opacity of dark overlay placed over collection image to improve text readability.

​
How Overlay Works

A semi-transparent black layer sits between image and text:
  • 0%: No overlay (image fully visible, text directly on image)
  • 50% (Default): Half-transparent overlay (balanced visibility)
  • 100%: Fully opaque overlay (image completely darkened, only text visible)

​
Choosing Overlay Opacity

Low opacity (0-30%):
  • Pro: Image remains vibrant and visible
  • Con: Text may be hard to read if image is light/busy
  • Best for: Dark images (already provide contrast for white text)
  • Example: 20% overlay on image of dark forest (text remains readable)
Medium opacity (40-60%): ← Default: 50%
  • Pro: Balanced—image visible, text readable
  • Con: May slightly mute image colors
  • Best for: Most images, general purpose
  • Example: 50% overlay on medium-brightness beach scene
High opacity (70-100%):
  • Pro: Maximum text readability
  • Con: Image becomes very dark, loses visual impact
  • Best for: Very bright/light images, when text legibility is critical
  • Example: 80% overlay on white/snowy image

​
Testing Process

  1. Upload collection image
  2. Set overlay to 50% (starting point)
  3. Preview banner → Check title/description readability
  4. If text hard to read: Increase opacity (60%, 70%, etc.)
  5. If image too dark: Decrease opacity (40%, 30%, etc.)

​
Best Practices

Dark images: Use 0-30% overlay (already dark enough for contrast) Medium images: Use 40-60% overlay (most common) Light images: Use 60-80% overlay (need darkening for text contrast) Very light images (white, bright): Use 70-100% overlay or disable image entirelyAlternative: If you consistently need 70%+ overlay (making images very dark), consider editing images to be darker in Shopify Admin image editor instead.Recommendation: Start with 50%, adjust up or down based on specific image brightness and text readability.
Type: Link list (navigation menu picker)
Optional: Leave empty to hide menu
Info: “Add a collection menu by including navigation, whose first level links names match any of your shop’s collections.”Displays a navigation menu for sub-collections or related collections below the banner.

​
How It Works

Create a menu in Shopify Admin:
  1. Online Store → Navigation → Add menu
  2. Name it (e.g., “Apparel Sub-Collections”)
  3. Add links to collections
  4. Important: Link names must exactly match collection titles
Example menu structure:
Apparel Sub-Collections (Menu name)
├── Shirts (Link to "Shirts" collection)
├── Pants (Link to "Pants" collection)
├── Outerwear (Link to "Outerwear" collection)
└── Accessories (Link to "Accessories" collection)
Select menu in banner settings:
  • Choose “Apparel Sub-Collections” menu
  • Menu displays below collection title/description
  • Customers can navigate between related collections

​
When to Use

Use Collections Menu when:
  • Parent collection has logical sub-categories (e.g., “Clothing” → Tops, Bottoms, Dresses)
  • You want customers to browse related collections easily
  • Creating collection “hubs” (e.g., “Men’s” collection with Shirts/Pants/Shoes menu)
  • Store has deep collection hierarchy
Don’t use when:
  • Collection is leaf-level (no sub-collections)
  • Only 1-2 related collections (add manual links in description instead)
  • Menu would be confusing (unrelated collections)
After selecting menu, choose display style:Links (Text only):
  • Plain text links in horizontal row
  • Fast loading, minimal design
  • Best for: Many sub-collections (6+), text-focused aesthetic
Thumbnails - Squared:
  • Square image thumbnails with collection name
  • Visual browsing experience
  • Best for: 3-6 sub-collections, visual brands
Thumbnails - Rounded:
  • Circular image thumbnails with collection name
  • Modern, friendly aesthetic
  • Best for: 3-5 sub-collections, lifestyle brands

​
Adding Thumbnail Images

Default behavior:
  • Thumbnails auto-use collection featured images from Admin
Custom thumbnails (per sub-collection):
  1. Add “Menu Item” block in section
  2. Enter title (must match collection name exactly)
  3. Upload custom thumbnail image
  4. Image overrides collection featured image for this menu
Example:
  • “Shirts” collection has detailed product grid image (not ideal for small thumbnail)
  • Add Menu Item block: Title = “Shirts”, upload icon-style image
  • Menu uses custom icon instead of full featured image

​
Best Practices

Menu structure:
  • Keep menu items 3-6 (too many overwhelms, too few redundant)
  • Use parallel naming (“Men’s Shirts,” “Men’s Pants,” “Men’s Shoes” not “Shirts,” “Bottoms,” “Footwear for Men”)
  • Logical grouping (all items same hierarchy level)
Link names must match collections:
  • If collection is “T-Shirts,” menu link must say “T-Shirts” (exact match)
  • Capitalization usually matters
  • Test in preview—if menu item doesn’t link, check spelling
Thumbnail images:
  • Use square images for squared thumbnails (500x500px)
  • Use square images for rounded thumbnails (they’re cropped to circle)
  • Icon-style images work better than detailed photos
  • Keep consistent style across all thumbnails
Recommendation: Use for parent collections with clear sub-categories (e.g., “Apparel” → Tops/Bottoms/Dresses). Skip for standalone collections.
Type: Select dropdown
Options: Links, Thumbnails - Squared, Thumbnails - Rounded
Default: Thumbnails - RoundedControls visual presentation of the collections menu (if menu selected above).

​
Links (Text Only)

Appearance:
  • Horizontal list of text links
  • Minimal design (button/underline styling)
  • No images, fastest loading
Best for:
  • Many sub-collections (7+)—thumbnails would create long row
  • Text-focused, minimal aesthetic
  • Fast page load priority
  • Desktop-heavy traffic (text nav more clickable on desktop)
Example use:
  • Parent “Home Decor” collection with 8 sub-collections (Living Room, Bedroom, Kitchen, Bath, Lighting, Rugs, Wall Art, Outdoor)
  • Text links more compact than 8 thumbnail squares

​
Thumbnails - Squared

Appearance:
  • Square image thumbnails (collection featured images)
  • Collection name below each square
  • Grid-like, organized presentation
Best for:
  • 3-6 sub-collections (more gets crowded)
  • Visual product categories (fashion, home goods)
  • When collection images are strong differentiators
  • Balanced aesthetic (modern but structured)
Example use:
  • Parent “Women’s Apparel” with 4 sub-collections (Tops, Dresses, Bottoms, Outerwear)
  • Square thumbnails show category at a glance

​
Thumbnails - Rounded (Default)

Appearance:
  • Circular image thumbnails (collection featured images cropped to circle)
  • Collection name below each circle
  • Soft, friendly, modern presentation
Best for:
  • 3-5 sub-collections (circles take more visual space than squares)
  • Lifestyle brands, beauty, wellness, fashion
  • When aesthetic is important (rounded feels premium/friendly)
  • Icon-style imagery (faces, products, simple subjects work well in circles)
Example use:
  • Parent “Skincare” with 4 sub-collections (Cleansers, Serums, Moisturizers, Masks)
  • Rounded thumbnails feel spa-like, approachable

​
Choosing Menu Style

Number of items:
  • 3-4 items: Any style works (thumbnails preferred for visual interest)
  • 5-6 items: Squared or Rounded thumbnails (not too crowded yet)
  • 7+ items: Links (thumbnails create long, scrollable row)
Brand aesthetic:
  • Minimal/text-focused: Links
  • Modern/structured: Thumbnails - Squared
  • Friendly/lifestyle: Thumbnails - Rounded
Image availability:
  • Strong collection images: Thumbnails (use visual assets)
  • Weak/missing images: Links (avoid exposing poor imagery)
Mobile consideration:
  • Thumbnails become horizontal scrolling carousel on mobile (swipe to see all)
  • Links may wrap to multiple rows (harder to scan)
  • 3-4 thumbnails ideal for mobile experience
Recommendation: Use Thumbnails - Rounded (default) for 3-5 visually-distinct sub-collections, switch to Links for 7+ items or text-focused stores.

​
Best practices

Add Collection Content in Admin

Always add collection descriptions and images in Shopify Admin (Products → Collections). Banner auto-populates from this content—editing here updates all collection pages.

Use 16:9 Images

Upload collection images at 1920x1080px (16:9 ratio) for best results. Other aspect ratios crop awkwardly and may cut off important content.

Adjust Overlay for Readability

Start with 50% overlay, increase if text hard to read on bright images, decrease if image too dark. Text legibility is priority over image vibrancy.

Keep Menus Focused

Limit sub-collection menus to 3-6 items for scannability. Too many creates decision paralysis. Group related collections logically.

Match Menu Link Names to Collections

Menu links must exactly match collection titles for auto-linking to work. Check capitalization and spelling—“Mens Shirts” ≠ “Men’s Shirts”.

Consistent Thumbnail Style

If using thumbnails, ensure all images have consistent style (all photos or all icons, similar composition). Mismatched styles look unprofessional.

Test on Mobile

Preview collection banner on mobile—image crops differently, menu becomes carousel. Ensure key content visible and menu swipeable.

Concise Descriptions

Keep collection descriptions 1-3 sentences (30-60 words). Banners are for overview, not detailed content. Save longer copy for page sections below.

​
Common Use Cases

​
Visual Fashion Collection

Settings: Show image ON, Overlay 40%, Background White, Menu Thumbnails - Rounded Setup: “Women’s Apparel” collection with lifestyle image (model wearing items), description enabled (“Discover timeless styles…”), menu with sub-collections (Tops, Dresses, Bottoms) Best for: Fashion, apparel, accessories with strong photography

​
Minimal Product Category

Settings: Show image OFF, Background Black, Description ON, Menu Links (text only) Setup: “Electronics” collection, no image (solid black background), short description (“Shop the latest tech”), menu with 8 sub-collections as text links Best for: Tech, electronics, industrial products where imagery less critical

​
Seasonal Sale Banner

Settings: Show image ON, Overlay 60%, Background Main (red), Menu OFF Setup: “Summer Sale” collection with bright beach image (high overlay for text readability), large banner with “Up to 50% off” description, no sub-menu (direct to products) Best for: Sale collections, promotional categories, seasonal events

​
Luxury Category Hub

Settings: Show image ON, Overlay 70%, Background Black, Menu Thumbnails - Squared Setup: “Designer Handbags” collection with elegant product image, minimal description, menu with 4 designer sub-collections (squared thumbnails for structured look) Best for: Luxury goods, premium brands, high-end fashion

​
Sustainable Product Line

Settings: Show image ON, Overlay 45%, Background White, Description ON, Menu Thumbnails - Rounded Setup: “Eco-Friendly Collection” with nature imagery, detailed description about sustainability practices, rounded thumbnail menu for soft/natural feel Best for: Eco brands, natural products, wellness, organic goods

​
Layout Behavior

​
Desktop Layout

With Image Enabled:
  • Collection image spans full width as background
  • Title and description centered over image (with overlay)
  • Menu displays below title/description area
  • Height: ~400-600px (varies by theme, content length)
Without Image:
  • Solid background color
  • Title and description on background
  • More compact height (~200-300px)

​
Mobile Layout

Image:
  • Full-width background (entire mobile width)
  • Often taller on mobile (more vertical space for title/description)
  • Image crops to fill screen width
Menu:
  • Text links: May wrap to multiple rows
  • Thumbnails: Horizontal swipeable carousel (swipe left/right)
Links (text only):
  • Just text, no images
  • Button or plain text styling
Squared thumbnails:
  • Desktop: ~150-200px squares
  • Mobile: ~120px squares (in carousel)
Rounded thumbnails:
  • Desktop: ~150-200px circles
  • Mobile: ~120px circles (in carousel)

​
Technical Notes

​
Content Auto-Population

Banner content sources:
  • Title: Collection title from Admin (e.g., “Summer Collection”)
  • Description: Collection description field in Admin (rich text supported)
  • Image: Collection featured image in Admin
Editing: Products → Collections → Select collection → Edit title/description/image → Save Theme displays: Changes in Admin instantly reflect on storefront (no theme editing needed) Theme matches menu links to collections by exact title match: Example:
  • Menu link text: “Men’s Shirts”
  • Collection title in Admin: “Men’s Shirts”
  • Result: Link works, navigates to collection
Mismatch scenarios (all fail):
  • Menu link: “Men’s Shirts” vs Collection: “Mens Shirts” (apostrophe missing)
  • Menu link: “Men’s Shirts” vs Collection: “men’s shirts” (capitalization different)
  • Menu link: “Men’s Shirts ” vs Collection: “Men’s Shirts” (trailing space)
Troubleshooting: If menu links don’t navigate, check Admin collection titles vs menu link text character-by-character.

​
Image Overlay Implementation

CSS overlay: 
background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
Transparency values:
  • 0% = rgba(0, 0, 0, 0) (no overlay)
  • 50% = rgba(0, 0, 0, 0.5) (default)
  • 100% = rgba(0, 0, 0, 1) (fully opaque black)
Text color: Automatically white when overlay present (for contrast)

​
SEO Implications

Collection descriptions:
  • Indexed by search engines
  • Contributes to collection page SEO
  • Use keywords naturally (e.g., “Shop organic cotton t-shirts…”)
Image alt text:
  • Collection featured images use collection title as alt text automatically
  • Improves image search rankings
  • Accessibility benefit for screen readers

​
Performance

Image loading:
  • Collection images lazy load below fold (if banner not first section)
  • Recommended: Compress to under 500KB before upload
  • Shopify CDN auto-serves WebP format (faster) to supported browsers
Menu thumbnails:
  • Lazy load (don’t render until visible)
  • Shopify auto-resizes to actual display dimensions (~200px)
  • Minimal performance impact even with 6 thumbnails

​
Troubleshooting

Banner not showing on collection page:
  • Verify section is enabled in Theme Customizer → Collection template
  • Check if collection has content (title at minimum, even without image/description)
  • Preview specific collection URL (not homepage)
Collection description/image not displaying:
  • Check “Show collection description” / “Show collection image” enabled in settings
  • Verify content exists in Shopify Admin → Products → Collections → [Collection name]
  • Try editing collection in Admin, re-save, refresh storefront
Menu links not working:
  • Verify menu selected in “Collections menu” setting
  • Check menu link names exactly match collection titles in Admin (case-sensitive)
  • Test menu in Admin (Online Store → Navigation → Open menu → Verify links functional)
Menu thumbnails missing or wrong:
  • Verify collections have featured images in Admin
  • For custom thumbnails: Check “Menu Item” block title exactly matches collection name
  • Re-upload custom thumbnail image (may have failed to save)
  • Check browser console for image load errors (broken URL)
Text unreadable over image:
  • Increase “Image overlay transparency” (60%, 70%, 80%)
  • Test with very bright images—may need 80-100% overlay or consider disabling image
  • Alternative: Edit image in Admin to be darker before uploading
Menu too crowded/scrolling horizontally:
  • Reduce number of menu items (remove less important sub-collections)
  • Switch to “Links” menu style (more compact than thumbnails)
  • On mobile: Expected behavior (thumbnails carousel, swipe left/right)
Different menu shows on different collections:
  • Each collection page can have different menu selected
  • Edit Collection Banner section while viewing specific collection in Theme Customizer
  • Menu setting is per-collection-template (not global)
Background color not changing:
  • Hard refresh browser (Cmd/Ctrl + Shift + R) after saving
  • Check if image overlay is 100% (completely covering background color)
  • “Main” color set in theme settings (not in section)—check Theme settings → Colors
Menu item block not applying custom image:
  • Verify block title exactly matches collection title (check Admin for exact capitalization/spacing)
  • Ensure custom image uploaded (not left blank)
  • Try deleting and re-adding block
  • Check that menu includes link to this collection