1300 513 310

Show color swatches on category pages in Bigcommerce

blog color

The swatch display type is used to show a color or texture for a product or one of its attributes. It’s commonly used for products that are available in different colors or materials. For example, you could use swatches to let your customers select from available patterns of fabric.

Setting Up the Option

Go to Store Setup › Design, than click Edit HTML/CSS.


Find Category.html, Copy below code and paste the code before </body>


<script type=”text/javascript”>
/* Ajax in Product Color Options */

$(‘#frmCompare ul.ProductList > li’).each(function(index, el) {
var _this = $(el);
var thisProductName = _this.find(‘.ProductName’);
var thisProductURL = thisProductName.find(‘> a’).attr(‘href’);

// AJAX to this product

url: thisProductURL,
type: ‘GET’,
dataType: ‘html’,
async: false
.done(function(data) {
// find “color” swatches
var thisSwatches = $(‘.productAttributeRow’, data)
.filter(function() {
return $(this).find(‘.productAttributeLabel .name’).text().trim() == “Color:”;
.find(‘.productAttributeValue .previewContent span.swatchColour’);
// Append swatches
if (thisSwatches.length > 0) {
thisSwatches.wrapAll(‘<div class=”colorGrid”></div>’).parent().appendTo(thisProductName);
} // end if
}); // end ajax done
}); // end each

  • Save the changes and its Done.
CALL US: +91 7827262320

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

"request a Quote"

What makes us unique is our high level commitment towards what we do

Google Rating
Google Rating
5.0 star rating

Get a Free Website Audit Worth $449

Get a Free Audit of your website to Know what changes and updates are needed to improve your websites performance to generate more leads. Our Experts will do a Manual in-depth Analysis of your website for 1- SEO
2- UI/UX Conversion optimization.