How can I customize color swatch images in the Pipeline theme?

[jessestephen]

im trying to design my shopify store and add custom colour swatch photos into my colour swatch on the product and collection pages but cannot seem to figure out how to make the colour swatch icon a custom image/colour.

how can make the colour swatch images a custom image?

[joehustle]

.product-variant__swatch {
  background-image: url("/assets/images/swatches/custom-color1.png");
}

[sahilsharma9515]

Hi @jessestephen If I got you right then you simply want to add color swatches in your product/collection page and want to add custom color/image in that swatches according to you.

If this is the case then there are 3 ways through which you can accomplish this.

1. Some theme have this option by default in their theme so that yo can have the color swatches, if your theme allow you to do this then please use that option.
2. If you don't have this option in your theme then you can add 3rd party app in your store that will enable the color swatches on your store and you will be able to add custom image/color through that app.
3. The last option will be you can achieve it from custom coding and Metafield, so that you can show the color swatches according to your needs.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[jessestephen]

hi Sahil, i messaged you on whatsapp.

thanks, jesse