Adding Variant Option (Color) to Product Titles

Highlighted
New Member
1 0 0

I am trying to add a variant option (variant.option2) to my product titles collection listing pages in product.block.liquid.

How can I do it, and is it even possible?

I have added the following, but variant information does not show up:

<a class="title ftc" href="{{ url }}">{{ product.title }} - {% if product.variants %} {{ variant.option2 }} {% endif %}</a>

0 Likes
Highlighted
Shopify Expert
2684 67 844

Generally, a product may have several variants. Do you want color for all of these variants printed out? Or any particlar variant? Or your products have only one choice of color?

That said, this should show a value of the second option of the first available variant:

<a class="title ftc" href="{{ url }}">{{ product.title }} - {% if product.variants %} {{ product.first_available_variant.option2 }} {% endif %}</a>

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
30 0 1

Is there a way to remove the " - " if there is no product variant for that particular product?

0 Likes
Highlighted
Shopify Expert
2684 67 844

Just move that dash to be after {% if product.variants %}

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
Highlighted
Tourist
30 0 1

Tim for the win

0 Likes
Highlighted
Tourist
30 0 1

Hm I thought that would work too but I guess it's still pulling in the - for some reason

0 Likes
Highlighted
Tourist
30 0 1

Also, how can I make this change dynamically as they switch to other colors?

0 Likes
Highlighted
Shopify Expert
2684 67 844

If you want to show the current variant's color along with the product title, you should use this approach (if Color is your second option): 

{{ product.title }} {% if product.selected_variant %}- <scope id="current_color">{{ product.selected_variant.option2 }}</scope> {% endif %}

To update it dynamically, you have to add this line to your selectCallback (selectCallback1 in troy's case) function after if( variant ) {

$('#current_color').text( variant.option2 );

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
Highlighted
Tourist
30 0 1

Thanks TIm!

For some reason, it's not always populating. I saw it work once but its not pulling in right away when I hit the product pages. The code looks right though.

Thanks again

0 Likes
Highlighted
Shopify Expert
2684 67 844

You're right, because initially if you go to the product page (no varian in URL) there will be no selected_variant, liquid will not output the scope and javascript will be unable to update it.

To fix it, we will change liquid to always output the scope, only make it empty if there is no variant_selected:

{{ product.title }}<scope id="current_color">{% if product.selected_variant %} - {{ product.selected_variant.option2 }} {% endif %}</scope>

And javascript:  

$('#current_color').text( ' - ' + variant.option2 );

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.