Show all color swatches within collection pages

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: http://store.manitobah.ca/collections/mukluks

Via Czarto

You may also like...

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

Leave a Reply

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