Product Filter Background Color

Look Demo

Add a background color to the product filter. This plugin uses css editor and works with Squarespace 7.0 (Brine template family).

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste one of the codes below into the Custom CSS Editor box.

// Product Filter Background //

@media screen and (min-width: 720px) {
.ProductList-filter {
  background: #E6F8E0 !important;
  padding: 20px !important;
  width: 250px !important;
  margin-right: 20px;
}
}

// Product Filter Background - Mobile //

@media screen and (max-width: 720px) {
  .ProductList-filter 
  {
  width: auto !important;
  margin-right: 0px;
}
}

Customize

Adjust the background, padding, width, and margin right values to your liking. Mobile styles help keep it full width on mobile devices.

If you don’t see the product filter on your commerce product page, you can easily enable it in Site Styles.

License

This plugin comes with an Unlimited Use License. View License Terms