I'm currently running our site, theleafycity.com, through the Debut theme and would like to add colour swatches that when clicked will change the image on the collection pages.
An example of what I'm trying to achive can be found here: https://www.southernmarsh.com/collections/shirts
Does anyone know the appropriate code to implement and any tutorials?
Savannah here from the Shopify Guru Team.
Although it hasn't been altered to work with sectioned themes yet, we do have a product swatch HTML/CSS tutorial here. Likely, you will just need to swap out the product.liquid for the product-template.liquid (in the sections area of your theme's html/css files).
Let me know if you have any further questions, or if there's anything I can clarify!
Savannah | Shopify Guru
Thanks for the tip and the tutorial :).
I've given it a go but it only adds the swatches to the individual product pages. Is there anyway to get the swatches to show on the collections pages under each product thumbnail? So that each product swatch would change the thumbnail in a collection.
you can add a code, similar to this to your product-grid-item.liquid Snippet and dress them up with some CSS.. If your color name is (for example) "Morning Red", the code will try to use the "Morning Red.jpg" from your Assets as the background for the swatch, or take the last word from the color name -- Red and make the swatch have this color as a backgound.
Adding color swatches on collection page is a very useful idea for the stores which have multiple color variants for their products.
Adding and managing the color swatch button background can be very hard if your store contains a lot of products. We have created an app Collection Swatch Pug to overcome this situation and the app can be used to show the swatch buttons on both the collection and product pages easily.
Try our app for free on your store and see if it suits your requirements. The app setup is free of cost and support team is more than happy to help you with the setup: https://apps.shopify.com/collection-swatch-pug
In case anyone needs color circles on collection page - I wrote a solution which doesn't use images (because specific client gets all confused then adding them in assets). This method uses css colors.
You'll need to be able to code to implement as this is bare bones code in this gist.
Code needs to go in the product grid item snippet - & put the css in your css file.
Gonna look something like this:
If I have some time later I may code up a version which changes the images also via ajax on click. Current one is not interactive but shows colors. Kinda cheap n quick solution. May be of use to someone as a starting point.