Editing colors and fonts

Colors and fonts are the foundation of your store's visual identity. Here's how to customize them using Clyro's AI-powered editor.

Changing Colors

Clyro understands color requests in multiple formats. You can use:

•Color names: "red", "navy blue", "forest green"
•Hex codes: "#FF5733", "#1a1a2e"
•Descriptive terms: "darker", "lighter", "more muted"

Example Color Commands

"Change the header background to navy blue"

"Make the add to cart button #10B981"

"Update all links to match my brand color #FF6B35"

"Make the footer text lighter"

Color Areas You Can Change

•Header and navigation backgrounds
•Button colors (primary, secondary, hover states)
•Text colors (headings, body, links)
•Background colors (sections, cards, footer)
•Border and divider colors
•Accent colors and highlights

Pro tip: Be specific about which element you want to change. "Change the header background" is better than just "change the background."

Changing Fonts

Clyro can change your store's typography using fonts from Google Fonts or your theme's built-in options.

Example Font Commands

"Change the heading font to Playfair Display"

"Use Inter for all body text"

"Make the navigation font bold"

"Increase the product title font size"

Font Properties You Can Adjust

•Font family: The typeface used
•Font size: How large the text appears
•Font weight: Light, regular, medium, bold, etc.
•Line height: Space between lines of text
•Letter spacing: Space between characters
•Text transform: Uppercase, lowercase, capitalize

Creating a Consistent Brand Look

For the best results, consider making changes in batches:

1.Start with your primary brand color for buttons and accents
2.Choose complementary colors for secondary elements
3.Select a heading font that reflects your brand personality
4.Choose a readable body font
5.Ensure sufficient contrast for accessibility

Color Consistency Tips

To maintain consistency across your store:

•Use the same hex codes for related elements
•Ask Clyro to "update all buttons" rather than changing them one by one
•Request changes to "hover states" to match your color scheme

Accessibility note: Ensure your text has enough contrast against its background. Clyro will warn you if your color choices might cause readability issues.

Popular Font Combinations

Here are some tried-and-true font pairings:

•Modern and Clean: Inter (body) + Inter (headings)
•Elegant and Classic: Lora (body) + Playfair Display (headings)
•Bold and Contemporary: Open Sans (body) + Montserrat (headings)
•Friendly and Approachable: Nunito (body) + Poppins (headings)