Site Builder — Colour Configuration
The Colour Configuration section allows you to customize the visual identity of your storefront without modifying any code. A carefully selected colour scheme improves branding, customer trust, and overall website appearance.
On this page
All colour and font changes are applied immediately throughout the storefront. No technical knowledge or code editing is required.
Overview
A consistent colour scheme helps:
- Strengthen brand recognition
- Improve website aesthetics
- Highlight important actions
- Create a professional shopping experience
Accessing Colour Configuration
To configure colours, follow these steps:
Open Site Builder
Navigate to the Site Builder section from your store dashboard.
Select Colour Config
Click on the Colour Config option in the Site Builder menu.
Choose Font Style
Select a font style that matches your brand identity.
Select Colour Combinations
Pick your preferred colour combinations from the available options.
Save Configuration
Click the Save button to apply your changes.
Preview Changes
Use the preview section to see how the selected colours appear on your store.
The selected colours are applied immediately throughout the storefront.
Font Style Selection
Font selection affects readability and branding. The chosen font is used across:
- Navigation menus
- Product pages
- Checkout pages
- Promotional sections
- Customer-facing content
Choose fonts that are easy to read on both desktop and mobile devices. 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.
Background Colour
The background colour is used throughout the website layout and content sections.
Text Colour
The text colour controls how content is displayed to customers. 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
Four-Colour Configuration
The Four-Colour Configuration option provides greater flexibility and branding control.
Background Colour
Defines the primary website background.
Text Colour
Controls text visibility and readability.
Primary Colour
The primary colour is used for important elements such as:
- Buy Now buttons
- Add to Cart buttons
- Navigation highlights
- Promotional banners
- Important actions
Secondary Colour
The secondary colour is used for supporting visual elements such as:
- Hover effects
- Secondary buttons
- Background accents
- Informational sections
This configuration is recommended for businesses that want a stronger visual identity and more control over their storefront appearance.
Live Preview
The preview section allows you to see how selected colours will appear. The preview updates in real time and helps ensure:
- Colours match your branding
- Text remains readable
- Buttons are visually appealing
- The overall design remains consistent
Best Practices
When selecting colours:
- Use colours that align with your brand identity
- Maintain high contrast between text and background
- Avoid excessive use of bright colours
- Keep primary actions visually distinct
- Test colour combinations on both desktop and mobile devices
- Ensure all important buttons remain clearly visible
A well-designed colour scheme helps create a professional storefront and improves the overall shopping experience for your customers.