Show all color swatches within collection pages

Sell Online With Shopify
Trusted by millions of businesses worldwide
Start your Shopify 14-day free trial and save up to 25% on Shopify when you sign up for an annual, 2-year, or 3-year plan.

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

12 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?

Leave a Reply

Your email address will not be published.