Main Theme Color
The main theme color is the primary color that defines your brand's visual identity throughout the Plain Jane theme. This color appears in key elements like buttons, links, accents, and interactive components.
🌈 Understanding Theme Colors
What the Main Color Controls
Your main theme color influences:
Primary buttons (Add to Cart, Buy Now, Submit)
Link colors throughout the site
Active menu states and navigation highlights
Form focus states and input highlights
Loading indicators and progress bars
Icon accents and decorative elements
Hover effects on interactive elements
Color Psychology in E-commerce
Choose colors that align with your brand personality:
Trust & Reliability
Blue tones (#2563EB, #1E40AF): Professional, trustworthy
Green tones (#059669, #047857): Growth, stability, money
Energy & Urgency
Red tones (#DC2626, #B91C1C): Excitement, urgency, power
Orange tones (#EA580C, #C2410C): Enthusiasm, warmth, call-to-action
Luxury & Sophistication
Purple tones (#7C3AED, #5B21B6): Premium, creative, luxury
Black/Charcoal (#1F2937, #111827): Elegant, sophisticated, modern
Natural & Organic
Earth tones (#A3A3A3, #78716C): Natural, sustainable, authentic
Soft greens (#10B981, #059669): Eco-friendly, health, nature
🛠️ Setting Your Main Color
Step 1: Access Theme Settings
Navigate to Theme Customizer
Go to Online Store → Themes
Click Customize on your Plain Jane theme
Find Theme Settings
Scroll down to Theme settings section
Look for Colors or Main theme color
Step 2: Choose Your Color
Using the Color Picker
Click the color box to open the picker
Drag the circle to select hue
Adjust brightness with the vertical slider
Fine-tune with hex codes for precise colors
Hex Color Input
Enter colors directly using hex codes:
#FF6B6B // Coral Red
#4ECDC4 // Turquoise
#45B7D1 // Sky Blue
#96CEB4 // Mint Green
#FFEAA7 // Warm Yellow
#DDA0DD // Plum PurpleStep 3: Preview Changes
Use preview mode to see changes in real-time
Test on different pages (homepage, product, collection)
Check mobile appearance for consistency
Verify readability of text over colored elements
🎯 Best Practices
Accessibility Considerations
Ensure your color choices meet accessibility standards:
Contrast Ratios
Normal text: Minimum 4.5:1 contrast ratio
Large text (18pt+): Minimum 3:1 contrast ratio
Interactive elements: Clear visual distinction
Brand Consistency
Match existing brand colors from your logo and marketing materials
Consider seasonal variations for special campaigns
Maintain consistency across all touchpoints
Document your color choices for team reference
Conversion Optimization
High-contrast CTAs: Make buttons stand out clearly
Trust signals: Blues and greens often perform well
Urgency elements: Reds and oranges for time-sensitive offers
A/B testing: Try different colors to optimize conversions
📱 Mobile Considerations
Touch Target Colors
Ensure sufficient contrast for touch elements
Test on actual devices under different lighting
Consider larger touch areas with colored backgrounds
Verify visibility in bright sunlight
Performance Impact
CSS optimization: Modern themes use efficient color rendering
Avoid complex gradients that might impact performance
Test loading times especially on slower devices
🐛 Troubleshooting
Common Issues
Color Not Appearing
Clear browser cache and reload the page
Check theme settings are saved properly
Verify color format (hex codes should include #)
Poor Contrast
Use darker colors for better text readability
Test with accessibility tools to verify contrast
Consider outlined buttons instead of filled ones
Inconsistent Display
Check across different pages for consistency
Test on various devices and screen types
Verify CSS isn't being overridden by custom code
Performance Issues
Simplify color schemes if experiencing slowdowns
Avoid animated color transitions on low-end devices
Use system colors when possible for better performance
Last updated