How to use Configurable Swatches in Custom Magento Theme

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.

<!--?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>

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

/* ============================================ *
 * 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%;
}

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!

Click to rate this post!

[Total: 4 Average: 5]

How to use Configurable Swatches in Custom Magento Theme

Dhiren Vasoya

Leave a Reply Cancel reply

Get Connect With Us

Press ESC to close

Share Article:

Magento 2.3.1 will be released on March 26th, Here is everything you need to know

Magento Open Source 2.3.1 Released Features, Highlights & Improvements

Leave a Reply Cancel reply