While shopping online apparel, you definitely came across a situation where you have to choose the product color and size option. This is what known as Swatches that provides an alternate way to display the selection of options for configurable products. Rather than choosing an option from a typical drop-down, swatches make it easy for customers to make their selection by clicking a swatch. By default, this type of swatches is displayed on the product page, product list, and in layered navigation.
Unfortunately, these swatches are only available for the default RWD package. But we can add this feature in our custom theme using code.
Firstly copy the “configurableswatches” folder to your theme “template” folder.
app\design\frontend\RWD\default\template\configurableswatches
and its content to
app\design\frontend\Themes\Yourtheme\template
Now, you have to copy “configurable.phtml” file to your “options” folder.
app\design\frontend\RWD\default\template\catalog\product\view\type\options\configurable.phtml
To
app\design\frontend\Themes\Yourtheme\template\catalog\product\view\type\options
Also, copy your “media.phtml” from view folder to your custom theme view folder.
app\design\frontend\RWD\default\template\catalog\product\view\media.phtml
to
app\design\frontend\Themes\Yourtheme\template\catalog\product\view\
Also, copy swatches javascript to your theme.
skin\frontend\RWD\default\js\configurableswatches\
skin\frontend\RWD\default\js\lib\
and its content to
skin\frontend\Themes\Yourtheme\js\
and…
skin\frontend\RWD\default\js\app.js
skin\frontend\RWD\default\js\minicart.js
skin\frontend\RWD\default\js\slideshow.js
to
skin\frontend\Themes\Yourtheme\js\
Also, Copy “configurableswatches.xml” file from the RWD theme folder to your custom theme layout folder.
app\design\frontend\RWD\default\layout\configurableswatches.xml
to
app\design\frontend\Themes\Yourtheme\layout\
Now, we have to create “local.xml” file inside our theme layout folder and add the following code.
app\design\frontend\Themes\Yourtheme\layout\local.xml
NOTE : If your package layout folder already contains a local.xml file, then do not overwrite it. Have a look at the changes in the next step and copy them to your version of the local.xml file.
skin_jsjs/lib/modernizr.custom.min.js
skin_jsjs/lib/selectivizr.js
skin_jsjs/lib/matchMedia.js
skin_jsjs/lib/matchMedia.addListener.js
skin_jsjs/lib/enquire.js
skin_jsjs/app.js
skin_jsjs/lib/jquery.cycle2.min.js
skin_jsjs/lib/jquery.cycle2.swipe.min.js
skin_jsjs/slideshow.js
skin_jsjs/lib/imagesloaded.js
skin_jsjs/minicart.js
skin_css
css/customstyle.css
skin_js
Now. Add the following css to your “customstyle.css” file:
skin\frontend\Themes\yourtheme\css\customstyle.css
/* ============================================ *
* Configurable Swatches
* ============================================ */
/* Clears */
.clearfix:after,
.configurable-swatch-list:after,
.product-view .product-options .swatch-attr:after {
content: '';
display: table;
clear: both;
}
/* General Swatch Styling */
.swatch-link,
.swatch-label {
display: block;
border-radius: 3px;
font-size: 14px;
text-align: center;
color: #636363;
text-decoration: none;
box-sizing: content-box;
}
.swatch-link {
border: 1px solid #cccccc;
margin: 0 0 3px;
}
.swatch-link img {
border-radius: 2px;
}
.swatch-link:hover {
cursor: pointer;
text-decoration: none;
}
.swatch-link .x {
display: none;
text-indent: -999em;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(../images/bg_x.png) center no-repeat transparent;
z-index: 10;
}
.swatch-link.has-image .swatch-label {
position: relative;
}
.swatch-link.has-image img {
position: absolute;
top: 0;
left: 0;
}
.swatch-label {
border: 1px solid #fff;
margin: 0;
white-space: nowrap;
background: #f4f4f4;
}
.configurable-swatch-list {
margin-left: -3px;
zoom: 1;
clear: both;
-webkit-transform: translateZ(0px);
}
.configurable-swatch-list li {
float: left;
zoom: 1;
margin: 0 0 0 3px;
}
.products-grid .configurable-swatch-list li {
display: inline-block;
float: none;
margin: 0;
vertical-align: top;
}
.configurable-swatch-list .not-available .x {
display: block;
}
.configurable-swatch-list .not-available .swatch-link {
border-color: #ededed;
position: relative;
}
.configurable-swatch-list .not-available .swatch-link.has-image img {
opacity: 0.4;
filter: alpha(opacity=40);
}
.configurable-swatch-list .not-available .swatch-label {
color: #aaa;
background: #fff;
}
.configurable-swatch-list .wide-swatch .swatch-label {
padding: 0 6px;
}
.configurable-swatch-list .not-available a:focus {
outline: 0;
}
#narrow-by-list dd .configurable-swatch-list li {
margin: 0 0 0 3px;
width: 47%;
}
#narrow-by-list dd .swatch-link {
border: none;
line-height: 25px;
margin-right: 2px;
text-align: left;
}
#narrow-by-list dd .swatch-link.has-image {
line-height: inherit;
}
#narrow-by-list dd .swatch-link:hover .swatch-label {
border-color: #3399cc;
}
#narrow-by-list dd .swatch-label {
background: #f4f4f4;
border: 1px solid #cccccc;
border-radius: 3px;
display: block;
float: left;
line-height: 1.5em;
margin: 0 5px 0 0;
padding: 1px 5px;
white-space: nowrap;
}
#narrow-by-list dd .swatch-label img {
border: 1px solid #fff;
border-radius: 3px;
box-sizing: content-box;
}
#narrow-by-list dd .has-image .swatch-label {
padding: 0;
}
@media only screen and (max-width: 770px) {
#narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
clear: left;
}
}
.currently .swatch-current {
position: relative;
}
.currently .swatch-current .btn-remove {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
.currently .swatch-current span {
display: block;
float: left;
}
.currently .swatch-link {
display: inline-block;
margin: 0 0 0 3px;
}
.currently .swatch-link:hover {
border-color: #cccccc;
cursor: default;
}
/* Other Swatch States */
.configurable-swatch-list .hover .swatch-link,
.configurable-swatch-list .selected .swatch-link,
.swatch-link:hover {
border-color: #3399cc;
}
.configurable-swatch-box {
background: none !important;
}
.configurable-swatch-box select.swatch-select {
display: none;
}
.configurable-swatch-box .validation-advice {
margin: 0 0 5px;
background: #df280a;
padding: 2px 5px !important;
font-weight: bold;
color: #fff !important;
float: left;
display: block;
border-radius: 3px;
}
.product-view .product-img-box .product-image img {
max-width: 100%;
max-height: 750px;
margin: 0px auto;
}
.product-view .product-img-box .product-image-zoom {
z-index: 0;
}
.product-view .product-image-thumbs img {
max-width: 100%;
max-height: 100%;
}
Lastly, copy the “bg_x.png” to your theme images folder.
skin\frontend\RWD\default\images\bg_x.png
to
skin\frontend\Themes\Yourtheme\images\
That’s it, Let us know if you are facing an issue while implementing swatches using this code by commenting below.
Happy Swatches!