javascript - Want to Change to a new product on a product page whenever color variant is clicked Shopify

I want when i click on a color variant on shopify store product page to load a new product corresponding to the color variant.

Like on this website below

https://www.prettylittlething.com/chocolate-slinky-high-neck-cut-out-long-sleeve-bodycon-dress.html (https://www.prettylittlething.com/chocolate-slinky-high-neck-cut-out-long-sleeve-bodycon-dress.html)

All products are already set up as separate color variants meaning all color variants have products already set up in the theme.

I want whenever i click to dynamically pick out a coresponding product by color variant.

The color variant class is product-options__value

current code so far

$(".product-options__value ").click(function () {
  alert("it works");
  // let currentURL = "window.location.href";
  
  // currentUrl = $(location).attr("href");
  // console.log(window.location.pathname);
 
});
Copy code

when i inspect the color variant this is the code below

<div class="product-options__value product-options__value--circle rounded-circle text-hide cursor-pointer active lazyload" data-js-option-value="" data-value="WEDGEWOODOVALS" data-js-trigger-id="footbar-Color-WEDGEWOODOVALS" data-master="url(//cdn.shopify.com/s/files/1/reducted_[width]x.progressive.jpg?v=7889054)" data-bg="url(//cdn.shopify.com/s/files/1/reducted_48x.progressive.jpg?v=47786648)" data-scale="2" data-js-tooltip="" data-tippy-content="WEDGEWOOD OVALS" data-tippy-placement="top" data-tippy-distance="6" data-was-processed="true" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/reducted_48x.progressive.jpg?v=67895&quot;);" tabindex="0">WEDGEWOOD OVALS</div>

Am in way over my head any help is highly appreciated.

The color variant class is **product-options__value**

**current code so far**


Copy code

`$(".product-options__value ").click(function () { alert("it works"); // let currentURL = "window.location.href";

// currentUrl = $(location).attr("href"); // console.log(window.location.pathname);

});`

Copy code

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.