diff --git a/commerce_search_api.css b/commerce_search_api.css
new file mode 100644
index 0000000..e7b2e52
--- /dev/null
+++ b/commerce_search_api.css
@@ -0,0 +1,20 @@
+ul.facetapi-commerce-search-api-fancy li {
+  display: block;
+  float: left;
+  padding: 0 5px 5px 0;
+}
+ul.facetapi-commerce-search-api-fancy li.last {
+  padding-right: 0;
+}
+
+.commerce-search-api-fancy-attributes-color {
+  border: 1px solid black;
+  color: white;
+  display: block;
+  height: 28px;
+  line-height: 35px;
+  padding: 2px;
+  text-align: center;
+  text-shadow: black 0.1em 0.1em 0.2em;
+  width: 28px;
+}
diff --git a/commerce_search_api.info b/commerce_search_api.info
index 755a660..a3d6926 100644
--- a/commerce_search_api.info
+++ b/commerce_search_api.info
@@ -8,4 +8,5 @@ dependencies[] = commerce_product_reference
 dependencies[] = search_api
 files[] = includes/facetapi/filter_same_search.inc
 files[] = includes/facetapi/filter_search_start.inc
+files[] = includes/facetapi/widget_fancy_attributes.inc
 files[] = includes/commerce_search_api_product_display_filter.inc
diff --git a/commerce_search_api.module b/commerce_search_api.module
index 1919f88..b80295c 100644
--- a/commerce_search_api.module
+++ b/commerce_search_api.module
@@ -369,3 +369,54 @@ function commerce_search_api_facetapi_filters() {
   );
   return $filters;
 }
+
+/**
+ * Implements hook_facetapi_widgets().
+ */
+function commerce_search_api_facetapi_widgets() {
+  return array(
+    'commerce_search_api_fancy' => array(
+      'handler' => array(
+        'label' => t('Fancy attributes'),
+        'class' => 'CommerceSearchApiFancy',
+        'query types' => array('term'),
+      ),
+    ),
+  );
+}
+
+/**
+ * Implements hook_theme().
+ */
+function commerce_search_api_theme() {
+  return array(
+    'commerce_search_api_fancy_attributes_color' => array(
+      'variables' => array(
+        'title' => '',
+        'hex' => NULL,
+      ),
+    ),
+  );
+}
+
+/**
+ * Return a <span> tag representing the passed-in color.
+ *
+ * @param $variables
+ *   Variables available for this theming function:
+ *     - hex: Hex representation of the color to display.
+ *     - title: The facet count.
+ * @return string
+ */
+function theme_commerce_search_api_fancy_attributes_color($variables) {
+    // Make sure the value is prefixed by #.
+  if (!substr($variables['hex'], 0, 1) == '#') {
+    $variables['hex'] = '#' . $variables['hex'];
+  }
+  $return = '<span style="background-color: ' . $variables['hex'] . ';" class="commerce-search-api-fancy-attributes-color">';
+  if (!empty($variables['title'])) {
+    $return .= '<span>' . $variables['title'] . '</span>';
+  }
+  $return .= '</span>';
+  return $return;
+}
diff --git a/includes/facetapi/widget_fancy_attributes.inc b/includes/facetapi/widget_fancy_attributes.inc
new file mode 100644
index 0000000..5dc69ef
--- /dev/null
+++ b/includes/facetapi/widget_fancy_attributes.inc
@@ -0,0 +1,65 @@
+<?php
+/**
+ * @file
+ * The commerce_search_api_fancy widget plugin class.
+ */
+
+/**
+ * Widget that renders taxonomy terms as fancy attributes
+ */
+class CommerceSearchApiFancy extends FacetapiWidgetLinks {
+
+  /**
+   * Overrides FacetapiWidget:Links:settingsForm().
+   */
+  function settingsForm(&$form, &$form_state) {
+    parent::settingsForm($form, $form_state);
+    $form['widget']['widget_settings']['links'][$this->id]['display_count'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Display the number of matching items'),
+      '#default_value' => !empty($this->settings->settings['display_count']) ? $this->settings->settings['display_count'] : FALSE,
+      '#description' => t('If checked, the number of matching items will be output with the color square.'),
+    );
+  }
+
+  /**
+   * Overrides FacetapiWidgetLinks::buildListItems().
+   *
+   * Add our css file and call our theme function to theme taxonomy terms as
+   * fancy attributes.
+   */
+  function buildListItems($build) {
+    $facet_info = $this->facet->getFacet();
+    if ($facet_info['field type'] == 'taxonomy_term' && module_exists('commerce_fancy_attributes')) {
+      $terms = taxonomy_term_load_multiple(array_keys($build));
+      $first_term = reset($terms);
+      $bundle = $first_term->vocabulary_machine_name;
+      // Loop over the field instances to find an instance that use the
+      // fancy attributes formatter.
+      foreach (field_info_instances('taxonomy_term', $bundle) as $field_name => $instance) {
+        if ($instance['display']['add_to_cart_form']['type'] != 'commerce_fancy_attributes_color') {
+          continue;
+        }
+        $found = TRUE;
+      }
+      // Check if we should display the facet count.
+      $display_count = !empty($this->settings->settings['display_count']);
+      // If we've found at least one field that uses the fancy attributes formatter.
+      if (!empty($found)) {
+        drupal_add_css(drupal_get_path('module', 'commerce_search_api') . '/commerce_search_api.css');
+        foreach ($build as $value => &$item) {
+          $item['#html'] = TRUE;
+          $variables['hex'] = $terms[$value]->{$field_name}[LANGUAGE_NONE][0]['value'];
+          if ($display_count) {
+            $variables['title'] = $item['#count'];
+          }
+          $item['#markup'] = theme('commerce_search_api_fancy_attributes_color', $variables);
+          $item['#count'] = NULL;
+        }
+      }
+    }
+    $items = parent::buildListItems($build);
+    return $items;
+  }
+
+}