Product Filter Background Color

---

Description

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

---