Product Header Section

The Product Header Section is a specialized typography and color control system designed specifically for product pages.

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

  1. Go to Online Store > Themes > Customize
  2. Navigate to Products > Default product
  3. Look for Product Header or Text Colors section
  4. Configure the typography and color settings
  5. 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:

  1. Product Title - Highest contrast, most prominent
  2. Current Price - Bold, clear, brand color
  3. Product Description - Readable but secondary
  4. Sale Price - Attention-grabbing accent color
  5. 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

✅ Set product title color with high contrast
✅ Configure price color for clear visibility
✅ Choose sale price color that creates urgency
✅ Test currency format preference (with/without symbol)
✅ Verify description color provides good readability
✅ Check all colors for accessibility compliance
✅ Test typography hierarchy on mobile devices
✅ Ensure integration with chosen product layout
✅ Review consistency across different product types
✅ Test with actual product content and images

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?