# 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
| 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 |
The default color of the text for an entire page.
It is applied to elements that have not been assigned a specific color.
|
| Alternative text |
The color of the alternative text.
It is being applied to elements:
Text on product compare popup
Text on compare color popup
Product title on Bundle section
Varinant name on sidecart
'Your cart is empty' or 'Secure Shopping Guarantee' text on cart page
Date text on '\[Sidebar] Recent Post' block
...
|
| Gray |
Customize the text color of gray text.
It is being applied to elements:
Form message
'Tax included' text on side cart
Search trending and Placeholder text of search input on search popup
Variant name and product vendor of cart item on cart page.
'Coupon code' and 'Tax included' text on cart page.
...
|
| White |
Customize the text color of white text.
It is being applied to elements:
Content text on Before You Leave popup
Close icon on the popups
Text on the color swatch's tooltip
Text on the cookie popup
Text of the count down block on product page
...
|
| Black |
Customize the text color of black text.
It is being applied to elements:
Close icon on the mobile menu
Background of close button on Filter Sidebar.
...
|
### 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 |
This color is being applied to elements:
Background and border color of the product remove button on the compare product popup.
Background color of the Sticky Add To Cart Style 2 on mobile.
Background and border of the Style 1 count down block on product page
Text on pickup popup
Background of tooltip
...
|
| Border |
This color is being applied to elements:
Background of the track of the scrollbar on the product combo list
Border top and border bottom the product combo item
...
|
| Background |
This color is being applied to elements:
Background of the pages or articles in search results on the search page.
Background of the blockquote
...
|
### 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
| 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
| Settings | Meaning |
| -------- | --------------------------------------- |
| Icon | Sets the color of the scroll down icon. |
---
# 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://halosoft.gitbook.io/ella-documentation/theme-settings/general-colors.md?ask=
```
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.