Adding Colour Swatches to Collection Page - Debut Theme

New Member
7 0 0

Hi,

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?

 

Thanks

 

0 Likes
Shopify Staff
Shopify Staff
537 0 71

Hey, there!

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). 

If you want to go an easier route, you can also download an app to make that change for you. Check out Swatches or Swatchify. :) 

Let me know if you have any further questions, or if there's anything I can clarify!

Savannah | Shopify Guru
support@shopify.com

0 Likes
New Member
7 0 0

Hi Savannah,

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.

Best

 

Callum

 

 

0 Likes
New Member
7 0 0

When will an official fix come out for this issue with sectioned themes?

0 Likes
New Member
1 0 0

Bumping this question back to life.  I want to add swatches to the collections page, not the products page.  Appears Swatches and Swatchify only add to the product page.  How do I add swatches to the collections page?  

0 Likes
Shopify Expert
2656 61 651

Hi Dan, 

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
9 0 0

Hi,

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

Thank you

Techie pugs
0 Likes

Hey,

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:

shopify swatches

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.

Cheers,

Joe

★★★ Need help setting up your Shopify store? Hire me here: https://liquify.design ★★
0 Likes
Shopify Expert
9800 91 1554

You're reviving a year old post here Joe. That gist link is broken as well.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
26 0 1

Hey Guys,

This is Tamal here from HeyCarson Shopify expert team.  If you are not coding savvy, you can get the color swatches for collection pages here.

Also, check out our Shopify small task menu for small theme customization tasks.

Best,

T. Santra

0 Likes