Colors

Edpro uses a flexible color system that allows you to customize your store’s appearance to match your brand.

Accessing Color Settings

1. Open the theme editor
2. Go to Theme settings (gear icon)
3. Navigate to Design system → Colors

Color Palette

The theme uses 12 main colors plus a special error color:

Primary Colors (1-6)

Extended Colors (7-12)

Special Colors

Setting Colors

1. Click on any color swatch
2. Use the color picker to select a color
3. Or enter a hex value directly (e.g., #FF5733)
4. Click outside to apply

Color Usage Throughout Theme

Text Colors

• Color 1 - Primary headings and body text
• Color 2 - Secondary text, links
• Color 12 - Muted/helper text
• Error - Error messages, sale prices

Background Colors

• Color 5 - Main page background
• Color 4 - Section backgrounds
• Color 9 - Alternative section backgrounds
• Color 10 - Accent backgrounds

Interactive Elements

• Color 2 - Primary buttons
• Color 6 - Accent elements
• Color 11 - Hover states

Borders & Dividers

• Color 3 - Borders, dividers, subtle outlines

Best Practices

Brand Alignment

1. Set Color 1 to your primary brand color (or use for text)
2. Set Color 6 as your accent color for highlights
3. Ensure sufficient contrast for readability

Contrast Requirements

• Text should have at least 4.5:1 contrast ratio
• Large text needs at least 3:1 contrast
• Use WebAIM Contrast Checker  to verify

Consistent Palette

• Limit your palette to 3-5 main colors
• Use variations of the same hues
• Test colors together before finalizing

Common Color Schemes

Light & Clean

• Color 5: White (#FFFFFF)
• Color 1: Dark gray (#1A1A1A)
• Color 6: Brand accent color

Dark & Bold

• Color 5: Dark background (#1A1A1A)
• Color 1: Light text (#F5F5F5)
• Color 6: Vibrant accent

Warm & Inviting

• Color 5: Cream (#FDF8F3)
• Color 1: Brown (#3D2B1F)
• Color 6: Terracotta (#C65D3B)

Common Tasks

Change primary text color

1. Theme settings → Design system → Colors
2. Adjust Color 1

Change button color

1. Theme settings → Design system → Colors
2. Adjust Color 2 (used for primary buttons)

Change background color

1. Theme settings → Design system → Colors
2. Adjust Color 5 for main background

Change accent color

1. Theme settings → Design system → Colors
2. Adjust Color 6 for highlights and accents

Change sale price color

1. Theme settings → Design system → Colors
2. Adjust Error color

Troubleshooting

Colors not applying

• Clear your browser cache
• Check if section has specific color overrides

Text hard to read

• Increase contrast between text and background
• Use WebAIM Contrast Checker

Colors look different on different screens

• Use standardized hex values
• Test on multiple devices

Next: Set up your typography