First, head to your website's Custom CSS section (Article)
Below are the code snippets required to change various colors on your website. It's recommended to copy/paste the entire block of code into your CSS editor, and then change the colors as you see fit. It is not required to change all colors.
Note: If your website is using a specific color theme, you may need to add the following snippet to override your theme's color settings:
!important;
Change the Background color and Font color of the "Search" Button from the standard Black Background and White Font:
/* search button */
.gspro-o-search > .gspro-o-button {
/* this property changes the background color of the targetted element */
background: red !important;
/* this property changes the text color of the targetted element */
color: black !important;
}
Change the Background color of the "Filters" Button:
/* filter button */
.gspro-c-item-gallery__toggle-filters {
background: green !important;
}
Change the Background color of the "Categories" Button (only on mobile view):
/* category button - mobile only */
.gspro-c-item-gallery__toggle-category {
background: orange !important;
}
Change the Font color of the Categories and Subcategories:
/* category text color */
.gspro-o-category {
color: purple !important;
}
Change the Font color of the Number of items available in each Category and Subcategory:
/* category count badge text color */
.gspro-u-badge {
color: orange !important;