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

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

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 *