top of page
MakkPress Logo

Request a quote

Email Us

Live chat

Schedule a call

Who we are

Our Work

UX & Development

Ecommerce

SEO & Marketing

MakkPress Logo

Show color swatches on category pages in Bigcommerce


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 $.ajax({ 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 </script>

  • Save the changes and its Done.

bg-tsti.jpg

Certified Shopify developers

We are one of the oldest shopify partners and Experts, We have been working with shopify since 2012

Top Shopify Developers

Leaves Image

Clutch Certified Ecommerce developers

Clutch, an online client review guide of the leading IT, marketing, and business services companies, has listed us as one of the Leading Ecommerce Developers.

Leaves

Clutch Leading Ecommerce Developers

Leaves

70% retention over 8 years

We are proud of your trust - with over 50 plus well Known Ecommerce brands growing with us for 3 plus years.

Leaves

Trusted Ecommerce Marketing Partners

Leaves

Firesoft People

Erin Evans

5 star

The project has driven traffic to the sites and increased sales. MakkPress Technologies team is enthusiastic and responds quickly to ongoing changes throughout the project. Overall, their effectiveness and strong management team made them a supportive partner

Sam Gavriel Fine Jewelry

Svetlana Gurgov

The MakkPress Team is by far the best company I have dealt with.  Never have to wait for a reply.  Top notch customer service, always prompt to give some extra value and service. Always available to help no matter what my request is about

5 star

Giant Teddy

Ray Khosravi

Highly recommended for building from scratch or at scale. MakkPress Technologies fulfilled every request required by the project. Would use him again for a future project. Team is quick to respond to our comments and communicated well with us and helped our project complete successfully. Great work

5 star

Tenergy Power

Vez

Meet all the criteria requirements of this Project. Had some things missed on the first deliverable, but quick feedback got them all fixed on the second email

Baabuk

Alexander Miller

Makkpress has great shopify resources. Quick to respond and quite good work. We've worked on several template modifications for our shopify theme and will be back for more in the future. Thanks!

Balbea

Bilal Mashhedi

The project has been extremely successful and satisfied all project requirements. The MakkPress Technologies team was collaborative and worked closely with their client to develop the final product

Hear From Our 820+ Happy MakkPress Clients

We are official partners with