Change to the another product url when selecting a color variant of a product?

Store Design
1

10 1 3

I have already implement color swatches to my product page but I want something different. I would like when I click a different color of the same product to change and go to that specific color url. Means i want to change product when i click on a other color swatch.

Example: https://www.doyoueven.com/products/excel-plus-leggings-candy-pink

i want same like this product.

Hare is my site: https://www.avvini.com.au/products/luna-seamless-scrunch-bum-leggings-pink?pr_prod_strat=copurchase&…

Can anyone please help me to make this functionality in Flow theme.

Thanks in advance!

2

Hi,

I see you managed to find a way and get the url linked to the colours. I am currently trying to solve the same issue so any help would be appreciated.

Thanks!!

3

Hey man,

could you pls share how you did it - color - link to same product?
the second question, how did you implement “Follow“ functionality - when product back in stock mail the user.

Thanks

4

Hi,

Hope this will help

Make each color swatch hold URL of the product page for that colour, and when clicked use JavaScript to go to that URL.

JavaScript Example

<script>
  (function () {
    // delegated listener so it works for dynamically-rendered swatches too
    document.addEventListener('click', function (e) {
      var btn = e.target.closest && e.target.closest('.color-swatch');
      if (!btn) return;
      var url = btn.getAttribute('data-product-url');
      if (!url) return;
      // Add a small delay if your theme also has JS that selects variants.
      // Usually immediate redirect is fine:
      window.location.href = url;
    });
  })();
</script>