Show all color swatches within collection pages

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

shopify-color-swatchHere is some code for your Shopify store that will display color swatches for your products.

  • Install this on your Collections page within your Product Loop. If your theme has a *product-thumbnail.liquid* snippet install it there, (or alternatively in your *product-loop.liquid* snippet).
  • Create your own images for each color swatch and set the filename to the color (ie: black.png, white.png, green.png, etc…)

You can see demo in there:

Via Czarto

You may also like...

13 Responses

  1. flo says:

    Nice but can you make those color clickable and change the featured image?

  2. Raniel says:

    plss show us thnx

  3. UMA MAHESWARI says:

    Hai can you help me to change images with respective colors clickable on collection page.

  4. Jess says:

    I love this option, but I can’t seem to find a place to put it in the sectioned themes. Any tips?

  5. Hannah says:

    I would love to do this on my react theme but can’t find where to put the code – can you help?

  6. Marcie says:

    I’m using the Debut theme, I don’t have either of the snippets referenced, where would I put this code??? It’s exactly what I’m looking for, would love to use it.

  7. When selecting the white swatch variant in the 3 product, the 1st white swatch gets selected

  8. shabnoor thakur says:

    can you help me to change images with respective colors clickable on collection page

  9. ofir says:

    your demo store changes color dymically with mouse hover, can you upload a code to explain this?

  10. Omar says:

    Does this no longer work?

Leave a Reply

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