General colors

Here you can change color for many elements on theme.

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Theme settings -> General colors.

Body

Settings
Meaning

Background

The background color of an entire page.

Background gradient

The background gradient of an entire page.

Placeholder

Settings
Meaning

Background

Use as a placeholder background for loading images.

Warning

Settings
Meaning

Text

The text color of the warning popup.

Background

The background color of the warning popup.

Text

Settings
Meaning

Default text

The default color of the text for an entire page.

It is applied to elements that have not been assigned a specific color.

Alternative text

The color of the alternative text.

It is being applied to elements:

  • Text on product compare popup

  • Text on compare color popup

  • Product title on Bundle section

  • Varinant name on sidecart

  • 'Your cart is empty' or 'Secure Shopping Guarantee' text on cart page

  • Date text on '[Sidebar] Recent Post' block

  • ...

Gray

Customize the text color of gray text.

It is being applied to elements:

  • Form message

  • 'Tax included' text on side cart

  • Search trending and Placeholder text of search input on search popup

  • Variant name and product vendor of cart item on cart page.

  • 'Coupon code' and 'Tax included' text on cart page.

  • ...

White

Customize the text color of white text.

It is being applied to elements:

  • Content text on Before You Leave popup

  • Close icon on the popups

  • Text on the color swatch's tooltip

  • Text on the cookie popup

  • Text of the count down block on product page

  • ...

Black

Customize the text color of black text. It is being applied to elements:

  • Close icon on the mobile menu

  • Background of close button on Filter Sidebar.

  • ...

Settings
Meaning

Text

The text color of the links on all pages.

Text hover

The text color of the links for hover state on all pages.

Settings
Meaning

Text

The text color of the breadcrumb.

Text hover

The text color of the breadcrumb for hover state.

Text active

The text color of the breadcrumb for active state.

Alert

Settings
Meaning

Error text

The color of the error text on the error alert popup.

Error background

The background of the error alert popup.

Success text

The color of the success text on the success alert popup.

Success background

The background of the error success popup.

Info text

The color of the info text on the info alert popup.

Info background

The background of the info success popup.

Global

Settings
Meaning

Text

This color is being applied to elements:

  • Background and border color of the product remove button on the compare product popup.

  • Background color of the Sticky Add To Cart Style 2 on mobile.

  • Background and border of the Style 1 count down block on product page

  • Text on pickup popup

  • Background of tooltip

  • ...

Border

This color is being applied to elements:

  • Background of the track of the scrollbar on the product combo list

  • Border top and border bottom the product combo item

  • ...

Background

This color is being applied to elements:

  • Background of the pages or articles in search results on the search page.

  • Background of the blockquote

  • ...

Arrows

Settings
Meaning

Text

The icon color of the arrow item.

Border

The border color of the arrow item.

Background

The background color of the arrow item.

Background gradient

The background gradient of the arrow item.

Text hover

The icon color of the arrow item for hover state.

Border hover

The border color of the arrow item for hover state.

Background hover

The background color of the arrow item for hover state.

Background hover gradient

The background gradient of the arrow item for hover state.

Dots

Settings
Meaning

Border

The border color of the dot item.

Background

The background color of the dot item.

Background gradient

The background gradient of the dot item.

Border hover

The border color of the dot item for hover state.

Background hover

The background color of the dot item for hover state.

Background hover gradient

The background gradient of the dot item for hover state.

Pagination

Settings
Meaning

Items: Text

The text color of the pagination item.

Items: Border

The border color of the pagination item.

Items: Background

The background color of the pagination item.

Items: Background gradient

The background gradient of the pagination item.

Items: Text hover

The text color of the pagination item for hover state.

Items: Border hover

The border color of the pagination item for hover and active state.

Items: Background hover

The background color of the pagination item for hover and active state.

Items: Background hover gradient

The background gradient of the pagination item for hover and active state.

Prev/Next button: Text

The icon color of the arrow item.

Prev/Next button: Border

The border color of the arrow item.

Prev/Next button: Background

The background color of the arrow item.

Prev/Next button: Background gradient

The background gradient of the arrow item.

Prev/Next button: Text hover

The icon color of the arrow item for hover state .

Prev/Next button: Border hover

The border color of the arrow item for hover state .

Prev/Next button: Background hover

The background color of the arrow item for hover state .

Prev/Next button: Background hover Gradient

The background gradient color of the arrow item for hover state .

Swatch

Settings
Meaning

Border

The border color of the color variant on the Quick Shop popup and product page.

Border active

The border color of the color variant for active state on the Quick Shop popup and product page.

Variant

Settings
Meaning

Text

The text color of the variant on the Quick Shop popup and product page.

Background

The background color of the variant on the Quick Shop popup and product page.

Text active

The text color of the variant for active state on the Quick Shop popup and product page.

Background active

The background color of the variant for active state on the Quick Shop popup and product page.

Primary button

Settings
Meaning

Text

The text color of the default button.

Border

The border color of the default button.

Background

The background color of the default button.

Background gradient

The background gradient of the default button.

Text hover

The text color of the default button for hover state.

Border hover

The border color of the default button for hover state.

Background hover

The background color of the default button for hover state.

Background hover gradient

The background gradient of the default button for hover state.

Secondary button

Settings
Meaning

Text

The text color of the secondary button.

Border

The border color of the secondary button.

Background

The background color of the secondary button.

Background gradient

The background gradient of the secondary button.

Text hover

The text color of the secondary button for hover state.

Border hover

The border color of the secondary button for hover state.

Background hover

The background color of the secondary button for hover state.

Background hover gradient

The background gradient of the secondary button for hover state.

Button 3 - Alternative Button

Settings
Meaning

Text

The text color of the alternative button.

Border

The border color of the alternative button.

Background

The background color of the alternative button.

Background gradient

The background gradient of the alternative button.

Text hover

The text color of the alternative button for hover state.

Border hover

The border color of the alternative button for hover state.

Background hover

The background color of the alternative button for hover state.

Background hover gradient

The background gradient of the alternative button for hover state.

Loading spinner

Settings
Meaning

Top border

The color of the top part of the spinner.

Right border

The color of the right part of the spinner.

Bottom border

The color of the bottom part of the spinner.

Left border

The color of the left part of the spinner.

Scroll down to the next section

Settings
Meaning

Icon

Sets the color of the scroll down icon.

Last updated