Update custom buttom href containing variant ID when selecting product variants

New Member
2 0 0

Hello guys.


I have created a custom button in my product-template.liquid borrowing the add-to-checkout class in order to make it look like the AddToCart Button so I don't have any troubles when it comes to CSS.

However, I want to change the button link to get to a custom URL based on the variant ID, so whenever my costumer selects a different variant, the link in the button changes accordingly.

this is my button code:


<a href="https://mydomain.com/a/secure?add=VARIANT.ID" class="btn btn--add-to-cart">GO TO LINK!</a>
.btn--add-to-cart {
  width: 100%

I've found a way to get the first variant id to the URL using {{product.variants.first.id}}, but I'm not sure how to make it update when the variant changes.

I know that HTML won't change it by itself, so a javascript function should make it update, but I know absolutely nothing about coding. I know I need a function, but I don't know how to write it, where to write it, and how to make HTML to get it and update my link. 

Could anybody help-me? I'm using Brooklyn Them, by the way.

I need a functon, 

47 5 6

try using this instead

{{ product.selected_or_first_available_variant.id }}

H. Azzam
New Member
2 0 0

Thanks for your reply Azzam.
Unfortunately, this doesn't work. Using liquid only won't update the HTML. A javascript function is needed in order to update liquid information and show it on HTML.

New Member
7 0 0



Did you get the solution . I am also looking for same 


{% if product.selected_or_first_available_variant.id == 23423 %}
{% endif %}
{% if product.selected_or_first_available_variant.id == 1233%}
something else
{% endif %}
but it's always first variant id .  any solution please . Themes have js and ajx as page not loading on variant changes so there will be some variables which we don't know .
any help will be appreciated .
Thank you !