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

AdaptiveTextile · ‎02-29-2024

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 · ‎02-29-2024

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 "<head>" tag paste the following. Screenshot attached for reference.

Option 1:

<style>
body:has(.product-variant-picker-block) button.block.splide__arrow {
    display: none !important;
}

body:has(.product-variant-picker-block) ul.block.mt-4.flex.flex-wrap.justify-center,
body:has(.product-variant-picker-block) div#productSplide-track {
    pointer-events: none !important;
}
</style>

Option 2:

<style>
body:has(.product-variant-picker-block) button.block.splide__arrow,
body:has(.product-variant-picker-block) ul.block.mt-4.flex.flex-wrap.justify-center {
    display: none !important;
}

body:has(.product-variant-picker-block) div#productSplide-track {
    pointer-events: none !important;
}

</style>

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

AdaptiveTextile · ‎02-29-2024

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

AdaptiveTextile · ‎04-02-2024

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 %}

<fieldset class="product-variant-picker-block js-enabled my-8">
{%- unless is_color or option_style == 'buttons' -%}
<label class="{{ label_class }}" for="Option{{ option.position }}">
{{ option.name }}:
</label>
<select
id="Option{{ option.position }}-{{ section.id }}"
name="options[{{ option.name | escape }}]"
@CHANGE="optionChange()"
class="single-option-selector font-body text-base text-scheme-text"
data-single-option-selector>
{% for value in option.values %}
<option
value="{{ value | escape }}"
data-handle="{{ value | handleize }}"
{% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
{%- else -%}
<legend class="{{ label_class }}">
{{ option.name }}{% if is_color %}: <span x-text="options[{{ forloop.index0 }}]"></span>{% endif %}
</legend>
<div class="-mx-1">
{% 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 %}
<div class="inline-block mx-1 mt-2 relative variant-input">
<input class="custom-input {% if is_color %}color-swatch{% endif %} cursor-pointer absolute top-0 left-0 w-full h-full opacity-0" @CHANGE="optionChange()" type="radio" id="Option{{ option.position }}-{{ value | escape }}" name="options[{{ option.name }}]" value="{{ value | escape }}" data-handle="{{ value | handleize }}" {% if option.selected_value == value %} checked{% endif %} data-single-option-selector>
<label
:class="{ '{% if is_color %}border-scheme-text{% else %}bg-scheme-text text-scheme-text-overlay{% endif %}': optionHandles[{{ option_array_index }}] === '{{ value | handleize }}' }"
class="relative block text-center border-scheme-text {% unless is_color %} p-2 min-w-variant-option{% else %}p-0.5{% endunless %} border-1 min-w-4 border cursor-pointer {% unless variant_label_state %}line-through{% endunless %} cursor-pointer" for="Option{{ option.position }}-{{ value | escape }}"
title="{{ option.value }}"
>
{%- if is_color %}
{%- unless variant_label_state -%}
<span class="absolute top-0 left-0 bottom-0 z-10 h-0.5 w-full bg-scheme-text transform top-1/2 -translate-y-1/2 -rotate-45"></span>
{%- endunless -%}
<span class="block w-10 h-10" style="background-image: url({{ selected_variant.image.src | img_url: '400x' }});"></span>
{%- endif -%}
<span {% if is_color %}class="visually-hidden"{% endif %}>{{ value }}</span>

<img class="block product-single__thumbnail-image" src="{{ selected_variant.image.src | img_url: '160x160' }}" width="75" height="75" alt="{{ selected_variant.title }}" class="variant-thumbnail">
</label>
</div>
{% endfor %}
</div>
{%- endunless -%}
</fieldset>
{% endfor %}
{% endunless %}

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

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

☕Buy me a coffee☕

Community Blog Articles