Product Variant redirect links

Can I add URL links for product variants to redirect to the specific variant (color) product page?

For example, if a tshirt is available in 3 colors - Black, White and Blue and I have product pages with corresponding photographs for each colorway, is it possible for customer to select the variant/swatch on product page and redirect to the product page link that connects with that colorway?

Without this, inventory is getting doubled up.

For example, in the image below, by clicking on khaki, it should direct me to the khaki url so that inventory is always accurate.

On 7/24/2023 at 7:03 PM, NOWAD said:

Can I add URL links for product variants to redirect to the specific variant (color) product page?

For example, if a tshirt is available in 3 colors - Black, White and Blue and I have product pages with corresponding photographs for each colorway, is it possible for customer to select the variant/swatch on product page and redirect to the product page link that connects with that colorway?

Without this, inventory is getting doubled up.

Looking for the same solution, for different reasons. Did you come up with a solution how to link a variant photo to url? In theory, indeed it should be possible but my skills are nowhere near there. My only need is to add a link to the variant picture

FOR THE PRODUCT PAGE

  /* Variant Button */
  label.sqs-button-element--secondary{
    width:4rem;
    aspect-ratio: 1/1;
    background-position: 50% 50%;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    padding:unset !important;
    transition: scale 300ms !important;
    color:transparent !important;
    background-color: transparent;
    visibility:hidden !mportant;
    text-indent: -9999px;
    &:hover {
      scale:1.1;
      background-color: transparent !important;
    }
    &::before {
      display:none;
    }
  }
  /* T-Shirt Color Red*/
  .sqs-button-element--secondary[for="variant-option-Color-Red"] {
    background-image: url() !important;
  }
  /* T-Shirt Color White*/
  .sqs-button-element--secondary[for="variant-option-Color-White"] {
    background-image: url() !important;
  }
  /* T-Shirt Color Black*/
  .sqs-button-element--secondary[for="variant-option-Color-Black"] {
    background-image: url() !important;
  }
  /* T-Shirt Size Small*/
  .sqs-button-element--secondary[for="variant-option-Size-Small"] {
    background-image: url() !important;
  }
  /* T-Shirt Size Medium*/
  .sqs-button-element--secondary[for="variant-option-Size-Medium"] {
    background-image: url() !important;
  }
  /* T-Shirt Size Large*/
  .sqs-button-element--secondary[for="variant-option-Size-Large"] {
    background-image: url() !important;
  }
  /* T-Shirt Size XLarge*/
  .sqs-button-element--secondary[for="variant-option-Size-X Large"] {
    background-image: url() !important;
  }

I have multiple variants and I replaced the variant buttons with PNG images that I uploaded into the CSS file uploader. You have to rename your variant types to be specific. You can have spaces in the variants like X Large.