A newer version using the browsers fetch API, next will be to store the data in localstorage for quicker retrieval. (NEEDS CLEANUP)

color swatch for shopify 2.js

const colorSwatchChange = async (e) => {
  e.preventDefault()
  let title = document.querySelector('.product-single__title')
  let description = document.querySelector('#descriptionFrames')
  let productPrice = document.querySelector('.product__price')
  let images = document.querySelectorAll('#mainProductImages')
  let productThumbs = document.querySelectorAll('#productThumbs')
  let intFrameWidth = window.innerWidth;
  let target = e.currentTarget
  let url = `${target.dataset.url}.js`
	try {
    let fetchURL = await fetch(url, { headers: {"Accept": "text/plain"} })
    let responseToText = await fetchURL.text()
    let textToJSON = JSON.parse(responseToText)
    window.productStrings.productHandle = textToJSON
    title.innerHTML = textToJSON.title
    description.innerHTML = textToJSON.description
    productPrice.innerHTML = theme.Currency.formatMoney(textToJSON.price, theme.settings.moneyFormat)
    
    for(let i = 0; i < images.length; i++) {
      images[i].srcset = ""
    }
      
      
    let filteredImages = []
    for(const t of textToJSON.images) {
      if(intFrameWidth >= 1200) {
      	filteredImages.push(t.replace('//cdn.shopify.com/', `https://ik.imagekit.io/optical/tr:q-100,w-1200,f-auto,pr-true/`))
      } else if(intFrameWidth < 1200) {
        filteredImages.push(t.replace('//cdn.shopify.com/', `https://ik.imagekit.io/optical/tr:q-100,w-1000,f-auto,pr-true/`))
      } else if(intFrameWidth < 900) {
		filteredImages.push(t.replace('//cdn.shopify.com/', `https://ik.imagekit.io/optical/tr:q-100,w-800,f-auto,pr-true/`))
      } else {
        filteredImages.push(t.replace('//cdn.shopify.com/', `https://ik.imagekit.io/optical/tr:q-100,w-600,f-auto,pr-true/`))
      }
    }
    for(let i = 0; i < images.length; i++) {
      images[i].srcset = filteredImages[i]
      productThumbs[i].srcset = textToJSON.images[i].replace('//cdn.shopify.com/', `https://ik.imagekit.io/optical/tr:q-100,w-150,f-auto,pr-true/`)
    }
      
   let ulParent = document.querySelector('#ulParent').children
   let windowLocation = `${target.dataset.url}`
    let holdArray = [];
      for(let i = 0; i < ulParent.length; i++) {
        ulParent[i].style.border = "";
      holdArray.push(ulParent[i].dataset.url)
      let indexedWindowLocation = holdArray.indexOf(windowLocation)
        if(indexedWindowLocation >= 0) {
            ulParent[indexedWindowLocation].style.border = "1px solid #000";
        }
     }   
      
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
  } catch(e) {
    console.log(e)
  }
}

let productSelector = document.querySelectorAll('#productSelectorLI')
for(let p of productSelector) {
	p.addEventListener('click', colorSwatchChange)
}

for(let p of productSelector) {
	p.addEventListener('mouseover', colorSwatchChange)
}