Colors

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

Tip: To adjust colors, navigate to Theme settings -> Colors.

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:

For how to use the gradient color, view the following help page.

Base

This item changes the color of the following options:

Header: navigation menu items:

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

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

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.

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

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

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

Blogs page: text content, pagination:

Blog posts page: text content:

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

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:

The background color of the "Add to cart" button on product pages and the "Featured product" section, stock text and icons:

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

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

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

Secondary colors

Icon

Header icons: search (magnifying glass), account, cart, number of products added to the cart, and SVG icons of the "Icons menu":

Footer: social icons:

Theme Sections/Theme Blocks: video play button, icons, and review stars:

Line

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

Input background/ Input border

To colorize the background of the input fields and the border on the whole store, choose colors for the listed items:

Input hover background/ Input hover border

Input icon

Change the icon color of the subscription form and the icons of the comment form on the mouse hover:

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:

Note! The next color settings work for the swatch type "Button" configured in Products -> Product information -> Variant picker.

Swatch background

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

Swatch line

Swatch hover background/Swatch hover line

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

Text colors

Headings

Footer:

Theme Sections/Blocks:

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.

Product page: product title, option name, tab heading, and table titles:

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

Collection list page: page title, collection headings:

Pages: page title:

Blogs page: page title, blog heading:

Blog posts page: page title and headings of paragraphs:

Cart page: page title, subtotal text:

Body

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.

Header: menu items:

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 and button text of the Cookie popup:

Product page: breadcrumbs, product description, tab content text, tax text, and the background of the "Buy it now" button:

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:

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:

Link

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

Button colors

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.

Here is an example of the "Image gallery" section settings:

Tip: Choose the button style in the corresponding section/block. For more details, check the following help page.

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 the buttons with a transparent background, some like confirmation buttons of the Comment form on the Blog posts page and 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" button in the "Featured product" section; the question popup, the "Share" and "Pop-up" blocks on product pages; the "Show filter" button on collection pages, and so on.

Add to cart

This option can be used to set the color of the "Add to Cart" button in the product cart of collection pages and collections used in sections.

Add to cart icon

This item allows changing the color of the cart icon in the "Add to Cart" button used on collection pages and collections assigned to dynamic theme sections.

Quick view/Quick view icon

The background color of the "Quick View" button and the color of the icon can be specified in the given color pickers.

Buy it now

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.

Other

Free shipping

The background color of the Free shipping progress bar can be set in the corresponding color picker.

Shadow color

To add a slight shadow to popups, such as the Sorting order popup or language selector, use this option. Here is an example of how it might look in a store:

Substrate color

This option allows changing the background color of the drop-down menu in the Header (does not apply to the Mega menu) and some popups: "Mini cart"; the sticky product "Add to cart", question popup, and "Pop-up" blocks on product pages.

Here is an example of how the option performs:

Substrate transparency

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

The option adds the transparent color to the page using the mini cart feature and the Fixed effect for the footer with overlay:

Contrast

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.

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.