Colors (General)

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 -> COLOR (GENERAL).

Body Color

Settings	Meaning
Background Color	The background color of an entire page.
Background Gradient	The background gradient of an entire page.

Placeholder Color

Settings	Meaning
Placeholder Background Color	Use as a placeholder background for loading images.

Warning Color

Settings	Meaning
Color	The text color of the warning popup.
Background Color	The background color of the warning popup.

Text Color

Settings	Meaning
Default Text Color	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 Color	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 Color	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 Color	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 Color	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. ...

Link Color

Settings	Meaning
Link Color	The text color of the links on all pages.
Link Hover Color	The text color of the links for hover state on all pages.

Breadcrumb Color

Settings	Meaning
Breadcrumb Color	The text color of the breadcrumb.
Breadcrumb Color Hover	The text color of the breadcrumb for hover state.
Breadcrumb Color Active	The text color of the breadcrumb for active state.

Alert Color

Settings	Meaning
Error Text Color	The color of the error text on the error alert popup.
Error Background Color	The background of the error alert popup.
Success Text Color	The color of the success text on the success alert popup.
Success Background Color	The background of the error success popup.
Info Text Color	The color of the info text on the info alert popup.
Info Background Color	The background of the info success popup.

Global Color

Settings	Meaning
Global Color	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 ...
Global Border Color	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 ...
Global Background Color	This color is being applied to elements: Background of the pages or articles in search results on the search page. Background of the blockquote ...

Arrow

Settings	Meaning
Color	The icon color of the arrow item.
Border Color	The border color of the arrow item.
Background Color	The background color of the arrow item.
Background Gradient	The background gradient of the arrow item.
Hover Color	The icon color of the arrow item for hover state.
Hover Border Color	The border color of the arrow item for hover state.
Hover Background Color	The background color of the arrow item for hover state.
Hover Background Gradient	The background gradient of the arrow item for hover state.

Dots

Settings	Meaning
Border Color	The border color of the dot item.
Background Color	The background color of the dot item.
Background Gradient	The background gradient of the dot item.
Hover Border Color	The border color of the dot item for hover state.
Hover Background Color	The background color of the dot item for hover state.
Hover Background Gradient	The background gradient of the dot item for hover state.

Pagination

Settings	Meaning
Item Color	The text color of the pagination item.
Item Border Color	The border color of the pagination item.
Item Background Color	The background color of the pagination item.
Item Background Gradient	The background gradient of the pagination item.
Item Color Hover / Active	The text color of the pagination item for hover state.
Item Border Color Hover / Active	The border color of the pagination item for hover and active state.
Item Background Color Hover / Active	The background color of the pagination item for hover and active state.
Item Background Gradient Hover / Active	The background gradient of the pagination item for hover and active state.
Arrows Color	The icon color of the arrow item.
Arrows Border Color	The border color of the arrow item.
Arrows Background Color	The background color of the arrow item.
Arrows Background Gradient	The background gradient of the arrow item.
Arrows Color Hover / Active	The icon color of the arrow item for hover state .
Arrows Border Color Hover / Active	The border color of the arrow item for hover state .
Arrows Background Color Hover / Active	The background color of the arrow item for hover state .
Arrows Background Gradient Hover / Active	The background gradient color of the arrow item for hover state .

Swatch

Settings	Meaning
Swatch Border Color	The border color of the color variant on the Quick Shop popup and product page.
Swatch Border Color (Active)	The border color of the color variant for active state on the Quick Shop popup and product page.

Variant

Settings	Meaning
Background Color	The background color of the variant on the Quick Shop popup and product page.
Color	The text color of the variant on the Quick Shop popup and product page.
Background Color (Active)	The background color of the variant for active state on the Quick Shop popup and product page.
Color (Active)	The text color of the variant for active state on the Quick Shop popup and product page.

Button 1 - Default Button

Settings	Meaning
Color	The text color of the default button.
Border Color	The border color of the default button.
Background Color	The background color of the default button.
Background Gradient	The background gradient of the default button.
Hover / Active Color	The text color of the default button for hover state.
Hover / Active Border Color	The border color of the default button for hover state.
Hover / Active Background Color	The background color of the default button for hover state.
Hover / Active Background Gradient	The background gradient of the default button for hover state.

Button 2 - Secondary Button

Settings	Meaning
Color	The text color of the secondary button.
Border Color	The border color of the secondary button.
Background Color	The background color of the secondary button.
Background Gradient	The background gradient of the secondary button.
Hover / Active Color	The text color of the secondary button for hover state.
Hover / Active Border Color	The border color of the secondary button for hover state.
Hover / Active Background Color	The background color of the secondary button for hover state.
Hover / Active Background Gradient	The background gradient of the secondary button for hover state.

Button 3 - Alternative Button

Settings	Meaning
Color	The text color of the alternative button.
Border Color	The border color of the alternative button.
Background Color	The background color of the alternative button.
Background Gradient	The background gradient of the alternative button.
Hover / Active Color	The text color of the alternative button for hover state.
Hover / Active Border Color	The border color of the alternative button for hover state.
Hover / Active Background Color	The background color of the alternative button for hover state.
Hover / Active Background Gradient	The background gradient of the alternative button for hover state.

Loading Spinner Colors

Settings	Meaning
Spinner Top Color	The color of the top part of the spinner.
Spinner Right Color	The color of the right part of the spinner.
Spinner Bottom Color	The color of the bottom part of the spinner.
Spinner Left Color	The color of the left part of the spinner.

Scroll Down Sections

Settings	Meaning
Color	Sets the color of the scroll down icon. The color of the scroll down icon will blend to the background of the sections that it scroll to.