How to Set a Website's Header and Button Color Scheme

Your website’s color scheme plays a key role in how your brand is perceived. With DecoNetwork’s Style Editor, you can quickly customize your header, navigation, buttons, and fonts to create a consistent and professional look across your entire site.

In This Article

• Prerequisites
• Why Customize Your Website Style
• Step 1: Open the Style Editor
• Step 2: Customize Header & Navigation Colors
• Step 3: Preview Your Changes
• Step 4: Configure Fonts
• Step 5: Customize Button Styles
• Best Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Customize Your Website Style

Customizing your website’s colors and typography ensures your storefront reflects your brand identity and provides a better customer experience.

• Strengthen your brand: Use consistent colors and fonts across your site
• Improve navigation clarity: Highlight active and hover states for better usability
• Create visual appeal: Make buttons and headers stand out
• Enhance conversions: Well-designed buttons encourage user interaction

Step 1: Open the Style Editor

1. Go to Admin → Websites
2. Select your website and click Edit Website → Website Pages
3. Open Design → Style Editor

The Style Editor is where you control the global fonts and color scheme used throughout your website. Settings vary depending on the theme applied.

Step 2: Customize Header & Navigation Colors

1. In the Style Editor, locate the Header settings

   

   Adjust navigation background, text, hover, and active states

2. Configure the following:
   • Navigation Background: Sets the color of the menu bar

   • Navigation Text Settings (click the brush icon next to the Navigation item): Controls the menu text color and style

     

     Adjust navigation background, text, hover, and active states

     • Hover State: Defines how menu items appear when hovered
     • Active State: Highlights the current page
   • Top Bar: Styles the upper links area (if enabled)

You can experiment with different combinations to create a color scheme that aligns with your brand.

Step 3: Preview Your Changes

1. Click Save
2. Click Preview

In preview mode:

• Hover over navigation items to see hover effects
• Click into a page to confirm the active state styling

Step 4: Configure Fonts

1. In the Style Editor, locate the Headings settings
2. Choose fonts for:
   • H1–H5 headings
   • General site typography

These settings ensure consistent text styling across all pages.

Step 5: Customize Button Styles

1. In the Style Editor, open the Buttons section
2. Click on a button to configure its default button style:
   • Background Color
   • Text Color
   • Border Width & Color
   • Button Roundness
3. Configure the Hover State to define how buttons change when interacted with

Button styling helps guide users toward key actions such as adding products to cart or proceeding to checkout.

Best Practice Tips

Troubleshooting

• No navigation visible: Ensure pages are enabled with Show in Menu
• Changes not appearing: Click Save and refresh preview
• Poor readability: Adjust contrast between text and background colors

FAQs

• Can I use custom brand colors?
  Yes, you can enter custom color values to match your exact branding.
• Do these changes apply to all pages?
  Yes, the Style Editor controls global styles across your entire website.
• Can I change styles later?
  Absolutely. You can update colors, fonts, and buttons at any time.

Additional Resources

• Header Layout
• Button Widget
• Style Editor