'Custom variant input on Add to cart button

I have a product that has 3 variant colors. I'm trying to add a custom add to cart button that's linked to a variant selector

Here's the code of my Add to cart button:

<form method="post" action="/cart/add">
      <input type="hidden" name="id" value="{{ all_products['curecup2'].variants.first.id }}" />
      <input type="hidden" min="1"id="quantity" name="quantity" value="1"/ >
      <input type="submit" value="ADD TO CART" class="btn" />
</form>

Right now, it's automatically choosing the first variant and adding it to the cart.

I would like to add a variant selector and link it to the previous button.

I found the following code that lets you add a variant selector but I have no clue how can I link it. Any ideas maybe?

https://shopify.github.io/liquid-code-examples/example/product-variant-selector

Thanks in advance!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source