> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Change customer order status color

### ⚠️ Kindly take note :

* All code edited will need to re-edit code again if you switch to a new theme template
* We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
* These steps require to edit coding file that found in the new theme, example: Aroma, Kiddy, Vivid & etc. For 2020 or older themes, may refer [this link](/en/article/display-product-quantity-sku-on-product-page-2020-themes-3p7nna/)

###### In this article:
1. [Change Online Store order status background color.](#1-1-change-online-store-order-status-background-color)
2. [Change Online Store order status font color.](#1-2-change-online-store-order-status-font-color)
---

This customize is to changing order status color at customer account that login from online store to show designated color that suit your businesses. There's 3 types of status in general:
* Paid / Fulfilled status (complete order)
* Unpaid / Unfulfilled status (pending order)
* Cancelled status (Void order)

# 1. Change Online Store order status background color

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > assets >  **customer.css** > look for:
* `label-tag` (indicate **complete order** status color)
* `label-tag.label-tag-warning` (indicate **pending order** status color)
* `label-tag.label-tag-alert` (indicate **Void order** status color)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_6n0mjo.png)

Step 2 : change `background-color` to desired color by searching color code from this [website](https://html-color.codes/). 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_o5hwea.png)

There's 2 type of color code being use:
* RGBA = Red, Green, Blue, Alpha (Aplha = color transperency, 0 means transperent, 1 = means solid color), example: rgba(0,0,0,0.1)
* HEX = Hex codes are a hexadecimal format for identifying colors in HTML, CSS and SVG, example: #faef9b

Step 3: Save.

Example:

Before
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_i6ydtt.png)

After

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_175udcs.png)
---

# 2. Change Online Store order status font color.

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > assets >  **customer.css** > look for:
* `label-tag` (indicate **complete order** status color)
* `label-tag.label-tag-warning` (indicate **pending order** status color)
* `label-tag.label-tag-alert` (indicate **Void order** status color)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_6n0mjo.png)

Step 2 :  Add this code `color: white;` to each line that you like to change the font color, may use basic color command (Black, Blue, White, Green, Red and etc)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ihambf.png)

Example:

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_kzmnt.png)