Solved

HowTo Get Selected Variant Using Shopify Liquid

QnavWhat
Excursionist
45 2 7

Hi there,

in my collection I added '?variant=*here-comes-the-variant-id*' to the link url (like it' done here). On my product page I try to access this url parameter via variant.selected (or product.selected) (or even product.selected_or_first_available_variant).

{% assign current_variant = variant.selected %}

But I can't get the variant and I have no clue why.

Can someone please advise me what to do ... thanks

Accepted Solutions (2)

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

Out of the 3 options you've mentioned, only the last one, product.selected_or_first_available_variant references proper variable and property. This should be right: 

{% assign current = product.selected_or_first_available_variant %}

 

View solution in original post

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

Replies 16 (16)

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

Out of the 3 options you've mentioned, only the last one, product.selected_or_first_available_variant references proper variable and property. This should be right: 

{% assign current = product.selected_or_first_available_variant %}

 

kuldeep
New Member
7 0 0

Hi Tim 

 

{%- assign current_variant = product.selected_or_first_available_variant -%}
 
 
{% if current_variant.id == 123 %}
<a href=""><img src="{{ 'sample.png' | asset_url }}" alt="sample" class="product-form " id="new-button"></a>
{% endif %}
 
I am not getting this new id on variant change on product page . Always default variant id is coming . I am writing this code in product template . need a anchor tag based on selected variant .
 
your help will be appreciated .
 
Thank you 
kuldeep
New Member
7 0 0

Hi All 

 

I found that i can get variant sku by {{ variant.sku }} and if i am adding this in anchor tag , it's working .

but below code is not working . I will be very grateful if someone can help 

 

{% if variant.sku == 'H0-S3TC-64ZA' %}
do something
{% endif %}

 

Many Thanks 

attotasolutions
Shopify Partner
30 0 20

Hi,

You can get the current product's variant ID using below.

{{ product.selected_variant.id }}

You might actually want to use product.selected_or_first_available_variant.id - as I understand it, selected_variant is null if there's no variant in the URL of the page you are on.

QnavWhat
Excursionist
45 2 7

With product.selected_or_first_available_variant it is working now - I have no clue why I seemed not to work before. Still I'm confussed why product.selected and variant.selected do not give me any values. I will ignore these as I get my data with your advised method. Thanks a lot

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

'Cause product object has no .selected property, and for variant  it has different meaning

https://help.shopify.com/themes/liquid/objects/product

https://help.shopify.com/themes/liquid/objects/variant#variant-selected

Akshay_V
Shopify Partner
438 16 58


@tim Is there any way to get selected variant title like cart page on the product page after selecting from the swatch.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal

QnavWhat
Excursionist
45 2 7

Thanks for your help

Product
Tourist
5 0 4

How can I get that value at runtime? I mean, how can I get with JavaScript the selected variation object when the select elements change.

FurnaceX
Shopify Partner
49 2 48

@ProductDid you figure this out?

"How can I get that value at runtime? I mean, how can I get with JavaScript the selected variation object when the select elements change."

HDK
Shopify Partner
11 0 3

Having the same problem here, especially with the features of OS 2.0. Can't add a text-block with the wanted metadata to the products template since the meta-data is assigned to the variants, not the products. Can however add a custom-liquid-block

{{ product.selected_or_first_available_variant.metafields.XXX['YYY']}}

but this doesn't change when another varient is selected. Is there a way to react to variant-selection without messing with the actual templates code / js - files?

sagar_at_avyya
Shopify Partner
31 1 16

Any solutions to this?

 


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

HDK
Shopify Partner
11 0 3

Things get even worse. We are using the empire-theme by pixelunion and want to upgrade to a halfway decent version. We managed to write some custom javascript-code and attach a "change"-event-listener to the hidden selectbox, that is changed when a variant is selected. For some reason this doesn't work propperly in empire 7.0.0. The strange thing is, that when we inspect the document, change the visibility of the selectbox from "hidden" to "block" an change the selected value manually, the event is triggered.

 

<script>
window.onload = function() {
f=document.querySelector(".variant-selection__variants[name='id']");
f.addEventListener('change',function() {... } );
}
</script>

 

sagar_at_avyya
Shopify Partner
31 1 16

Any updates?


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

Badrnyali
Visitor
2 0 1

I'm also stuck here. product.selected_or_first_available_variant is working when the page load and shows the first variant, still when changing through variants, it's not working it stays in the first variant, and also selected_variant is not working !!!

VeintePesos
Shopify Partner
1 0 0

Did you solve this? 

There should be a way, since shopify updates some info when variant picker is clicked (changes to variant image, inventory status, pick-up availability, etc.)

Please share any news