Color & Style Configuration

The Color & Style section is the foundation of your storefront's visual identity. It allows you to customize the appearance of your entire website without modifying any code. The settings configured here apply globally across all Site Builder sections, ensuring a consistent and professional look throughout your store.

On this page

Global Settings

Color & Style settings apply across all Site Builder sections. Changes made here will affect your entire storefront, including the Navigation Bar, Hero Section, Featured Products, and all other sections.

Overview

A consistent colour scheme helps:

  • Strengthen brand recognition across all pages
  • Improve website aesthetics and visual appeal
  • Highlight important actions and call-to-buttons
  • Create a professional shopping experience
  • Ensure consistency between all Site Builder sections

Accessing Color & Style

To configure your store's colors and fonts:

1

Open Site Builder

Navigate to Site Builder from your store dashboard.

2

Select Color & Style

Click on the Color & Style option in the Site Builder menu.

3

Choose Font Style

Select a font that matches your brand identity from the available options.

4

Select Colour Mode

Choose between Two-Colour or Four-Colour configuration.

5

Pick Your Colours

Select your preferred colour combinations from the colour picker.

6

Preview Changes

Review the live preview to see how colours appear across sections.

7

Save Configuration

Click Save to apply your changes to the live storefront.

Font Style Selection

Font selection affects readability and branding across your entire store. The chosen font is used consistently across:

  • Navigation menus and headers
  • Product pages and descriptions
  • Checkout pages and forms
  • Promotional sections and banners
  • Customer-facing content and notifications
  • Footer and contact information
Font Tip

Choose fonts that are easy to read on both desktop and mobile devices. Sans-serif fonts generally work best for e-commerce stores. Avoid overly decorative fonts for body text.

Two-Colour Configuration

The Two-Colour Configuration option is ideal for businesses that prefer a clean and minimal design. This mode uses only two colours across your entire storefront.

Two-colour minimal design example
Figure 1: Two-colour minimal design applied across storefront sections

Background Colour

The background colour is used throughout the website layout and content sections, including the Navigation Bar, Hero Section, Product grids, and Footer.

Text Colour

The text colour controls how all content is displayed to customers across every section. A strong contrast between background and text improves readability and accessibility.

Recommended Usage

// Popular combinations
White Background + Black Text
Dark Background + White Text
Light Yellow Background + Black Text

This configuration works well for:

  • Corporate websites
  • Professional brands
  • Minimalist stores
  • Businesses seeking a clean, distraction-free look

Four-Colour Configuration

The Four-Colour Configuration option provides greater flexibility and branding control. This mode allows you to define four distinct colours that work together across all sections.

Four-colour branded design example
Figure 2: Four-colour branded design with distinct primary and secondary accents

Background Colour

Defines the primary website background used across all sections.

Text Colour

Controls text visibility and readability throughout the storefront.

Primary Colour

The primary colour is used for important elements such as:

  • Buy Now buttons
  • Add to Cart buttons
  • Navigation highlights and active states
  • Promotional banners and call-to-action areas
  • Important action buttons across all sections

Secondary Colour

The secondary colour is used for supporting visual elements such as:

  • Hover effects on buttons and links
  • Secondary buttons and outlined actions
  • Background accents and section dividers
  • Informational sections and badges
  • Trust badge backgrounds and highlights
Recommended

This configuration is recommended for businesses that want a stronger visual identity and more control over their storefront appearance. It provides better visual hierarchy across Navigation Bar, Hero Section, Product grids, and other sections.

Live Preview

The preview section allows you to see how selected colours will appear across your storefront. The preview updates in real time and helps ensure:

  • Colours match your brand identity
  • Text remains readable on all backgrounds
  • Buttons are visually appealing and noticeable
  • The overall design remains consistent across sections
  • Contrast is sufficient for accessibility
Live preview of colour changes
Figure 3: Real-time preview showing colour changes across multiple sections

Best Practices

When selecting colours for your storefront:

  • Use colours that align with your brand identity and logo
  • Maintain high contrast between text and background for readability
  • Avoid excessive use of bright or neon colours
  • Keep primary actions (Buy Now, Add to Cart) visually distinct
  • Test colour combinations on both desktop and mobile devices
  • Ensure all important buttons remain clearly visible
  • Consider colour psychology — blue conveys trust, green suggests growth
  • Limit your palette to avoid a cluttered appearance
Professional Storefront

A well-designed colour scheme helps create a professional storefront and improves the overall shopping experience for your customers across all Site Builder sections.