# General colors

Here you can change color for many elements on theme.

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **General colors.**

### Body

| Settings            | Meaning                                    |
| ------------------- | ------------------------------------------ |
| Background          | The background color of an entire page.    |
| Background gradient | The background gradient of an entire page. |

### Placeholder

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F1kLNkUwIJiQfqemZ1evp%2Fimage.png?alt=media&#x26;token=d64ee1dc-6bcc-4b5e-abe6-068d77ecb935" alt=""><figcaption></figcaption></figure>

| Settings   | Meaning                                             |
| ---------- | --------------------------------------------------- |
| Background | Use as a placeholder background for loading images. |

### Warning

| Settings   | Meaning                                    |
| ---------- | ------------------------------------------ |
| Text       | The text color of the warning popup.       |
| Background | The background color of the warning popup. |

### Text

| Settings         | Meaning                                                                                                                                                                                                                                                                                                                                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Default text     | <p>The default color of the text for an entire page.</p><p></p><p>It is applied to elements that have not been assigned a specific color.</p>                                                                                                                                                                                                                                                               |
| Alternative text | <p>The color of the alternative text. <br></p><p>It is being applied to elements:  </p><ul><li>Text on product compare popup</li><li>Text on compare color popup</li><li>Product title on Bundle section</li><li>Varinant name on sidecart</li><li>'Your cart is empty' or 'Secure Shopping Guarantee' text on cart page</li><li>Date text on '\[Sidebar] Recent Post' block</li><li>..<em>.</em></li></ul> |
| Gray             | <p>Customize the text color of gray text.<br></p><p>It is being applied to elements: </p><ul><li>Form message</li><li>'Tax included' text on side cart</li><li>Search trending and Placeholder text of search input on search popup</li><li>Variant name and product vendor of cart item on cart page.</li><li>'Coupon code'  and 'Tax included' text on cart page.</li><li>...</li></ul>                   |
| White            | <p>Customize the text color of white text.</p><p><br>It is being applied to elements: </p><ul><li>Content text on Before You Leave popup</li><li>Close icon on the popups</li><li>Text on the color swatch's tooltip</li><li>Text on the cookie popup</li><li>Text of the count down block on product page</li><li>...</li></ul>                                                                            |
| Black            | <p>Customize the text color of black text.<br><br>It is being applied to elements: </p><ul><li>Close icon on the mobile menu</li><li>Background of close button on Filter Sidebar.</li><li>...<br></li></ul>                                                                                                                                                                                                |

### Link

| Settings   | Meaning                                                   |
| ---------- | --------------------------------------------------------- |
| Text       | The text color of the links on all pages.                 |
| Text hover | The text color of the links for hover state on all pages. |

### Breadcrumb

| Settings    | Meaning                                            |
| ----------- | -------------------------------------------------- |
| Text        | The text color of the breadcrumb.                  |
| Text hover  | The text color of the breadcrumb for hover state.  |
| Text active | The text color of the breadcrumb for active state. |

### Alert

| Settings           | Meaning                                                   |
| ------------------ | --------------------------------------------------------- |
| Error text         | The color of the error text on the error alert popup.     |
| Error background   | The background of the error alert popup.                  |
| Success text       | The color of the success text on the success alert popup. |
| Success background | The background of the error success popup.                |
| Info text          | The color of the info text on the info alert popup.       |
| Info background    | The background of the info success popup.                 |

### Global

| Settings   | Meaning                                                                                                                                                                                                                                                                                                                                                                             |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text       | <p>This color is being applied to elements: </p><ul><li>Background and border color of the product remove button on the compare product popup.</li><li>Background color of the Sticky Add To Cart Style 2 on mobile.</li><li>Background and border of the Style 1 count down block on product page</li><li>Text on pickup popup</li><li>Background of tooltip</li><li>...</li></ul> |
| Border     | <p>This color is being applied to elements: </p><ul><li>Background of the track of the scrollbar on the product combo list</li><li>Border top and border bottom the product combo item</li><li>...</li></ul>                                                                                                                                                                        |
| Background | <p>This color is being applied to elements: </p><ul><li>Background of the pages or articles in search results on the search page.</li><li>Background of the blockquote</li><li>...</li></ul>                                                                                                                                                                                        |

### Arrows

| Settings                  | Meaning                                                    |
| ------------------------- | ---------------------------------------------------------- |
| Text                      | The icon color of the arrow item.                          |
| Border                    | The border color of the arrow item.                        |
| Background                | The background color of the arrow item.                    |
| Background gradient       | The background gradient of the arrow item.                 |
| Text hover                | The icon color of the arrow item for hover state.          |
| Border hover              | The border color of the arrow item for hover state.        |
| Background hover          | The background color of the arrow item for hover state.    |
| Background hover gradient | The background gradient of the arrow item for hover state. |

### Dots

| Settings                  | Meaning                                                  |
| ------------------------- | -------------------------------------------------------- |
| Border                    | The border color of the dot item.                        |
| Background                | The background color of the dot item.                    |
| Background gradient       | The background gradient of the dot item.                 |
| Border hover              | The border color of the dot item for hover state.        |
| Background hover          | The background color of the dot item for hover state.    |
| Background hover gradient | The background gradient of the dot item for hover state. |

### Pagination

| Settings                                    | Meaning                                                                    |
| ------------------------------------------- | -------------------------------------------------------------------------- |
| Items: Text                                 | The text color of the pagination item.                                     |
| Items: Border                               | The border color of the pagination item.                                   |
| Items: Background                           | The background color of the pagination item.                               |
| Items: Background gradient                  | The background gradient of the pagination item.                            |
| Items: Text hover                           | The text color of the pagination item for hover state.                     |
| Items: Border hover                         | The border color of the pagination item for hover and active state.        |
| Items: Background hover                     | The background color of the pagination item for hover and active state.    |
| Items: Background hover gradient            | The background gradient of the pagination item for hover and active state. |
| Prev/Next button: Text                      | The icon color of the arrow item.                                          |
| Prev/Next button: Border                    | The border color of the arrow item.                                        |
| Prev/Next button: Background                | The background color of the arrow item.                                    |
| Prev/Next button: Background gradient       | The background gradient of the arrow item.                                 |
| Prev/Next button: Text hover                | The icon color of the arrow item for hover state .                         |
| Prev/Next button: Border hover              | The border color of the arrow item for hover state .                       |
| Prev/Next button: Background hover          | The background color of the arrow item for hover state .                   |
| Prev/Next button: Background hover Gradient | The background gradient color of the arrow item for hover state .          |

### Swatch

| Settings      | Meaning                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------ |
| Border        | The border color of the color variant on the Quick Shop popup and product page.                  |
| Border active | The border color of the color variant for active state on the Quick Shop popup and product page. |

### Variant

| Settings          | Meaning                                                                                        |
| ----------------- | ---------------------------------------------------------------------------------------------- |
| Text              | The text color of the variant on the Quick Shop popup and product page.                        |
| Background        | The background color of the variant on the Quick Shop popup and product page.                  |
| Text active       | The text color of the variant for active state on the Quick Shop popup and product page.       |
| Background active | The background color of the variant for active state on the Quick Shop popup and product page. |

### Primary button

| Settings                  | Meaning                                                        |
| ------------------------- | -------------------------------------------------------------- |
| Text                      | The text color of the default button.                          |
| Border                    | The border color of the default button.                        |
| Background                | The background color of the default button.                    |
| Background gradient       | The background gradient of the default button.                 |
| Text hover                | The text color of the default button for hover state.          |
| Border hover              | The border color of the default button for hover state.        |
| Background hover          | The background color of the default button for hover state.    |
| Background hover gradient | The background gradient of the default button for hover state. |

### Secondary button

| Settings                  | Meaning                                                          |
| ------------------------- | ---------------------------------------------------------------- |
| Text                      | The text color of the secondary button.                          |
| Border                    | The border color of the secondary button.                        |
| Background                | The background color of the secondary button.                    |
| Background gradient       | The background gradient of the secondary button.                 |
| Text hover                | The text color of the secondary button for hover state.          |
| Border hover              | The border color of the secondary button for hover state.        |
| Background hover          | The background color of the secondary button for hover state.    |
| Background hover gradient | The background gradient of the secondary button for hover state. |

### Button 3 - Alternative Button

| Settings                  | Meaning                                                            |
| ------------------------- | ------------------------------------------------------------------ |
| Text                      | The text color of the alternative button.                          |
| Border                    | The border color of the alternative button.                        |
| Background                | The background color of the alternative button.                    |
| Background gradient       | The background gradient of the alternative button.                 |
| Text hover                | The text color of the alternative button for hover state.          |
| Border hover              | The border color of the alternative button for hover state.        |
| Background hover          | The background color of the alternative button for hover state.    |
| Background hover gradient | The background gradient of the alternative button for hover state. |

### Loading spinner

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FlCscwnm57YL9K4i1EdwJ%2Fimage.png?alt=media&#x26;token=5b9b42c6-4504-41a4-ab41-f342dc7138d7" alt="" width="563"><figcaption></figcaption></figure>

| Settings      | Meaning                                      |
| ------------- | -------------------------------------------- |
| Top border    | The color of the top part of the spinner.    |
| Right border  | The color of the right part of the spinner.  |
| Bottom border | The color of the bottom part of the spinner. |
| Left border   | The color of the left part of the spinner.   |

### Scroll down to the next section

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fmw4dljtmhkG0dBNRtpGe%2Fimage.png?alt=media&#x26;token=1c817d20-72b2-4653-8749-b2eb0f593713" alt=""><figcaption></figcaption></figure>

| Settings | Meaning                                 |
| -------- | --------------------------------------- |
| Icon     | Sets the color of the scroll down icon. |