Applying your brand colors and typography to web components requires a basic understanding of CSS

Note: If your website is using a specific color theme, you may need to add:

!important;

after each code snippet. This will override your theme's color settings.

Below are the code snippets required to change various colors on your Wishlist site. 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.

General CSS Color Snippets

/* 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; 
}

/* filter button */
.gspro-c-item-gallery__toggle-filters  {
    background: green !important;
}

/* category button - mobile only */
.gspro-c-item-gallery__toggle-category {
    background: orange !important;
}

/* 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;
}

/* category text color */
.gspro-o-category {
    color: purple !important; 
}

/* category count badge text color */
.gspro-u-badge {
    color: orange !important;
}

/* wishlist 'cart' count badge*/
gspro-wishlist .gspro-c-wishlist__count {
    background: yellow !important;
    color: purple !important;
}

/* 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

gspro-item-card {
  background: rgb(250, 250, 250);
}

gspro-item-card:hover {
  background: rgb(255, 255, 255);
}

gspro-item-card .gspro-o-card__title {
  color: #1F1F1F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

gspro-item-card .gspro-o-card__subtitle {
  color: #656565;
}

gspro-item-card .gspro-o-card__add button {
  background: #2A2A2A;
}

gspro-item-card .gspro-o-card__add:hover button {
  background: #1A1A1A;
}

Item Detail CSS

gspro-item-detail .gspro-c-item-detail__title {
  color: black;
}

gspro-item-detail .gspro-c-item-detail__price {
  border: 1px solid black;
  color: black;
}

Wishlist CSS

The wishlist 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.

gspro-wishlist[data-mode="collapse"] {
  background: white;
}

gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {
  background: black;
  color: white
}

gspro-wishlist[data-mode="collapse"] use {
  fill: black;
}

gspro-wishlist[data-mode="expand"] {
  background: hotpink;
}

Button CSS

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.