# Global CSS Variables

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.** 

{% hint style="info" %}
*If the values don't update you may have to add !important at the end.*
{% endhint %}

```
--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

```css

.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;
}

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.northcommerce.com/north-commerce/styling/global-css-variables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.