How can I edit the Colors on my Website Integration?

Here's how you can change the color of the some different components of your Website Integration site.

Samantha Smith avatar
Written by Samantha Smith
Updated over a week ago

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:


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;

Did this answer your question?