Product Logo Section
For Plain Jane and Plain Jane Interactive
What You'll Learn
How to configure the Product Logo Section for branding and cart display
Advanced customization options for logo, cart, and timezone features
How to set up cart counter styling and promotional timing displays
Best practices for product page header optimization and user experience
🎯 What is the Product Logo Section?
The Product Logo Section is a specialized header component designed specifically for product pages that combines branding, cart functionality, and optional timezone display. Unlike traditional page headers, this section is optimized for the product shopping experience and includes integrated cart counter and real-time information displays.
Key Features:
Product-specific logo display with custom sizing
Live cart counter with customizable styling
Optional date/time display with timezone support
Streamlined header design optimized for product pages
Mobile-responsive layout and interactions
Integration with global cart functionality
Available in:
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
💡 Note: This section specifically appears on product pages and works in conjunction with product layouts to provide optimal shopping experience.
🔧 How to Add Product Logo Section
Go to Online Store > Themes > Customize
Navigate to Products > Default product
Click Add section
Select Logo, Cart, & Clock (Product Logo Section)
Configure the logo, cart, and timezone settings
Position the section at the top of the product page layout
⚠️ Important: This section is designed for product pages specifically and includes cart functionality integrated with the product purchase flow.
🏢 Logo Configuration
Product Page Logo Display
Show Product Logo
Enable/disable logo display on product pages
Controlled via Theme Settings → Logo → "Show Product Page Logo"
Independent from other page logos (homepage, collection, etc.)
Logo Image Source
Uses the logo uploaded in Theme Settings → Logo → "Product Page Logo"
Falls back to default logo if product-specific logo not set
Supports PNG, JPG, and SVG formats
Logo Sizing
Product Screen Logo Size: Adjustable via theme settings
Range typically 50-200px width
Automatically maintains aspect ratio
Responsive scaling for mobile devices
Logo Linking & Navigation
Homepage Link
Logo automatically links to store homepage (routes.root_url)
Provides consistent site navigation from product pages
Opens in same window for seamless user experience
Accessibility Features
Includes proper alt attributes for screen readers
Keyboard navigation support
Touch-friendly sizing for mobile devices
🛒 Cart Counter Integration
Live Cart Display
Real-Time Updates
Shows current cart item count
Updates automatically when products added/removed
Synchronizes across all page interactions
No page refresh required for updates
Cart Text Customization
Cart Text Color: Color for "Cart" label text
Default: #000000 (Black)
Should contrast well with section background
Cart Quantity Indicator
Cart Count Badge
Cart Quantity Color: Text color for item count number
Default: #FFFFFF (White)
Cart Quantity Background Color: Badge background color
Default: #000000 (Black)
Badge Styling
Circular badge design for clear visibility
Automatically positioned relative to cart text
Scales appropriately for mobile viewing
High contrast for accessibility compliance
Cart Interaction
Cart Access
Clicking cart area can trigger cart drawer (if enabled)
Integrates with theme's cart functionality
Provides quick cart overview without leaving product page
Optimized for conversion and user experience
⏰ Date & Time Display
Timezone Information
Show Date/Time Toggle
Show Date/Time: Enable/disable timezone display
Default: Enabled
Useful for creating urgency or providing store context
Date Display
Date Color: Customizable color for date text
Default: #000000 (Black)
Shows current date in store timezone
Automatically updates daily
Time Display
Time Color: Customizable color for time text
Default: #000000 (Black)
Shows current time in store timezone
Updates in real-time
Alignment Options
Date/Time Positioning
Alignment: Left, Center, or Right positioning
Default: Right alignment
Allows coordination with logo and cart positioning
Responsive behavior on mobile devices
🎨 Layout & Design Configuration
Section Positioning
Header Structure
Logo positioned on left side
Cart counter positioned on right side
Date/time display integrated with cart area
Clean, minimal design aesthetic
Z-Index & Layering
Section positioned with z-index: 2 for proper layering
Ensures visibility over other page elements
Maintains accessibility for interactive elements
Spacing & Padding
Section Padding
Top padding: 25px (desktop)
Bottom padding: 10px (desktop)
Responsive adjustments for mobile devices
Logo Margins
Top margin: 5px
Bottom margin: 10px
Provides proper visual spacing
Cart Text Positioning
Top margin: 10px for alignment with logo
Coordinated spacing with date/time elements
📱 Mobile Optimization
Responsive Design
Mobile Layout
Logo scales appropriately for smaller screens
Cart counter maintains touch-friendly size
Date/time display adapts to available space
Maintains functionality across all devices
Touch Interactions
Cart area optimized for touch navigation
Logo link sized appropriately for mobile tapping
No small touch targets that could cause user frustration
Performance Considerations
Minimal JavaScript for real-time updates
Efficient CSS for smooth animations
Fast loading without impacting page speed
🔄 Integration with Product Experience
Shopping Flow Enhancement
Conversion Optimization
Cart counter provides immediate feedback
Logo maintains brand presence during shopping
Date/time can create urgency for limited offers
Streamlined header reduces distractions
User Experience Benefits
Consistent branding throughout shopping process
Easy cart access without leaving product page
Clear navigation back to homepage
Professional, trustworthy appearance
Coordination with Product Sections
Layout Harmony
Works with all product section layouts (Showcase, Thumbnail)
Maintains consistent header experience
Doesn't interfere with product image galleries
Coordinates with product page typography
💡 Advanced Customization Tips
Brand Consistency
Logo Coordination
Use product-specific logo if different from homepage
Maintain consistent sizing across product pages
Ensure logo quality at all screen sizes
Consider logo visibility against various product images
Color Strategy
Coordinate cart colors with product page elements
Ensure sufficient contrast for accessibility
Match date/time colors with overall theme
Test color combinations with different product backgrounds
Marketing Integration
Promotional Timing
Use date/time display for flash sales
Create urgency with countdown messaging
Coordinate with limited-time offers
Enhance seasonal campaigns
Cart Psychology
Use contrasting cart badge colors to draw attention
Position cart prominently for easy access
Maintain cart visibility throughout product browsing
Encourage cart completion with clear indicators
🔧 Troubleshooting
Logo Not Displaying
Common Issues
Logo not uploaded in Theme Settings → Logo → Product Page Logo
"Show Product Page Logo" setting disabled
Image file format not supported
Logo size setting too small to be visible
Solutions
Upload logo in Theme Settings first
Enable "Show Product Page Logo" toggle
Use PNG, JPG, or SVG formats
Increase logo size setting
Clear browser cache after changes
Cart Counter Not Updating
Potential Problems
JavaScript conflicts with other apps
Theme cache preventing real-time updates
Cart drawer conflicts with section
Browser compatibility issues
Solutions
Check for app conflicts in theme code
Clear theme cache and browser cache
Disable conflicting cart apps temporarily
Test in different browsers
Ensure cart functionality enabled in theme settings
Date/Time Display Issues
Common Problems
Timezone not set correctly in Shopify settings
Date/time colors too light to be visible
Text positioning conflicts with other elements
Mobile display formatting problems
Solutions
Verify timezone in Shopify Admin → Settings → General
Increase color contrast for better visibility
Adjust alignment settings for better positioning
Test on actual mobile devices for formatting
Check date/time translation settings if using multiple languages
📊 Performance Impact
Loading Efficiency
Minimal Resource Usage
Lightweight section with minimal JavaScript
CSS-based styling for fast rendering
No additional image loading beyond logo
Efficient cart counter updates
SEO Considerations
Logo provides proper branding for search engines
Clean HTML structure supports SEO
No negative impact on page speed scores
Proper heading hierarchy maintained
🎯 Best Practices Summary
Setup Checklist
✅ Upload product-specific logo in Theme Settings
✅ Enable "Show Product Page Logo" setting
✅ Configure cart text and badge colors
✅ Set appropriate logo size for mobile viewing
✅ Choose date/time display based on store needs
✅ Test cart counter functionality with actual products
✅ Verify color contrast for accessibility
✅ Check mobile display and touch interactions
✅ Coordinate colors with product page design
✅ Test logo link functionality to homepageOngoing Optimization
Regular Reviews
Monitor cart counter performance during high traffic
Test logo visibility with new product images
Update colors when refreshing brand guidelines
Verify date/time accuracy during timezone changes
Conversion Optimization
A/B test cart badge colors for better visibility
Monitor cart abandonment rates with section enabled
Track logo click-through rates to homepage
Analyze user interaction with date/time information
🚀 Advanced Use Cases
Seasonal Customization
Holiday Branding
Switch to seasonal logos for special events
Coordinate cart colors with holiday themes
Use date/time display for countdown to sales
Create cohesive seasonal shopping experience
Limited Edition Campaigns
Urgency Creation
Highlight current time for flash sales
Use cart styling to emphasize limited quantities
Coordinate with product scarcity messaging
Enhance premium product presentation
International Stores
Multi-Region Setup
Configure appropriate timezones for target markets
Consider cultural preferences for logo placement
Test cart functionality across different regions
Ensure date formats match local conventions
The Product Logo Section provides essential branding and functionality for product pages, creating a cohesive shopping experience that builds trust and encourages conversions while maintaining your brand presence throughout the customer journey.
Need Help?
💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6
📧 Email us at: [email protected]
💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website
Last updated