Add Color Swatch base on image link

This script will help you setup the color swatches automatically just by implementing a rule in which the colors are uploaded as files in to Shopify. all you need to do is update the link below to the ones that contains all of your files

<script>
const YG_TITLE_TO_IMG_URL={};
var __isp_options = __isp_options || {};
__isp_options.isp_serp_with_product_attributes = 1;
__isp_options.isp_serp_callback = function (data) {
for(const key in ISP_PRODUCTS){
let yg_isp_prod = ISP_PRODUCTS[key];
const variants = ISP_PRODUCTS[key].vra;
const $gridItem = $(`.isp_grid_product[product_id="${key}"]`);

if(yg_isp_prod.alt){
for(const img_indx_yg in yg_isp_prod.alt){
let the_image_name=yg_isp_prod.alt[img_indx_yg][0];
let transformed_to_url="https://cdn.shopify.com/s/files/1/0259/2224/0611/t/20/assets/"+the_image_name.toLowerCase().replaceAll(' ','-')+'.png' 
YG_TITLE_TO_IMG_URL[the_image_name]=transformed_to_url;
}
} 
else if (yg_isp_prod.vra) {
for(const variant in yg_isp_prod.vra) {
yg_isp_prod.vra[variant][1].forEach(function(arr,i){
if ( arr[0] === 'Color' ) {
for (const color in arr[1]) {
const the_image_name = arr[1][color];
const transformed_to_url="https://cdn.shopify.com/s/files/1/0259/2224/0611/t/20/assets/"+the_image_name.toLowerCase().replaceAll(' ','-')+'.png'

YG_TITLE_TO_IMG_URL[the_image_name] = transformed_to_url;
}
}
})
}
}
else {
console.log('product obect has neither alt nor vra object');
} 
}

$jquery_isp(".isp_product_color_swatch a, .isp_product_color_swatch span").each(function(){$jquery_isp(this).attr('title');}) 
$jquery_isp(".isp_product_color_swatch a, .isp_product_color_swatch span").each(function(){$jquery_isp(this).css('background-image',"url("+YG_TITLE_TO_IMG_URL[$jquery_isp(this).attr('title')]+")")})

};



</script>