Add color swatches on store collection page

Is there a way to add color swatches under applicable products on a store collection page?  

For example, I have golf shirt products that come in multiple colors (black, white, red, etc.).  I would like a circle with each of these colors below the product.  Please note that not all products in my store collection have variants / multiple colors.

This URL provides an example.  I found it on a "Best Squarespace Design" list, so it seems doable.

https://bembien.com/collections/handbags-tote

Thanks in advance.

11 hours ago, Ineedsqsphelp said:

Is there a way to add color swatches under applicable products on a store collection page?  

The URL you have quoted is a Shopify site, not Squarespace:

The colour swatch feature is not available on Squarespace. The visual element (showing colour swatches) could probably be coded, but they wouldn't be interactive (the image wouldn't change when hovering over them).

If you'd like to write code that would add swatches to the Product List Page, the first step would be to add some 'tags' to some of the products to indicate the colour. For example "color-red" or "color-green". The colour swatches would also need to be added to your asset library as images with similar filenames (for example "color-red.jpg") so they can be used as the swatches. The code could then look for the tags and add the appropriate swatch(es). If you'd like help with the code, we'll need a working link to the product page on your website.

I hope this helps to get you started.

Did this help? Please give feedback by clicking an icon below  ⬇️

Sure, we’ve got a plug-in for this here. https://www.sqspthemes.com/plugins/p/product-swatch-variant
 

works on the main shop (collection) page too