# Colors {% hint style="success" %} **Tip:** To adjust colors, navigate to *Theme settings -> Colors*. **Note!** The applied [Theme Style](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/theme-style) can affect the color settings of some elements. {% endhint %} ## Primary colors ### **Background** Apply color settings to change the background color of a store:

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

Read information regarding using the gradient color in the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image). ### **Base** This item changes the color of the following options: **Header:** navigation menu items, date, contact details:

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

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

{% 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:** text and border of the Newsletter popup; main text and button text/border of the Cookie popup; title, description, and border of the Age verification popup:

{% hint style="success" %} **Tip:** When changing the "Base" color, ensure to select hex codes in the "Light contrast" or "Dark contrast" color pickers to show text for theme elements, such as the "Buy it now" button. {% endhint %} **Product page:** product vendor, SKU, stock status, description, content text, input text, and the background of the "Buy it now" button:

**Collection page**: breadcrumbs, collection description, product card details, input text, filter items, and variant pickers:

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

**Blog posts page:** text content:

**Cart page:** headings, product name and price, input text, taxes text, free shipping text, and cart countdown:

### **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; SVG icons in the "[Contacts](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header/contacts)" block, background of the "Cart counter", and "Categories" button ("Popup" menu type):

The background color of the "Add to cart" button on product pages and the "Featured product" section, and the active tab title:

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

**Blog posts page:** date:

**Cart drawer** and **Cart page:** number of products added to the cart and background of the "Check out" button:

Other elements: "Chat service" button, video play button in sections/blocks, "Back to top" button (Footer):

{% hint style="info" %} Use the color pickers described below to change the text color of the theme elements, such as the Announcement bar, call-to-action buttons, input fields, "Sale" badge, "Time countdown" on collection pages/collections, "Add to cart" button, "Quick View" button, dynamic checkout buttons, and product variants in the entire store. {% endhint %} ### Light contrast Use this color picker to set the text color for the theme elements with the dark background. Ex.: If the Announcement bar, "Sale" badge, checkout buttons, etc., have a dark background (red, black, blue, etc.), add the contrast light hex code for the given item to change the text color as needed. ### Dark contrast In the following color picker, specify the text color of the theme elements with the light background. Ex.: If the product variants, buttons, input fields, etc. have a light background (grey, white, beige, etc.), add the contrast dark hex code for the given item to change the text color as needed.

### Line Dividing line between sections, top separator line in the Header, testimonials border, and unused star:

### Icon **Header icons:** search (magnifying glass), account, cart, number of products added to the cart, SVG icon color: {% hint style="info" %} Additionally, the SVG icon color of the "Icons menu" can be changed in the *Header ->* [*Icons menu*.](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu) {% endhint %}

**Footer:** social icons and selector arrow (currency and language selectors), subscription input arrow:

**Theme Sections/Theme Blocks:** video play button, icons, review stars, etc.:

## Text colors ### Headings **Footer:** headings of blocks:

**Theme Sections/Blocks:** {% 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 use color individually, check whether the section contains color settings. {% endhint %}

**Product page:** product title, option name, block titles:

**Collection page:** collection heading, filtering headings, number of products displayed in the particular collection:

**Collection list page:** page title, collection headings:

**Pages:** page title, section title:

**Blogs page:** page title, blog heading:

**Blog posts page:** page title, headings of paragraphs, and title of the Comments section:

**Cart page** and **Cart drawer:** page title, subtotal text and price, and Notes title (Cart drawer):

### Body {% hint style="warning" %} **Note!** The "Body" color settings substitute settings of the "[Base](#base)" item in the "Primary colors" subsection for the Header, Footer, Theme sections, pages, and Popups. {% endhint %} **Header:** menu items, tiles background on mouse hover, date, and contact text:

**Theme sections:** description of the sections/blocks and product title:

**Footer:** navigation links, description, and the copyright text:

**Popups:** heading and border of the Newsletter popup; main text of the Cookie popup; heading and description of the Age verification popup:

**Product page:** breadcrumbs, SKU, vendor, product description, tab content text, tax text, stock status, Free shipping progress bar text, Delivery countdown text, and block text:

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

**Collection list page:** breadcrumbs, page description, and collection description:

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

**Blog posts page:** text content:

**Cart page:** breadcrumbs, headings, product details, taxes, and terms texts:

### Link This item changes the color of the navigation links in the Footer on mouse hover and the link redirection on the entire store:

### Price This item changes the color of the main price on the product and collection pages, and for products displayed in the theme sections:

### Sale priсe Use the option to change the color of the sale price on the product and collection pages; and for products displayed in the theme sections:

## Field colors {% hint style="info" %} The colors will be applied to such inputs: product quantity selector, currency switcher, language switcher, subscription input field, sorting order (Collection pages), and variant picker drop-down. {% endhint %} ### Background/ Border To colorize the background of the input fields and the border of all related objects in a store, choose colors for the listed items.

### Hover background/ Hover border Change the background and border colors of the input fields when hovering the mouse over a field. ### Hover icon Change the icon color of the subscription form; the icons of the comment form on mouse hover; and the "-"/"+" symbols in the Quantity selector:

## 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 gallery" section settings:

{% hint style="success" %} **Tip:** Choose the button style in the corresponding section/block. For more details, check the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons). {% endhint %} ### Primary This item changes the color of the buttons that use the style "Primary" applied in each theme section or block individually. Additionaly, this item changes the color of the "Add to cart" button on product pages and in the "Featured product" section.

### Secondary Use the given color picker to set the color of the buttons with the "Secondary" style. Moreover, this item changes the color of buttons with a transparent background, such as the confirmation buttons of the Comment form on the Blog posts page and the reviews button.

### Link style Apply a color or hex code for the element to colorize the link-style buttons. The color will be applied to the theme sections or blocks that use the corresponding option, as well as to buttons revealed as links. E.g.: the "[View the full product details](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-product#view-full-product-details-button)" button in the "Featured product" section; the [question pop-up](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#stock-and-question-popup), the "[Share](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#share)" and "[Pop-up](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#pop-up)" blocks on product pages; the "[Show filter](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/collections/product-grid#filtering-and-sorting)" button on collection pages, link button in the Cart drawer, and so on.

## Other colors ### Discount Change the discount color if you created discounts in your *Shopify admin ->* [*Discounts*](https://help.shopify.com/en/manual/discounts).

### Shadow color To add a slight shadow to pop-ups, such as the Sorting order drop-down or language selector, use this option. Here is an example of how it might look in a store:

### Substrate color This option allows you to change the background color of the drop-down menu in the Header (except for the Mega Menu) and some pop-ups, such as the "[Cart drawer](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/cart#action-after-adding-to-cart)", the [sticky product "Add to cart"](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information), [question popup](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#stock-and-question-popup), and "[Pop-up](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#pop-up)" blocks on product pages. ### Substrate transparency Use the scale from 0 to 50% to change the color saturation of the Substrate color. Here is an example of how the options perform:

The option adds the transparent color to the page when using the Cart drawer and the [Footer sticking effect with overlay](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/styles#animations):

## Product page ### "Buy it now" button Add a hex code or select a color in the current color picker to colorize the dynamic checkout buttons on product pages and the "Featured product" section.