> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/shella-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/colors.md).

# Colors

{% hint style="info" %}
**Theme settings -> Colors**
{% endhint %}

## Global

### Primary & Body background

#### Home page&#x20;

![](/files/-Mf2DIGlMx-r8nGsMtBN)

#### Product page&#x20;

![](/files/-Mf2Dw706wPXGn7fysSo)

#### Collection page&#x20;

![](/files/-Mf2E4wUVxITFGweqd9x)

### Text & Heading

&#x20;Text (red) - for placeholder, drop-down inputs, info messages, etc.

&#x20;Headings (green) - for block headings.

#### Home page&#x20;

![](/files/-Mf2G1r2y5_opgHYTBhn)

#### Product page (Product description)

![](/files/-Mf2GoBSQwJJ4fGKQ_2P)

#### Collection page&#x20;

![](/files/-Mf2G525QZ4rFvTlVxsq)

#### Blog post&#x20;

![](/files/-Mf2Grmn_l33TwAMZzYA)

### Link

![](/files/-Mf2IE9pBV_a5yf-SaYe)

### Popup background

![](/files/-Mf2IvuVGjk9a56Ui4eh)

## Buttons

&#x20;Here you may configure the colors for buttons: Add To Cart button, Wishlist button and Compare button.

{% hint style="warning" %}
**Please note**,  you should change the button type first. The theme includes 5 button types: **“Auto”, “Default”, “Invert”, “Secondary”, “Clean”**.
{% endhint %}

<figure><img src="/files/1jAN0zr2Erfh2QtmGtMj" alt=""><figcaption></figcaption></figure>

### Default button

&#x20;Here you may configure the background, border, and text colors. For default and hover (active) button states.&#x20;

![](/files/-Mf2Kl-q1cw39LeyYaWw)

&#x20;The button type depends on the selected skin. Here are examples of default buttons:

![](/files/-Mf2KzfKJVGZi17irpRE)

### Secondary button

&#x20;You may configure the colors for the second button type. For the default button state (like in the previous image) and hover button state.&#x20;

![](/files/-Mf2LF7TW2i6gpdPvwRf)

### Clean, invert buttons

&#x20;Clean and invert are other types of buttons, you may configure colors in the same way as for default & secondary buttons.

### Configure button type

&#x20;You may change the button type for:

* Add to cart button @ collection page
* Add to cart button @ product page
* Wishlist button @ product page
* Compare button @ product page

![](/files/-Mf2LWHphj_C7EAS3vxw)

## Paint Palette

&#x20;Here you can change the colors for the base, base background, text, additional background, borders, icons, and diverse labels, such as success or “In stock”, error or “Sale”, “New”, “Hot”, and for the dynamic checkout button.

### Base

![](/files/-Mf2W2Idcv9aXpKrZjq7)

### Base background

![](/files/-Mf2W5AWNJi41NX_q_PB)

### Text

![](/files/-Mf2WqXm2vBrozd2r-jH)

### Additional background

&#x20;This option applies to headers with two backgrounds:

![](/files/-Mf2XUT2ZajJuvJ99jIO)

### Border

![](/files/-Mf2YXytDRPPv-fHlnUa)

### Icon

![](/files/-Mf2ZiOJ3mskIR25_DXd)

### Success, In stock & Error, Sale, & Label 'New' & Label 'Hot'

![](/files/-Mf2_LFRVlhPIeqKqBIm)

### Dynamic checkout button

![](/files/-Mf2_rFrBf7IaSCUm080)

{% hint style="warning" %}
**Please note**, in order to change the background color of the dynamic checkout button, you need to enable the **“Custom style for dynamic checkout button”** option in *Theme settings -> Product page and Quick view -> Product page only*. You can read more details [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#custom-style-for-dynamic-checkout-button).
{% endhint %}

### Label 'Pre-order'

![](/files/-Mf2aIrbHE9GP-lIgel2)

### Input background

![](/files/-Mf2bcy3_0aOLYAKb8j0)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/colors.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
