Global CSS Variables

The North Commerce Component's styling are defined by a CSS & there is a few CSS variables you can adjust that will update all of the components at once.

This won't be an extensive tutorial on how to use hooks on the product page, we will just cover basic CSS styling so you can update our beautiful default orange color.

Copy and paste the code below in the theme customizer of your WordPress site or any other place your theme or builder likes global css.

You can add your own colors by replacing the hex values after each variable. So for example if you'd like to change the theme color, you can just replace the #FF5500 and add your own hex color.

If the values don't update you may have to add !important at the end.

--primary-theme-color: #000000 !important;

You can add this block of code inside your global CSS menu or customizer to replace all of the theme colors on your product

.nc-global-styles {
  --primary-theme-color: #FF5500;
  
  --primary-font: inherit, 'sans-serif';
  --primary-font-color: #000000;
  --secondary-font-color: #ffffff;
  --subtext-font-color: #747E94;

  --primary-body-font-size: 16px;
  --secondary-body-font-size: 12px;

  --primary-btn-font-color: #ffffff;

  --primary-border-color: #FF5500;
  --primary-input-border-color: #E5EBF1;
  --primary-top-border-color: #e1e1e1;
  --primary-bottom-border-color: #e1e1e1;
  --primary-inactve-border-color: #EEF1FB;
 
  --primary-error-color: #ff0051;
  --error-font-size: 12px;

  --swatch-border-color: #f0f0f0;
  --swatch-background-color: #ADD8E6;
  --disabled-qty: #F5F5F5;
  --disabled-add-to-cart: #d3d4d5;

  // Utils for BGs & Grid Elements
  --black: #000000;
  --white: #FFFFFF;
  --gray: #FAFAFA;
  --primary-overlay-bg-color: #00000080; // 80% opacity
  --width-aside: 280px;
  --container-border: #e4e8ec;
}