# Color

You can define different color schemes in your theme settings and apply the color schemes to different sections throughout your online store with a color scheme picker.

A color scheme is a set of colors. Your theme has a set of default color schemes applied that you can change at any time in the theme editor. You can add your brand colors to ensure a cohesive application of your color palette across your online store.

Please follow this link for more clearly about **Color Scheme**: <https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme>

To customize the color in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Colors**
3. Make necessary changes
4. **Save**
   {% endhint %}

**Please follow the document to change the colors on your store.**

## General color

<table><thead><tr><th width="372">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Site background</strong></td><td>Your site background color</td></tr><tr><td><strong>Primary</strong></td><td>You can change the color when hover to Blog title, Add to cart button, Filter, Sort by,...</td></tr><tr><td><strong>Heading</strong></td><td>You can change Heading of some sections like: Product form, Filter, Sidebar collection, Layout switch, ...</td></tr><tr><td><strong>Border color</strong></td><td>Border color in your store.</td></tr></tbody></table>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FOfHHTmt3mRHrSq1rE0FR%2Fimage.png?alt=media&#x26;token=65d47d8b-c847-44f3-84dd-46bec93b4a2c" alt=""><figcaption></figcaption></figure>

## Button color

Change the background and text color for all call-to-action buttons and button hover.

|                    |                                                                                                                                              |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button primary** | used for the most important or prominent action on your webpage (ex: "Submit" button on a form, "Buy Now" button on an e-commerce site, ...) |
| **Outline button** | used for actions that are less important or serve as alternatives to the primary action (ex: a "Cancel" or "Reset" button in a form, ...)    |
| **Button link**    | buttons are underlined as links instead of border                                                                                            |

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FMTlDZKV44X8MwcoHusym%2Fimage.png?alt=media&#x26;token=041672af-6ac1-4bca-a9be-463950f4bdbd" alt=""><figcaption></figcaption></figure>