Heads up! We have a new documentation site and this article has been rewritten.|

Check out the latest version of this article →

The javascript implementation color filter supports the following basic colors by default: blue, brown, yellow, orange, gray, green, purple, red, pink, white, and black.

It's possible to add additional colors to Medium Merchandising. Follow the following steps:

1. Add the color script:

var customColors = {
  kleurnaam: "waarde"};
(function (d, c) {
  var s = d.createElement("style");
  s.type = "text/css";
  Object.keys(c).forEach(function(n) {
    s.innerHTML += `.twn-facet-collection__glyph.is-${n} { background-color: ${c[n]}; }`;
  });
  d.head.appendChild(s);
})(document, customColors);

2. Expand the customColors object in the script using the preferred colors:

The customColors object contains the name of the preferred colors and the corresponding values. The name should be identical to the option name in the filter.

Various formats are supported as color values. You could use a hexadecimal or rgb notation if you want.

An example of this object may look like this:

var customColors = {   goud: "#FFD700", // Hexadecimale notatie  zilver: "#C0C0C0",   brons: "rgb(205, 127, 50)", // Rgb notatie};