# Colors & Color schemes

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings** (<img src="https://3132020385-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F90iFc0r67NPtf2PTyRir%2FSettingsMajor.svg?alt=media&#x26;token=cca5f988-9882-4e74-8a31-9f990bb9dadd" alt="" data-size="line">)
2. Locate **Colors**
3. Make necessary changes
4. **Save**
   {% endhint %}

## Color schemes

Color schemes are group elements settings and their respective colors in a visually representative way. You can assign different colors to various elements in a cohesive color scheme that can be applied across your theme where a color scheme picker is available.&#x20;

A color scheme is a set of colors that applies to the following elements:

* Background
* Text&#x20;
* Solid button background
* Sold button label
* Outline button
* Button hover
* Product price
* Form field
* Tooltip
* Border

You can have up to 21 color schemes.

### Manage your color scheme <a href="#manage-your-color-scheme" id="manage-your-color-scheme"></a>

{% hint style="success" %}
**Steps:**

1. From your Shopify admin, go to **Online Store** > [**Themes**](https://admin.shopify.com/themes).
2. Click **Customize** next to the theme that you want to customize.
3. Select **Theme settings** (<img src="https://3132020385-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F90iFc0r67NPtf2PTyRir%2FSettingsMajor.svg?alt=media&#x26;token=cca5f988-9882-4e74-8a31-9f990bb9dadd" alt="" data-size="line">)  > **Colors**.
4. In the **Schemes** section, click an existing scheme or click **Add scheme** to add a new color scheme.
5. Click the color swatch for the content type color that you want to change.
6. To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
7. Click **Save**.
   {% endhint %}

### Apply your color scheme <a href="#applying-your-color-scheme" id="applying-your-color-scheme"></a>

After defining your color scheme in the theme settings, you can assign a color scheme using the color scheme picker in the section and block settings.&#x20;

The color scheme picker is available only in certain sections, blocks, and general theme settings.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FBIxSg7KLPjdVY5hkjiOh%2Fimage.png?alt=media&#x26;token=d7a24c5c-5f54-4fcd-9362-503b45471b84" alt=""><figcaption></figcaption></figure>

### Gradients <a href="#gradients" id="gradients"></a>

You can set up a gradient of colors for visually interesting background options.&#x20;

The gradient picker allows you to select the colors, gradient style, angle, position, and opacity of the gradient.&#x20;

The options selected in the gradient picker can be previewed in real-time in the theme editor.&#x20;

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fiz4A9YhCZaGj4Yh30FO2%2Fimage.png?alt=media&#x26;token=3d89b35d-ce23-4335-ae49-49f35114581b" alt=""><figcaption></figcaption></figure>

#### Set up gradients <a href="#set-up-gradients" id="set-up-gradients"></a>

{% hint style="success" %}
Steps:&#x20;

1. From your Shopify admin, go to **Online Store** > [**Themes**](https://admin.shopify.com/themes).
2. Click **Customize** next to the theme that you want to customize.
3. Click **Theme settings** (<img src="https://3132020385-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F90iFc0r67NPtf2PTyRir%2FSettingsMajor.svg?alt=media&#x26;token=cca5f988-9882-4e74-8a31-9f990bb9dadd" alt="" data-size="line">) > select **Colors**.
4. In the **Schemes** section, click an existing scheme that you want to edit.
5. Click the gradient color swatch option: **Background gradient**.
6. If you haven't previously set up a gradient, then some preset options are displayed for you to choose from. Select any preset gradient to open the options panel.
7. Select your gradient options:
   1. Choose between a **linear** or **radial** gradient. Use the buttons to select your preferred gradient style.
   2. Set the **angle** of your gradient with the up and down arrows. Clicking the up or down arrow increases or decreases the angle percentage by 5.
   3. Use the slider to select the **position** of your gradient, or enter a numeric value in the field.
   4. Enter a specific color hex code or use the color slider to choose a hue. Recently selected colors are displayed at the bottom of the gradient options panel.
   5. To make your gradient opaque, use the slider on the right to select the transparency of your gradient. You can also enter a percentage in the field next to the hex color code.
8. Click **Save**.
   {% endhint %}

#### Remove a gradient <a href="#remove-a-gradient" id="remove-a-gradient"></a>

{% hint style="success" %}
Steps:

1. From your Shopify admin, go to **Online Store** > [**Themes**](https://admin.shopify.com/themes).
2. Click **Customize** next to the theme that you want to customize.
3. Click the gear icon (**Theme settings**), and then click **Colors**.
4. In the **Schemes** section, click an existing scheme that you want to edit.
5. Click the gradient that you want to remove.
6. Click **Remove gradient**.
7. Click **Save**.
   {% endhint %}

### Body color scheme

Set the color scheme you want to apply for the template's body.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FiD15J5iGjgMMQN3YbBgp%2Fimage.png?alt=media&#x26;token=d8ee78f1-d479-4267-9b46-b83fa42b9296" alt=""><figcaption></figcaption></figure>

## Count bubble

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FppM0iclDKEiQjnXxGhLg%2Fimage.png?alt=media&#x26;token=a1d7c7cc-b1b2-42e8-be06-2fc60f6a541e" alt=""><figcaption></figcaption></figure>

See how to set up the wishlist and compare page here: [additional-pages](https://docs.foxecom.com/minimog-theme/theme-settings/additional-pages "mention")

## Notification

You can adjust the text color of the notifications based on the type: Success, Warning, and Error.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FYdMHVMxZj8QlJUkyf8S3%2Fimage.png?alt=media&#x26;token=27ec9900-3223-446f-b634-5dd610b3e5bb" alt=""><figcaption></figcaption></figure>

## Overlay

Set a background color for the overlay. You can also adjust the opacity value by tweaking the toggle.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FB0PZ5iAPKSaRSkB76ZhS%2Fimage.png?alt=media&#x26;token=0edba041-acb1-4235-88f9-1f9cf821549e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FGeIkBQFI4LGjyGqhvlet%2Flivechat883x471%20(1).png?alt=media&#x26;token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>
