Help: code to select variants by clicking thumbnails AND dropdown/button menu - Label Theme v3.6

[AdaptiveTextile]

Hello All,

I’m running into a bit of a dilemma. When I use the drop-down or button menu (depending on theme editor) to select variants, the images, pricing, name, etc. change just fine. However, when a different thumbnail is selected, the image changes, but the variant does NOT.

This could cause confusion and/or incorrectly purchased items by customers seeing one large color image, but in actuality, another item going to the cart. From what I have been reading, this is a common issue with some themes. I have gone through dozens of similar discussion threads to try solutions and also the Shopify Help Center code which was only for vintage themes. The creator of the Label theme said that feature is not available and couldn’t help to remedy the issue.

A product with variant from my website: https://klimakastudios.com/collections/wallpaper/products/test-product

Can someone please help? Thank you!

[ThePrimeWeb]

Hey @AdaptiveTextile ,

It’s a relatively big project to implement the feature you mentioned above. It’s very error prone and I do not recommend you to do that as well.

I have two solutions I can recommend as a quick fix (which you can also reverse if you think it’s not suitable for your store someday)

1. Disable all clicks on the images and only allow the thumbnail to change when the variant is selected from the dropdown

It looks like the store now, but the clicks on the image is disabled.

2.Only show the main image, hide the thumbnails. Then allow the dropdown to change the images.

Here are the instructions. Choose option 1 or option 2 depending on what you prefer, they are written to only work if the product has variant options. Obviously you can’t paste both codes at the same time.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Option 1:

Option 2:

Screenshot is for reference only, the correct code to paste is the one shown above.

[AdaptiveTextile]

@ThePrimeWeb Thanks so much for taking the time! I’ll have to decide which option to go with, but both are very helpful!

[AdaptiveTextile]

I eventually figured out an alternative solution and added the variant images to the variant selector buttons. I was having little luck making the thumbnails near the main image work to choose variants. Decided to post an update on here since it can sometimes be hard to find answers on this forum, and hopefully it can help someone else.

• I moved the thumbnails to the left of the main image and used code to HIDE the images not associated with a variant. The corresponding variant images and names were then coded into the variant selector buttons.

There may be a better/cleaner way to write the code, however it works perfectly for me. The code associated with the variant selector is posted at the very bottom of this post.

Here a before and after shot of my product page:

BEFORE:

AFTER:

Code in the Snippets > product-template:

{%- when ‘variant_picker’ -%}
{%- liquid
assign option_style = block.settings.option_style
if block.settings.hide_option_labels
assign label_class = ‘visually-hidden’
else
assign label_class = ‘block font-secondary text-scheme-meta text-sm’
endif
-%}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% liquid
if settings.enable_color_swatches
assign is_color = false
assign swatch_trigger = ‘products.product.color_swatch_trigger’ | t | downcase
assign option_downcase = option.name | downcase
if option_downcase contains swatch_trigger
assign is_color = true
elsif swatch_trigger == ‘color’ and option_downcase contains ‘colour’
assign is_color = true
endif
endif
%}
{% assign option_array_index = forloop.index0 %}

{%- unless is_color or option_style == 'buttons' -%} {{ option.name }}: {% for value in option.values %} {{ value }} {% endfor %} {%- else -%} {{ option.name }}{% if is_color %}: {% endif %}

{% for value in option.values %} {%- liquid assign variant_label_state = true if product.options.size == 1 unless product.variants[forloop.index0].available assign variant_label_state = false endunless endif -%} {% assign selected_variant = null %} {% for variant in product.variants %} {% if variant.title contains value and variant.image %} {% assign selected_variant = variant %} {% break %} {% endif %} {% endfor %}

{%- if is_color %} {%- unless variant_label_state -%} {%- endunless -%} {%- endif -%} {{ value }}

{% endfor %}

{%- endunless -%} {% endfor %} {% endunless %}

[MuseumGuy]

Thanks for sharing your solution to this situation, as it is also a problem for my website. Your custom solutions is what I had in mind, so now I have a direction to approach this from.