> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Collection Banner
> Hero banner for collection pages with image, description, and sub-collection navigation menu
## 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
Go to Shopify Admin → Products → Collections → Select collection → Add description and featured image. This content auto-displays in banner.
In Theme Customizer (Collection page template), choose background color, enable/disable description and image display.
Create a navigation menu in Admin (Online Store → Navigation) with links to sub-collections, then select it in "Collections menu" setting.
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:** White
Controls 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](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
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:** Center
Controls 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 entirely
**Alternative:** 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](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus), 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)
### Menu Styles
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 - Rounded
Controls 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.
**Block Type:** Menu item\
**Limit:** Unlimited (typically matches number of menu links)
Override collection featured image with custom thumbnail for specific menu items.
### When to Use
**Default behavior (no blocks):**
* Menu thumbnails auto-use collection featured images from Shopify Admin
* Works well if collection images are already optimized for thumbnails
**Add Menu Item blocks when:**
* Collection featured image is wrong aspect ratio (rectangular image cropped poorly to square/circle)
* Featured image too detailed (product grid photo doesn't work as small thumbnail)
* Want consistent icon-style menu (all collections use different image styles in Admin)
* Featured image missing (add custom placeholder)
### Block Settings
**Title** (Text, required)
* **Info:** "Menu item title must match the sub-collection title, from the Collections menu link list."
* Enter exact collection name (case-sensitive, spelling must match)
* Example: If menu links to "Men's Shirts" collection, title = "Men's Shirts"
* **Purpose:** Tells theme which menu item to apply custom image to
**Image** (Image picker)
* Upload custom thumbnail image
* **Recommended size:** 500x500px (square, even for rounded thumbnails—theme crops to circle)
* **Style:** Icon-like, simple subject, clear at small size
* This image replaces collection featured image for this menu item only
### Example Workflow
**Scenario:** "Apparel" collection with sub-collections menu
**Menu in Admin:**
* Shirts (links to "Shirts" collection)
* Pants (links to "Pants" collection)
* Outerwear (links to "Outerwear" collection)
**Problem:** "Shirts" collection featured image is a wide product grid photo (crops poorly to thumbnail)
**Solution:**
1. Add "Menu Item" block
2. Title: "Shirts" (exact match)
3. Image: Upload 500x500px icon of single shirt
4. Save
5. Menu now shows custom shirt icon instead of cropped grid photo
6. Other menu items (Pants, Outerwear) still use featured images from Admin
### Best Practices
**Title matching critical:**
* Title must **exactly match** collection title
* Check capitalization: "shirts" ≠ "Shirts"
* Check spacing: "Men's Shirts" ≠ "Men's Shirts" (extra space)
* If custom image doesn't appear, verify exact spelling/caps in Admin collection title
**Image specifications:**
* **Square images only** (500x500px ideal)
* Even for rounded thumbnails (theme crops square to circle)
* Simple subject (icon-style, not detailed scene)
* Consistent style across all custom thumbnails (don't mix photos + illustrations)
* Under 100KB file size (thumbnails are small, large files unnecessary)
**When to add blocks:**
* **Not needed** if featured images work well (already square, simple, consistent)
* **Add blocks** for problematic collections only (not all menu items need blocks)
* **Or add for all** if creating custom icon set for entire menu
**Recommendation:** Only add Menu Item blocks if collection featured images don't work as thumbnails. Most stores can use featured images directly without blocks.
## Best practices
Always add collection descriptions and images in Shopify Admin (Products → Collections). Banner auto-populates from this content—editing here updates all collection pages.
Upload collection images at 1920x1080px (16:9 ratio) for best results. Other aspect ratios crop awkwardly and may cut off important content.
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.
Limit sub-collection menus to 3-6 items for scannability. Too many creates decision paralysis. Group related collections logically.
Menu links must exactly match collection titles for auto-linking to work. Check capitalization and spelling—"Mens Shirts" ≠ "Men's Shirts".
If using thumbnails, ensure all images have consistent style (all photos or all icons, similar composition). Mismatched styles look unprofessional.
Preview collection banner on mobile—image crops differently, menu becomes carousel. Ensure key content visible and menu swipeable.
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)
### Menu Thumbnail Sizes
**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)
## Related Sections
* **[Featured Collection](/themes/mojave/featured-collection)** - Showcase specific collection products on homepage
* **[Featured Collections Links](/themes/mojave/featured-collections-links)** - Collection grid for homepage
* **[Collection Product Grid (Template)](/themes/mojave/collections/collection-page)** - Products display below banner on PLP
* **[Hero](/themes/mojave/hero)** - Similar hero banner for homepage
## 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)
### Menu Link Matching Logic
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:**
```css theme={null}
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