Frontend Colors

Admin Dashboard > Configuration > Design & Layout > Frontend Colors

The Frontend Colors section in the Admin Dashboard enables administrators to customize the color scheme of the storefront across various sections. This feature ensures that the visual appearance of the website aligns with branding while enhancing the customer experience.

Purpose and Usage

The Frontend Colors settings allow administrators to:

• Define consistent and attractive visual styles for the storefront.
• Match the store’s color scheme with the company’s brand identity.
• Enhance readability and usability through thoughtful color contrasts and styling.

By customizing the storefront colors, businesses can create a visually cohesive and engaging shopping environment.

Sub-Sections and Features

1. General

Overview

The General section manages the core color settings for the storefront, including text, links, buttons, and labels.

Options:

• General Color Settings:

  • Configure primary and secondary theme colors for the site.

• Theme Colors:

  • Set the base and accent colors that define the store’s visual theme.

• Basic Colors:

  • Adjust background, text, and default color schemes.

• Text Color:

  • Specify the color for body text to ensure readability.

• Price Color:

  • Set the color of product prices to make them visually distinct.

• Link Color and Link Hover Color:

  • Define the default and hover states for hyperlinks.

• Note Message Colors:

  • Configure the text and background colors for informational or error messages.

• Buttons:

  • Set background, text, and border colors for buttons, including hover states.

• Products Label:

  • Assign colors to the "New" and "Sale" labels displayed on product thumbnails.

2. Header

Overview

The Header section allows customization of the topmost part of the site, including the navigation and search bar.

Options:

• Topbar:

  • Adjust background, link, and hover colors for the top bar area.

• Header:

  • Customize the header’s background, text, and search bar colors.

• Buttons Style:

  • Configure button styles within the header, including hover effects and border colors.

• Products Label:

  • Set colors for product labels appearing in the header.

3. Megamenu

Overview

The Megamenu section manages the appearance of dropdown navigation menus.

Options:

• NavBar Colors:

  • Configure background, hover, and text colors for the navigation bar.

• Dropdown Colors:

  • Set background, hover, and border colors for dropdown menus.

• Text and Heading Colors:

  • Adjust text, link, and heading colors within the megamenu.

4. Footer

Overview

The Footer section customizes the colors for the site’s footer, including text, links, and background areas.

Options:

• Footer Top and Bottom:

  • Adjust background, text, and link colors for both the top and bottom sections.

• Icons and Borders:

  • Set colors for icons and border elements.

• CopyRights Bar:

  • Customize the colors for the copyright area.

5. Checkout

Overview

The Checkout section defines the visual style of the checkout page.

Options:

• Horizontal Line Color:
  • Configure the color of dividers used during checkout.

6. Home Page Section Dividers

Overview

This section customizes the appearance of dividers on the home page.

Options:

• Background and Text Colors:

  • Set background and text colors for section dividers.

• Text Font Size:

  • Adjust the font size of text within dividers.

7. Category

Overview

The Category section manages the color settings for category pages.

Options:

• Category Title and Description Colors:
  • Set colors for the title and description text displayed on category pages.

8. Product Info

Overview

The Product Info section customizes the color scheme for product detail pages.

Options:

• Tabs:
  • Configure background and text colors for tabs in different states (default, hover, active).