Collection Logo Section

The Collection Logo Section is a sophisticated header component designed specifically for collection pages that provides comprehensive navigation, branding, and…

For Plain Jane and Plain Jane Interactive

What You'll Learn

  • How to configure the Collection Logo Section for enhanced collection page branding
  • Advanced features including mobile menu, filter buttons, and cart integration
  • Comprehensive mobile navigation and menu customization options
  • Best practices for collection page header optimization and user experience

🎯 What is the Collection Logo Section?

The Collection Logo Section is a sophisticated header component designed specifically for collection pages that provides comprehensive navigation, branding, and filtering functionality. This section goes beyond simple logo display to include a full mobile menu system, filter controls, cart integration, and date/time features optimized for the collection browsing experience.

Key Features:

  • Collection-specific logo display with custom sizing
  • Interactive hamburger menu with filter functionality
  • Comprehensive mobile menu system with nested navigation
  • Live cart counter with customizable styling
  • Optional date/time display with timezone support
  • Advanced mobile navigation with swipe gestures
  • Customizable menu colors, typography, and spacing
  • Integration with collection filtering and search

Available in:

  • ✅ Plain Jane v3.1+
  • ✅ Plain Jane Interactive v2+

💡 Note: This section is specifically designed for collection pages and includes advanced mobile navigation features not found in other page types.

🔧 How to Add Collection Logo Section

  1. Go to Online Store > Themes > Customize
  2. Navigate to Collections > [Any Collection]
  3. Click Add section
  4. Select Collection Logo Section (or similar naming)
  5. Configure the logo, menu, cart, and mobile settings
  6. Position the section at the top of the collection page layout

⚠️ Important: This section is optimized for collection pages and includes specialized functionality for product filtering and collection navigation.

🏢 Logo Configuration

Collection Page Logo Display

Collection Logo Settings

  • Uses the logo uploaded in Theme Settings → Logo → "Collection Page Logo"
  • Falls back to default logo if collection-specific logo not set
  • Supports PNG, JPG, and SVG formats
  • Independent from homepage and product page logos

Logo Sizing

  • Collection Screen Logo Size: Adjustable via theme settings
  • Range typically 50-200px width
  • Automatically maintains aspect ratio
  • Responsive scaling for mobile devices

Logo Linking & Navigation

  • Logo automatically links to store homepage
  • Provides consistent site navigation from collection pages
  • Opens in same window for seamless user experience
  • Accessible keyboard navigation support

🍔 Hamburger Menu & Filter Integration

Filter Button Functionality

Interactive Filter Control

  • Hamburger menu icon that serves as filter/menu toggle
  • SVG-based icon with customizable stroke color
  • Conditional display based on collection context
  • Touch-optimized for mobile devices

Filter Icon Styling

  • Background Color: Customizable stroke color for hamburger lines
  • Uses section background color settings
  • Scalable SVG for crisp display at all sizes
  • Consistent with overall section color scheme

Filter Behavior

  • Clicking opens mobile menu overlay
  • Integrates with collection filtering system
  • Provides access to collection navigation
  • Optimized for touch interactions

📱 Advanced Mobile Menu System

Mobile Menu Structure

Navigation Menu Display

  • Full-screen mobile menu overlay
  • Hierarchical menu structure support
  • Custom menu assignment from Shopify Navigation
  • Nested navigation with sub-menus

Mobile Menu Colors

  • Mobile Navigation Background Color: Main menu background
  • Mobile Navigation Link Color: Text color for menu links
  • Mobile Navigation Link Hover Color: Hover text color
  • Mobile Navigation Link Background Color: Hover background color
  • Close Button Color: X button color for menu close

Typography & Layout

Mobile Text Settings

  • Text Alignment: Left, Center, or Right alignment
  • Font Size: Adjustable range 10-26px (default: 16px)
  • Vertical Spacing: Adjustable spacing 0-36px between menu items

Menu Interaction

  • Smooth open/close animations
  • Touch-friendly menu items
  • Accessible navigation structure
  • Swipe gesture support

🛒 Cart Integration

Cart Display & Functionality

Cart Wrapper Integration

  • Full Shopify commerce cart integration
  • Right sidebar cart functionality
  • Configurable cart duration (default: 1000ms)
  • Real-time cart updates

Cart Counter Display

  • Shows current cart item count
  • Updates automatically when products added/removed
  • Integrates with overall cart system
  • Consistent with theme cart functionality

Cart Styling Options

  • Inherits styling from mobile menu color settings
  • Coordinates with filter button colors
  • Responsive design for all screen sizes
  • Touch-optimized for mobile interactions

⏰ Date & Time Display

Timezone Information

Show Date/Time Toggle

  • Show Date/Time: Enable/disable timezone display
  • Default: Varies by theme configuration
  • Useful for collection launch timing or store context

Date & Time Colors

  • Date Color: Customizable color for date text
  • Time Color: Customizable color for time text
  • Consistent with logo section styling
  • Updates automatically based on store timezone

Date/Time Positioning

  • Integrated with cart and logo layout
  • Responsive positioning for mobile devices
  • Coordinates with other header elements

🎨 Layout & Design Configuration

Section Structure

Header Layout

  • Logo positioned on left side
  • Hamburger menu/filter button on far left
  • Cart and date/time positioned on right side
  • Clean, organized header hierarchy

Container Styling

  • Custom CSS class: "logo-container collection"
  • Optimized specifically for collection pages
  • Responsive design patterns
  • Consistent spacing and alignment

Visual Hierarchy

Element Priority

  1. Filter/Menu Button - Primary navigation control
  2. Logo - Brand presence and homepage link
  3. Cart Counter - Shopping functionality
  4. Date/Time - Supporting information

Color Coordination

  • Unified color scheme across all elements
  • Customizable background and text colors
  • Hover state styling for interactive elements
  • Accessibility-compliant contrast ratios

📱 Mobile Optimization

Touch-First Design

Mobile Interface

  • Large touch targets for all interactive elements
  • Optimized hamburger menu for thumb navigation
  • Smooth animations and transitions
  • Gesture-based navigation support

Responsive Behavior

  • Logo scales appropriately for mobile screens
  • Menu button maintains touch-friendly size
  • Cart counter remains visible and accessible
  • Date/time display adapts to available space

Performance Considerations

  • Optimized mobile menu loading
  • Efficient CSS animations
  • Minimal JavaScript overhead
  • Fast cart integration

🔄 Integration with Collection Experience

Collection Navigation Enhancement

Filter Integration

  • Hamburger menu provides access to collection filters
  • Seamless integration with search functionality
  • Product sorting and filtering options
  • Category navigation within collections

Shopping Flow Optimization

  • Quick access to cart from collection browsing
  • Brand consistency throughout collection navigation
  • Efficient product discovery through menu system
  • Streamlined path from collection to product pages

Collection-Specific Features

Context-Aware Functionality

  • Different behavior when on collection vs. other pages
  • Collection-specific menu options
  • Integration with collection page layouts
  • Optimized for product browsing experience

🎛️ Advanced Customization Options

Navigation Menu Setup

  1. Go to Online Store > Navigation in Shopify Admin
  2. Create or edit menu for collection navigation
  3. Add collection links, categories, and filters
  4. Organize hierarchical menu structure
  5. Assign menu in theme section settings

Color Strategy

  • Coordinate menu colors with collection page design
  • Ensure sufficient contrast for mobile viewing
  • Match filter button colors with menu styling
  • Create cohesive visual experience

Mobile Menu Enhancements

Advanced Features

  • Custom background images for menu overlay
  • Animated menu transitions
  • Nested submenu support
  • Integration with collection filtering
  • Search functionality within menu

Typography Customization

  • Responsive font sizing for mobile devices
  • Consistent typography with collection pages
  • Readable hierarchy for menu navigation
  • Optimized spacing for touch interaction

🔧 Troubleshooting

Logo Not Displaying

Common Issues

  • Collection logo not uploaded in Theme Settings
  • "Show Collection Page Logo" setting disabled
  • Logo file format not supported
  • Conflicts with other collection sections

Solutions

  • Upload logo in Theme Settings → Logo → Collection Page Logo
  • Enable "Show Collection Page Logo" toggle
  • Use PNG, JPG, or SVG formats
  • Check for section conflicts on collection pages
  • Clear browser cache after logo changes

Mobile Menu Not Working

Potential Problems

  • JavaScript conflicts with other apps
  • Menu not assigned in section settings
  • Mobile CSS conflicts
  • Touch interaction issues

Solutions

  • Check for app conflicts affecting mobile menu
  • Assign navigation menu in section settings
  • Test mobile menu in different browsers
  • Verify touch targets are appropriately sized
  • Check for CSS conflicts with custom code

Filter Button Issues

Common Problems

  • Filter button not responding to clicks
  • Icon colors not displaying correctly
  • Filter functionality not working
  • Mobile interaction problems

Solutions

  • Verify background color settings for icon
  • Check for JavaScript conflicts
  • Test filter functionality on actual devices
  • Ensure proper integration with collection filtering
  • Review mobile touch target sizing

Cart Integration Problems

Potential Issues

  • Cart counter not updating
  • Cart drawer conflicts
  • Integration with collection add-to-cart
  • Mobile cart interaction issues

Solutions

  • Check cart functionality across theme
  • Verify cart drawer settings compatibility
  • Test cart updates from collection pages
  • Ensure proper cart JavaScript integration
  • Review mobile cart interaction flow

📊 Performance Impact

Loading Efficiency

Optimized Performance

  • Lightweight section with minimal JavaScript
  • Efficient CSS for mobile menu animations
  • SVG icons for scalable graphics
  • Optimized cart integration

Mobile Performance

  • Fast-loading mobile menu
  • Smooth animations without lag
  • Efficient touch event handling
  • Minimal impact on collection page load times

SEO Considerations

  • Proper heading hierarchy for navigation
  • Accessible menu structure
  • Logo provides branding context
  • Clean HTML structure for search engines

🎯 Best Practices Summary

Setup Checklist

✅ Upload collection-specific logo in Theme Settings
✅ Enable "Show Collection Page Logo" setting
✅ Create and assign navigation menu for mobile interface
✅ Configure hamburger menu colors for visibility
✅ Set up cart integration and test functionality
✅ Configure date/time display if using promotional timing
✅ Test mobile menu functionality on actual devices
✅ Verify touch targets are appropriately sized
✅ Check color contrast for accessibility compliance
✅ Test integration with collection filtering
✅ Verify cart counter updates properly
✅ Ensure smooth mobile menu animations

Ongoing Optimization

Regular Maintenance

  • Monitor mobile menu performance during traffic spikes
  • Update navigation menu structure as collections change
  • Test new mobile devices for compatibility
  • Review color schemes when updating brand guidelines
  • Verify cart integration after theme updates

Conversion Optimization

  • Analyze mobile menu usage patterns
  • Test different menu structures for navigation efficiency
  • Monitor cart conversion rates from collection pages
  • Optimize filter button visibility for better engagement
  • Track user interaction with date/time promotional elements

🚀 Advanced Use Cases

Seasonal Collections

Dynamic Branding

  • Switch collection logos for seasonal campaigns
  • Coordinate menu colors with seasonal themes
  • Use date/time display for limited collection launches
  • Create cohesive seasonal collection experience

Product Launch Strategy

Launch Optimization

  • Highlight launch timing with date/time display
  • Use mobile menu for exclusive collection access
  • Coordinate cart styling with launch campaign
  • Create urgency through visual design elements

Multi-Category Stores

Complex Navigation

  • Organize extensive menu structures for large catalogs
  • Use nested menus for category hierarchies
  • Optimize mobile navigation for complex product ranges
  • Streamline collection-to-collection navigation

The Collection Logo Section provides essential navigation and branding functionality specifically optimized for collection pages, creating an enhanced browsing experience that supports product discovery while maintaining brand presence and providing easy access to cart and navigation features.

Need Help?