Customize FreshCart Theme

How to change color variables ?

Here, we will go over how you can customize the theme/colors in our template.

Theme's colors variables are defined in /styles/theme/_variables.scss file, but it's not preferable to modify this core style sheet file. If you want to override values of these variables, you can use below file i.e. _user-variables.scss. To update primary colors to something else navigate to below mentioned theme file and update value to desired colors in themes you like.

In order to demonstrate this, here is a code example you can paste into /styles/_user-variables.scss, save the file and check the result of customized colors.

// Theme Colors
$primary: #ef1e65 !default;
$secondary: #424e68 !default;
$success: #6786b7 !default;
$info: #c8c6c4 !default;
$warning: #b4c9e1 !default;
$danger: #dd4040 !default;
$light: #f2f2f2 !default;
$dark: #000101 !default;

// Light Colors
$light-primary: #ffeef7 !default;
$light-secondary: #707785 !default;
$light-success: #aeb6c5 !default;
$light-info: #dfddda !default;
$light-warning: #eaecf0 !default;
$light-danger: #f27474 !default;
$light-dark: #151717 !default;

// Dark Colors
$dark-primary: #cb0547 !default;
$dark-secondary: #2b3957 !default;
$dark-success: #476ba5 !default;
$dark-danger: #d32424 !default;
$dark-warning: #85aad3 !default;
$dark-info: #b09377 !default;

How to change logo?

Here, we will go over how you can change or replace current/default branding by replacing the light and dark versions of logo.

Open the above mentioned file, located on sourcecode root and modify urls for logo and logoWhite to change logo.

app: {
  ...
  logo: "/images/logo/freshcart-logo.svg",
  logoWhite: "/images/logo/freshcart-white-logo.svg",
  ...
}

How to change Favicon?

To change the favicon of the theme, you just need to replace favicon.ico file located at below path.