How to enhance look of swatch with CSS

How to enhance look of swatch with CSS

Many of our clients don’t want to upload images for all attributes, but still want to present them using our Color Swatch Extension. In this tutorial we will explain how to enhance visual style of attributes that use Color Swatch but don’t have assigned swatch thumbnails.

Color Swatch extension will present attributes options as box with assigned thumbnail image. If there is no assigned images for attribute option it will be displayed as box with attribute option label inside. With CSS we can style those boxes and make them look even better than poorly made images. Most obvious example of such attribute is ‘size’, which doesn’t require images to better present attribute options, such is case with ‘color’ or ‘pattern’ attributes.

All our changes will be made in colorswatch.css file which can be found in folder: skin/frontend/default/default/css/; Path to file may be different if you are using custom theme.

To inspect page layout and preview edited html, we will use Firefox with Firebug plug-in installed; you can use any other browser and tool that you find suitable. For file editing simple text editor will be sufficient, before you start editing be sure that you created backup of colorswatch.css file.

In our example we will use T-shirt as test product with two attributes, ‘color’ and ‘size’. We uploaded thumbnails for ‘color’ attribute, while ‘size’ attribute is left as it is without any images assigned.

From picture you can see that all swatches are presented as unordered list with tags:

id=”color-swatch-attribute-525” and class=””

Number at the end of ID tag is attribute id and is unique for every attribute. By using that ID we can create style rules that will be applied only on attribute options for that attribute. That allows us to setup different rules for every attribute if we need.

CSS code for our ‘size’ attribute will look like this:


#color-swatch-attribute-525 li{}

#color-swatch-attribute-525 li span{}

We will set ‘size’ swatches to change width according to label size, add background color, border and rounded edges for boxes to make them more noticeable and nicer.

In next step we will add style for hover and select states, they are defined by class and pseudo class respectively.

In our example for hover state we will change border color to orange:

#color-swatch-attribute-525 li:hover{ border: 1px solid #E26703;}

Selected swatches will have class ‘active’; in colorswatch.css file we will add code that will define that state:


For selected state we will set color for attribute option label to be same as border (check image bellow code):


border: 1px solid #E26703 !important;

color: #E26703 !important;    


If attribute option is not available (in our example ‘red’ color is available only in size ‘small’) we can hide unavailable attribute options. Unavailable attribute options have class ‘is-disabled-option’, by using ‘display: none;’ CSS rule we can hide them from list.

If we decide to keep them visible, we can make them to look different from available one. Example code from bellow will apply rules to all unavailable attribute options (in Color Swatch default css file those options have line-trough):

.color-swatch-wrapper ul {}


We can go even further and set rules for unavailable attribute options for particular attribute. In our example we will set rules for ‘size’ attribute by using opacity that will make them diminished. That way we can show our customers all possible attribute options, but still mark one that are currently unavailable. Code that we used in our example (preview style on image bellow code):

#color-swatch-attribute-525 {opacity:0.5;}

In this small tutorial we tried, by using simple example and basic CSS rules, to show you how you can style Color Swatch swatches. You can still create outstanding visual look for attributes that doesn’t have uploaded swatch images fast and easy. All those modifications also can be applied to swatches that have uploaded images to improve visual effect even more.

Don’t forget that Color Swatch extension offer you possibility to upload images for each swatch state:

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

One thought on “How to enhance look of swatch with CSS”

  1. thank you so much 🙂
    is so hard find good article to solve real problems in magento
    i begin with my first store(boots) n swatchs stilized is good for sales XD


Leave a Reply

Your email address will not be published. Required fields are marked *