# Product Header Section > **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?** * πŸ’¬ **Join our community on Discord:** * πŸ“§ **Email us at:** * πŸ’» **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/readme-1/sections-and-features/product-header-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.