---
description: >-
  In the "Colors" section, you can apply color settings to the background, text,
  and buttons in the entire store.
---

# Colors!!!

{% hint style="success" %}
**Tip:** To adjust colors, navigate to _Theme settings -> Colors_.
{% endhint %}

## Primary colors

### **Background**

Apply color settings to change the background color of a store:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FaVkWaNGhJU3ckL6TyFIE%2Fcolors_background%20color.png?alt=media&#x26;token=e8e305f9-3d65-4407-b29c-e95af8bf842b" alt=""><figcaption></figcaption></figure>

### **Background gradient**

If you need to display a background gradient instead of just a color, use this item to apply color settings:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FZJ18Hug4CNncTTsEVCc3%2Fcolors_background%20gradient.png?alt=media&#x26;token=3dc86934-bbd4-4d9a-8a42-e87a21af19e6" alt=""><figcaption></figcaption></figure>

### **Base**

This item changes the color of the following options:

**Header:** navigation menu items:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F49imCh0URDlA1f56mfNZ%2Fcolors_base%20header.png?alt=media&#x26;token=2e6bec49-f6e4-44e8-9e3c-68be17c3f3af" alt=""><figcaption></figcaption></figure>

**Footer:** copyright text, input text, paragraphs and menu items:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F3rUqvNMCxKpf4sdBJBGe%2Fcolors_base%20footer.png?alt=media&#x26;token=4d3b74d9-f8f1-4771-8273-7071363d8b34" alt=""><figcaption></figcaption></figure>

**Dynamic sections:** descriptive text of the blocks and sections, dividing line:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F2LHl8WItQBkLxmG53dOZ%2Fcolors_base%20sections.png?alt=media&#x26;token=2bae454d-0ac6-4ed5-b2be-f57f45653afb" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note!** The color will be applied to the description with the transparent color set in the corresponding section. To apply color individually, check whether the section contains color settings.
{% endhint %}

**Popups:** heading and input text of the Newsletter popup; main text and button text of the Cookie popup:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F8N6dDY24WUoDHk521hGC%2Fcolors_base%20popups.png?alt=media&#x26;token=91d1b43b-2429-48ec-b69e-64e9652dad35" alt=""><figcaption></figcaption></figure>

**Product page:** product description, tab content text, product price, background of the "Buy it now" button, input text:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FRGS6XegmYM2zDxqlb4iJ%2Fcolors%20base_product%20page.png?alt=media&#x26;token=04770247-5806-4cbc-a3c6-2b58191d54d7" alt=""><figcaption></figcaption></figure>

**Collection page**: collection description, product card details, input text, filter items:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FCAXhc79j55CfmLFZDl9T%2Fcolor_base%20collection%20page.png?alt=media&#x26;token=e3ed8cd8-e4a5-4625-8daf-947fa64632ea" alt=""><figcaption></figcaption></figure>

**Blogs page:** text content, pagination:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FSQTr7xN2GlaB9TVgvreP%2Fcolors_base%20blogs.png?alt=media&#x26;token=e4f2f9d2-0911-42eb-9cf9-7c82c8ad001f" alt=""><figcaption></figcaption></figure>

**Blog posts page:** text content, share button:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2Ffu374cHqNV2AtarHrObN%2Fcolors_base%20blog%20posts.png?alt=media&#x26;token=f6417121-aed6-4a00-b9c1-adc6b45f0041" alt=""><figcaption></figcaption></figure>

**Cart page:** headings, product name and price, input text, total price, taxes text:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FpeN3TPQHahcMmjflIFLd%2Fcolors%20base_cart.png?alt=media&#x26;token=01475277-a403-4988-bbd8-b3e8d8d515d1" alt=""><figcaption></figcaption></figure>

### **Accent**

Use the **"Accent"** item if you need to apply the color for the listed areas:

Active menu items (on mouse hover) in the Header and Footer:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F4lFQoHRFX1pBDfnzz1mo%2Fcolors%20accent_hover.png?alt=media&#x26;token=bc7fd878-59ec-46e2-8d5c-650466d5ccc1" alt=""><figcaption></figcaption></figure>

Background color of the **"Add to cart"** button on product pages and **"Featured product"** section:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FSsc7BaXdFS8hMVUKoqmg%2Fcolors%20accent_button.png?alt=media&#x26;token=16d58216-c6bd-4022-b27f-950fabfdfa6c" alt=""><figcaption></figcaption></figure>

**Blogs page:** date, author, and pagination (active page):

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FNUVjNdJ23u1Q1lgmAc84%2Fcolors%20accent%20_blogs.png?alt=media&#x26;token=ed4d8eef-4c62-4a1d-95da-24c461fa869e" alt=""><figcaption></figcaption></figure>

**Blog posts page:** date, author; comments: icons, button:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FrSj4VECv6aGJoGpc9X4I%2Fcolors%20accent_blog%20posts.png?alt=media&#x26;token=c1e22e30-03a2-44e2-9c14-705b7136eeb9" alt=""><figcaption></figcaption></figure>

**Cart popup:** number of products added to the cart, background of the "Check out" button, "close" button:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FDXc0AClQfmIQkDI8L5SI%2Fcolors%20accent_cart%20popup.png?alt=media&#x26;token=d8197e73-736d-49a0-999d-0a65239be3e0" alt=""><figcaption></figcaption></figure>

**Cart page:** background of the "Check out" and "Continue shopping" buttons; number of items added to the cart:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FVo7jihqn8NgcWH6NUvz8%2Fcolors%20accent_cart.png?alt=media&#x26;token=2398ac8f-bdbf-4f51-b7da-d6ce3f56ceb3" alt=""><figcaption></figcaption></figure>

## Secondary colors

### Icon

**Header icons:** search (magnifying glass), account, cart and number of products added to the cart:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FBwTITatSdHmeoUwiNaMB%2Fcolors%20icon_header.png?alt=media&#x26;token=b0675205-5e67-44a8-92aa-2f197ca00d5b" alt=""><figcaption></figcaption></figure>

**Footer:** social accounts, subscription input icon:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FLcJh1PcWyulmOGaQip9e%2Fcolors%20icon_footer.png?alt=media&#x26;token=b23a3757-b97b-4084-9826-2f9103433315" alt=""><figcaption></figcaption></figure>

**Theme Sections:** video paly button, icons:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F2izikwr01WzOGSKwOli1%2Fcolors%20icon_sections.png?alt=media&#x26;token=82405038-068e-4ed4-bde5-cd2c52d26f21" alt=""><figcaption></figcaption></figure>

**Product page:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FyTpCs1KU1aLjBluZ6vnQ%2Fcolors%20icon_product%20page.png?alt=media&#x26;token=34c98672-e1b6-4281-8142-7074465ee5ae" alt=""><figcaption></figcaption></figure>

### Line

Dividing line between sections, top separator line in the Header, testimonials border:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FaWEpoxvsYrnOzt6jn05m%2Fcolors_line.png?alt=media&#x26;token=0b3e3c05-d609-4a56-be8a-25b0cc8010b0" alt=""><figcaption></figcaption></figure>

### Input background

The background of the input fields on the whole store:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2Fyf9JgxjsNzlGWPxx7bhl%2Fcolors_input%20background.png?alt=media&#x26;token=86f96538-4b93-4672-a001-a5dfe10ad60e" alt=""><figcaption></figcaption></figure>

### Input line

To colorize the line of the input fields, choose a color:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FKB0DOObmjXSCH66XETZJ%2Fcolors_input%20line.png?alt=media&#x26;token=2cc2ab8b-a274-40eb-970a-52a97c976177" alt=""><figcaption></figcaption></figure>

### Input hover background/ Input hover line

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FarPBtoGKVC4EmfnQParf%2Fcolors_input%20hover.png?alt=media&#x26;token=c9420268-35bf-426a-a360-83aeb8fdbf34" alt=""><figcaption></figcaption></figure>

### Discount/ Sale tags

Change the discounted price color if the product includes a comparison price in Shopify admin. The "Sale tags" item changes the color of the "Sale" badge:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FfoBvFVxKz35lIVRrwg02%2Fcolors_discount.png?alt=media&#x26;token=2461b7e3-f049-41a6-9e5d-65ba4a9fd8c6" alt=""><figcaption></figcaption></figure>

### Rating

_Image_

### Swatch background

Change the background color of unselected swatches by using the item:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F4T2RIxn36mb44geGfpjg%2Fcolors_swatche%20background.png?alt=media&#x26;token=43f34476-30be-45d1-95a1-3e44538f636c" alt=""><figcaption></figcaption></figure>

### Swatch line

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F9q13zqUN4Mx6moUzLVPT%2Fcolors_swatch%20line.png?alt=media&#x26;token=341807d8-bedb-4e31-8070-4511f2cef180" alt=""><figcaption></figcaption></figure>

### Swatch hover background/Swatch hover line

The color changes will be applied to the selected color swatch and swatches on the mouse hover:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FWxtfXg4MnHwbqgeS5GL0%2Fcolors_swatch%20hover.png?alt=media&#x26;token=95e722d4-b089-46dd-9f46-de4c102e1323" alt=""><figcaption></figcaption></figure>

## Text colors

### Headings

**Footer:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FzJaYcXBdijtygeqNwknr%2Fcolors%20headings_footer.png?alt=media&#x26;token=c079d699-9c7c-4391-b18a-414d99a276a8" alt=""><figcaption></figcaption></figure>

**Theme Sections/Blocks:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FkDsTy9IIcSrN4rc2ssF6%2Fcolors%20headings_sections.png?alt=media&#x26;token=71ba1707-88e7-4cfd-b798-59f41ee4f183" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note!** The color will be applied to all the titles and headings with the transparent color set in the corresponding section. To apply color individually, check whether the section contains color settings.
{% endhint %}

**Product page:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F7tCIPXitg52SjBsAJjax%2Fcolors%20headings_product%20page.png?alt=media&#x26;token=185e610a-5f6e-4467-9185-f6eb7fee2c12" alt=""><figcaption></figcaption></figure>

**Collection page:** collection heading, number of products displayed in the paticular collection:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FMBOwndzuIOpfhH6Y9hsd%2Fcolors%20headings_collection%20page.png?alt=media&#x26;token=50f6ae7c-b695-4150-ac5d-116b3f66201e" alt=""><figcaption></figcaption></figure>

**Collection list page:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FMsvYpfzeYCbajWit5FlA%2Fcolors%20heading_collections%20list%20page.png?alt=media&#x26;token=252d0bdb-5061-4fd0-8f74-f7b4e6a78ab1" alt=""><figcaption></figcaption></figure>

**Pages:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FVLPAq0BJd603hQPEesJK%2Fcolors%20headings_pages.png?alt=media&#x26;token=0cbc75a3-8b17-4f33-b28e-f53e0869eb10" alt=""><figcaption></figcaption></figure>

**Blogs page:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FenEDIeR4Yuu29o6BnwF6%2Fcolors%20headings_blogs.png?alt=media&#x26;token=00d77c4d-2f26-4429-bdd4-16c882addcb4" alt=""><figcaption></figcaption></figure>

**Blog posts page:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FTfloEUPAAduREc22R6XW%2Fcolors%20headings_blog%20posts.png?alt=media&#x26;token=b1ecf546-40d2-402e-84ee-c3fa0abc27af" alt=""><figcaption></figcaption></figure>

**Cart page:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FyMNhaQRccVCrRtYBzqyt%2Fcolors%20headings_cart.png?alt=media&#x26;token=3ff66cf5-0beb-43e4-a1a6-1e4aa88fbf67" alt=""><figcaption></figcaption></figure>

### Body

{% hint style="warning" %}
**Note!** The "Body" color settings substitute settings of the "Base" item in the "Primary colors" subsection for the Header, Footer, Theme sections, pages and Popups.
{% endhint %}

**Header:**

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FJ7EHvS8cmD5X3CJVtzSf%2Fcolors%20body_header.png?alt=media&#x26;token=0b180553-7119-48a2-9242-804e1fbdd754" alt=""><figcaption></figcaption></figure>

**Theme sections:** description of the sections/blocks, product title and price, images background overlay ("Collection list" section; "Mega Menu" section in the Header):

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FTcpzX0gzehuk2J25Q5xd%2Fcolors%20body_sections.png?alt=media&#x26;token=e9f36eaa-9b49-4ca1-ba56-5217ccc75d4f" alt=""><figcaption></figcaption></figure>

**Footer:** navigation links, description, text in the country selector, copyright:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FFhL2yb14HKZHRiuODWGt%2Fcolors%20body_footer.png?alt=media&#x26;token=f1245f78-56ad-489b-a9f2-47773c4523d9" alt=""><figcaption></figcaption></figure>

**Popups:** heading and border of the Newsletter popup; main text and button text of the Cookie popup:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FOO2hNWb23sLIDVYLLeka%2Fcolors%20body_popups.png?alt=media&#x26;token=d2a9eaca-abc7-4aa5-bd79-ec1b9a599c04" alt=""><figcaption></figcaption></figure>

**Product page:** product description, tab content text, product price, background of the "Buy it now" button, input text, dividing line:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FfzwiMxrfioOeSuqhwf2h%2Fcolors%20body_product%20page.png?alt=media&#x26;token=a7098adf-c420-4e99-b653-f390f156fd8f" alt=""><figcaption></figcaption></figure>

**Collection page**: collection description, product card details, input text, filter items:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FrpyrfScAh4CZ8RV4QxE2%2Fcolors%20body_collection%20page.png?alt=media&#x26;token=cfe2908a-dde7-4e27-9945-72cd87da5130" alt=""><figcaption></figcaption></figure>

**Collection list page:** description, background image overlay:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FfJKroJzNF3m78nPUssKF%2Fcolors%20body_collection%20list%20page.png?alt=media&#x26;token=579c4f4d-3e44-4023-be03-3f18e6ca4379" alt=""><figcaption></figcaption></figure>

**Blogs page:** text content, pagination:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FJDdykFhrSqCgnbWfnLTu%2Fcolors%20body_blogs%20page.png?alt=media&#x26;token=9069d6fc-a3e7-48a7-95c0-5a4796c24fb9" alt=""><figcaption></figcaption></figure>

**Blog posts page:** text content, share button:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FHQwYrGarWt5XtZp7Wamt%2Fcolors%20body_blog%20posts%20page.png?alt=media&#x26;token=0d79db53-94b5-4e9b-b137-ef99e0d49bea" alt=""><figcaption></figcaption></figure>

**Cart page:** headings, product name and price, quantity input text, taxes text:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FgfEInirOnG2aAHbzVQBH%2Fcolors%20body_cart.png?alt=media&#x26;token=163f2db0-a099-4784-84d2-6ee18e8926c8" alt=""><figcaption></figcaption></figure>

### Price

This item changes the color of the comparison price on collection pages and collections displayed in theme sections:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FNRpATVVp5bnYF51pzmvR%2Fcolors%20price_compare.png?alt=media&#x26;token=ebc95331-4299-4d64-894f-5a294ef9d906" alt=""><figcaption></figcaption></figure>

And add the color of the comparison price/default product price for products:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FSfnZJ7IfJ7TLDJ5HQh7F%2Fcolors%20price_pages.png?alt=media&#x26;token=5d4b1963-a602-4512-9da5-25129aed3018" alt=""><figcaption></figcaption></figure>

### Sale priсe

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FMwM1Vv0mdtkXnbuITHQN%2Fcolors_sale%20price.png?alt=media&#x26;token=7d33b0e8-e278-479a-8965-bf051af990ab" alt=""><figcaption></figcaption></figure>

### Emphasized background!!!!!!

_Image_

### Link

This item changes the color of the navigation links on mouse hover:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FXcGsQL2W19lt73TB1I4j%2Fcolors_link.png?alt=media&#x26;token=ecb5ce32-9d20-4a1d-a88a-bf798aa33851" alt=""><figcaption></figcaption></figure>

## Button colors

{% hint style="success" %}
**Tip:** If you want to edit the button's colors using the global section, make sure the buttons do not use colors directly from the section settings.
{% endhint %}

Here is an example of the "Image with text overlay" section settings:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FK5QczrbpuJl6FceDKzlv%2Fbuttons_colors.png?alt=media&#x26;token=7ee8d859-f2e2-46e7-b960-04aa27b24d33" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** Choose the button style in the corresponding section/block.
{% endhint %}

### Primary

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2Fyl1pkNBxBrxtgwKGyBbw%2Fcolors_primary.png?alt=media&#x26;token=cc33b25a-1cfc-4552-b0ad-fa5e6fd133a1" alt=""><figcaption></figcaption></figure>

### Secondary

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FCBDrwtyc9wzQ43kh9bkv%2Fcolors_secondary.png?alt=media&#x26;token=0b6617c7-12d6-49ec-b5be-df37ee030e6b" alt=""><figcaption></figcaption></figure>

### Third

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FfBl3mBGmP51i324w3qB3%2Fcolors_third.png?alt=media&#x26;token=90fabf30-2540-4aa9-bce4-9f3a9b983e86" alt=""><figcaption></figcaption></figure>

### Fourth

_Image_

### Fifth

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2Fa9xK8JnJhRWpBh10Cjfd%2Fcolors_fifth.png?alt=media&#x26;token=a9dd60c5-cab7-4438-9384-c6bf2219a139" alt=""><figcaption></figcaption></figure>

### Fifth button icon



### Link style

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FnOmHo4OBA73fVYXucf1r%2Fcolors_link%20style.png?alt=media&#x26;token=9b2028ce-7fc2-467d-a42a-bb2b767d641c" alt=""><figcaption></figcaption></figure>

### Shadow color



### Substrate color

Change the background color of the drop-down menu in the Header (does not apply to the Mega menu) and mini cart using the item.

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F63Wef4x6mchN45MZf8KN%2Fsubstrate%20color.png?alt=media&#x26;token=d1f7f6f0-0116-48af-b0a9-c0d8d6e1bd4b" alt=""><figcaption></figcaption></figure>

### Substrate transparency

Use the scale from 0 to 50% to change the transparency of the Substrate color.

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FmQjH95DqflBy9Ck7az3u%2Fsubstrate%20transparency.png?alt=media&#x26;token=7770e15f-5f1a-458d-9727-d5dadb612094" alt=""><figcaption></figcaption></figure>

The option adds the transparent color to the page using the mini cart feature:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FkT7eadPZ9yDDeHjeuk9S%2Fsubstrate%20transp.png?alt=media&#x26;token=776b8d9f-1c71-4d5d-85e0-61296a66f8c1" alt=""><figcaption></figcaption></figure>
