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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!--?xml version="1.0"?--> <script>lib/jquery/jquery-1.10.2.min.js</script> <script>lib/jquery/noconflict.js</script> 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<script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script> |
Now. Add the following css to your “customstyle.css” file:
skin\frontend\Themes\yourtheme\css\customstyle.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
/* ============================================ * * 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!