# Color

Change the color scheme to match the website's look and feel

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.&#x20;

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.&#x20;

Please follow this link for more clearly about Color Scheme: [https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme)

To customize 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

**Site background**: Your site background color

**Primary**: You can change the color when hover to Blog title, Add to cart button, Filter, Sort by,...

**Text color**: You can change the text color of your store.

**Heading**: You can change Heading of some sections like: Product form, Filter, Sidebar collection, Layout switch, ...

**Link color**: You can change color of the Links on your store.

**Link color hover**: You can change color when hover to the Links on your store.

**Border color**: Border color in your store.

<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FgmzDrunvbny4p2vQrbQe%2Fimage.png?alt=media&#x26;token=0adce27b-ff1f-4769-99e9-9a463bf4b968" alt=""><figcaption></figcaption></figure>

## Button color <a href="#id-2.button-color" id="id-2.button-color"></a>

Change 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, ...)
* **Button secondary:** 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 have underline as links in stead of border

<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FO8E83bkAhg8QT1G0GMkb%2Fimage.png?alt=media&#x26;token=5fa8dfa8-b9d6-4cad-ac23-e05c618d1c4e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2Fl7Gfc5bVdxyxLgz6SgEc%2Fimage.png?alt=media&#x26;token=dde6ac9b-06b7-469a-9bb6-c758c6ef9945" alt=""><figcaption></figcaption></figure>
