Product Header Section
For Plain Jane and Plain Jane Interactive
What You'll Learn
How to configure the Product Header section for branding and navigation
Advanced typography and color customization options for product text elements
How to set up price display formatting and sale price styling
Best practices for product page text hierarchy and readability
🎯 What is the Product Header Section?
The Product Header Section is a specialized typography and color control system designed specifically for product pages. Unlike a traditional page header, this section focuses on the visual styling of key product information elements including titles, descriptions, prices, and sale indicators.
Key Features:
Advanced typography controls for product titles and descriptions
Customizable price display formatting with currency options
Sale price styling with highlighted colors
Consistent text color management across all product elements
Mobile-responsive typography scaling
Integration with product page layouts
Available in:
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
💡 Note: This section controls the styling of product text elements rather than layout structure. It works in conjunction with Product Section layouts.
🔧 How to Configure Product Header Section
Go to Online Store > Themes > Customize
Navigate to Products > Default product
Look for Product Header or Text Colors section
Configure the typography and color settings
Preview changes on different products to ensure consistency
⚠️ Important: This section affects the styling of product text elements across all product page layouts (Showcase, Thumbnail, etc.).
✏️ Typography & Color Controls
Product Title Styling
Product Title Color
Set the primary color for product names
Should provide strong contrast against page background
Typically uses brand primary color or neutral dark color
Default: #000000 (Black)
Best Practices:
Use high contrast colors for accessibility
Maintain consistency with overall brand color scheme
Test readability on both light and dark backgrounds
Consider mobile viewing conditions
Product Description Styling
Product Description Color
Controls the color of product description text
Usually a slightly lighter shade than the title for hierarchy
Should remain highly readable while being less prominent than title
Default: #000000 (Black)
Content Guidelines:
Keep descriptions concise and scannable
Use consistent tone and voice across products
Include key features and benefits
Optimize for mobile reading
💰 Price Display Configuration
Primary Price Styling
Price Color
Set the color for regular product pricing
Often matches product title color for consistency
May use brand accent color to highlight pricing
Default: #000000 (Black)
Price Font Size
Adjustable range: 10-30px
Default: 24px
Should be prominent enough to be easily seen
Consider price importance in purchase decision
Currency Format Options
Currency Display Settings
With Currency: Shows full currency symbol (e.g., "$24.99")
Without Currency: Shows only numerical value (e.g., "24.99")
Default: Without Currency
When to Use Each Format:
With Currency: International stores, multiple currencies, clarity for new customers
Without Currency: Clean minimal aesthetic, domestic stores, space constraints
🏷️ Sale Price & Promotion Styling
Sale Text Configuration
Sale Text Color
Color for "Was" or "Originally" text preceding crossed-out prices
Usually a neutral gray or muted color
Should be readable but less prominent than sale price
Default: #000000 (Black)
Typical Sale Text Examples:
"Was $XX.XX"
"Originally $XX.XX"
"MSRP $XX.XX"
"Compare at $XX.XX"
Sale Price Styling
Sale Price Color
Color for the highlighted sale or discounted price
Commonly uses red, orange, or brand accent color
Should create visual urgency while maintaining readability
Default: #FF0000 (Red)
Sale Price Font Size
Adjustable range: 10-30px
Default: 16px
Often smaller than regular price to show it's a comparison
Should maintain visual hierarchy with current price
🎨 Visual Hierarchy Best Practices
Color Strategy
Information Priority Order:
Product Title - Highest contrast, most prominent
Current Price - Bold, clear, brand color
Product Description - Readable but secondary
Sale Price - Attention-grabbing accent color
Sale Text - Muted, supporting information
Typography Hierarchy
Font Size Recommendations:
Product Title: Largest, typically 24-32px desktop
Current Price: Prominent, 20-28px desktop
Description: Readable, 14-16px desktop
Sale Price: Supporting, 14-18px desktop
Color Contrast Guidelines
Accessibility Standards:
Minimum 4.5:1 contrast ratio for normal text
Minimum 3:1 contrast ratio for large text (18px+ bold or 24px+)
Test with accessibility tools like WebAIM Contrast Checker
Consider colorblind users with sufficient brightness contrast
📱 Mobile Optimization
Responsive Typography
Mobile Considerations:
All font sizes automatically scale for mobile devices
Text hierarchy remains consistent across screen sizes
Touch-friendly spacing maintained around clickable elements
Reading distance optimized for mobile viewing
Mobile-Specific Adjustments:
Slightly smaller font sizes for space efficiency
Increased line height for better readability
Optimized color contrast for outdoor viewing conditions
Consideration for thumb navigation around text elements
Mobile Performance
Loading Optimization:
CSS color values load instantly with page
No additional image assets required for text styling
Minimal impact on page load speed
Efficient rendering across all mobile devices
🔄 Integration with Product Layouts
Showcase Layout Integration
When using Product Section (Showcase):
Text colors apply consistently to traditional layout
Typography scales appropriately for side-by-side display
Price styling integrates with thumbnail gallery positioning
Description formatting works with expanded text areas
Thumbnail Layout Integration
When using Product Section (Thumbnail):
Colors work seamlessly with modern grid-based layout
Typography optimizes for bottom modal experience on mobile
Price display adapts to advanced variant selection
Sale pricing integrates with badge system
💡 Advanced Customization Tips
Brand Consistency
Color Coordination:
Match product title colors to brand primary colors
Use sale price colors that align with promotional branding
Coordinate with button colors and accent elements
Maintain consistency across all product pages
Typography Coordination:
Align font sizes with overall theme typography scale
Consider how product text relates to section headers
Maintain readable hierarchy throughout the page
Test with various product title lengths
Conversion Optimization
Price Psychology:
Use red or orange for sale prices to create urgency
Make regular prices prominent and trustworthy
Consider hiding currency symbols for cleaner aesthetic
Test different color combinations for conversion impact
User Experience:
Ensure quick scanability of key information
Prioritize mobile readability for on-the-go shoppers
Make price information immediately clear and trustworthy
Create visual flow from title to price to action
🔧 Troubleshooting
Color Not Applying
Common Issues:
Browser cache may need clearing after color changes
Some third-party apps may override theme colors
Custom CSS might be conflicting with theme settings
Ensure changes are saved and published
Solutions:
Clear browser cache and refresh page
Check for app conflicts in theme code
Review any custom CSS for color overrides
Test in incognito/private browsing mode
Text Readability Problems
Accessibility Issues:
Insufficient contrast between text and background
Font sizes too small for comfortable reading
Color combinations difficult for colorblind users
Mobile viewing challenges
Solutions:
Use contrast checking tools to verify accessibility
Test font sizes on actual mobile devices
Consider colorblind-friendly color combinations
Get feedback from users with accessibility needs
Mobile Display Issues
Common Problems:
Text appearing too small on mobile devices
Color contrast insufficient in bright lighting
Typography hierarchy unclear on small screens
Touch targets too close to text elements
Solutions:
Test on actual mobile devices, not just browser resize
Increase font sizes if mobile readability is poor
Check color contrast in various lighting conditions
Ensure adequate spacing around clickable elements
📊 Performance Impact
Loading Efficiency
Minimal Resource Usage:
Text styling uses efficient CSS properties
No additional image or font loading required
Instant application of color changes
No JavaScript required for basic functionality
SEO Benefits:
Clean HTML structure maintains search engine readability
Proper heading hierarchy supports SEO
Accessible color contrast improves user experience signals
Fast loading contributes to page speed scores
🎯 Best Practices Summary
Setup Checklist
Ongoing Maintenance
Regularly review color choices for brand consistency
Test new products with existing typography settings
Monitor customer feedback about readability
Update colors when refreshing brand guidelines
Ensure accessibility compliance with any changes
The Product Header section provides the foundation for creating professional, readable, and conversion-optimized product pages. Proper configuration ensures customers can quickly find and understand key product information while maintaining your brand aesthetic.
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