Changing your colors on the Website Integration is easy and ensures your website matches your overall site and brand.
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;
This article contains all CSS snippets required. If you’re looking to change something specific, like your General Colors, Add Button, or Cart colors, check the articles below:
General CSS Color Snippets
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 ONLY the Background color of the "Add to Wishlist" Button:
/* card add button color */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
Change ONLY the Icon color of the "Add to Wishlist" Button:
/* card add icon color */
.gspro-c-item-card__add use {
fill: green !important;
}
Change BOTH the Background and Icon color of the "Add to Wishlist" Button:
/* card add button color */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
/* card add icon color */
.gspro-c-item-card__add use {
fill: green !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;
}
Change the Font and Background color of the Number of items added to Wishlist Cart:
/* wishlist 'cart' count badge*/
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}
Change the Icon and Background color of the "Wishlist Cart" Button:
/* wishlist heart icon color */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}
/* wishlist heart 'cart' background */
.gspro-c-wishlist__trigger {
background: darkred !important;
}
/* fonts */
:root {
--gspro-font-family-secondary: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
--gspro-font-family-secondary: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
--gspro-custom-font-size: 16px;
}
Item Card CSS
Change the Background color of the Item Card:
gspro-item-card {
background: rgb(250, 250, 250);
}
Change the Background color of the Item Card only when you hover over it:
gspro-item-card:hover {
background: rgb(255, 255, 255);
}
Put the entire title of an Item on the Item Card (may shrink Picture Size):
gspro-item-card .gspro-o-card__title {
color: #0;
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis
}
Change the color of the title of the Item on the Item Card:
gspro-item-card .gspro-o-card__title {
color: red;
}
Change ONLY the Background color of the "Add to Wishlist" Button:
gspro-item-card .gspro-o-card__add button {
background: #2A2A2A;
}
Change the color of the "Add to Wishlist" button when you hover over it:
gspro-item-card .gspro-o-card__add:hover button {
background: #1A1A1A;
}
Item Detail CSS
Change the color of the title of the Item within the Item Card:
gspro-item-detail .gspro-c-item-detail__title {
color: red;
}
Change the color of the Price as well as the width and color of the border around the Price within the Item Card:
gspro-item-detail .gspro-c-item-detail__price {
border: 1px solid black;
color: black;
}
Website Integration CSS
The integration has two different states. Initially, it is collapsed, appearing as a floating action button on the bottom-right side of the screen. When clicked, it will enter the expanded state.
This CSS shows you how to apply background and foreground colors in both states. If you use this snippet on your site, you might want to change the “hotpink” background to something that matches your site's branding.
Change ONLY the Icon color on the active Wishlist Cart:
gspro-wishlist[data-mode="collapse"] use {
fill: red;
}
Change the Background color on the top of the Wishlist Cart:
gspro-wishlist[data-mode="expand"] {
background: hotpink;
}
Change the Background color as well as the Number color on the circle that has the number of items within an active Wishlist Cart:
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {
background: black;
color: white
}
gspro-wishlist[data-mode="collapse"] {
background: white;
}
Button CSS
The below button CSS should only be used if you notice that your website, in a particular browser or device, is not changing colors.
Some web components have button elements. In order to make these look consistent in a variety of web browsers, devices, and operating systems, we define a property that makes them easy to recognize and select.
Change ONLY the Background color of the "Add to Wishlist" Button:
button.gspro-o-button {
background: pink;
}Change ONLY the Background color of the "Add to Wishlist" Button when you hover over it:
button.gspro-o-button:hover {
background: rgba(255, 255, 255, 0.2);
}
Change the Color of the "Contact & Venue Info" button only when NOT hovering over it:
button.gspro-o-button--primary {
background: #1F1F1F;
}
Change the Color of the "Contact & Venue Info" button ONLY when hovering over it:
button.gspro-o-button--primary:hover {
background: #3F3F3F;
}button.gspro-o-button--warning {
background: darkorange;
color: white;
}
button.gspro-o-button--warning:hover {
background: darkred;
color: white;
}
Change the Color of the font on the "Save" button under "Select Dates":
button.gspro-o-button--reverse {
background: white;
color: hotpink;
}
Change the Color of the font on the "Save" button under "Select Dates" only when hovering over it:
button.gspro-o-button--reverse:hover {
background: rgba(255, 255, 255, 0.8);
color: hotpink;
}
Change the Color of the close button under "Select Dates":
button.gspro-o-button--icon {
background: inherit;
}
Change the Color of the close button under "Select Dates" only when hovering over it:
button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}
See how easy it was to make those changes? Don't hesitate to reach out to the team if you have any remaining questions regarding your Website Integration!