Connect thumbnails to respective product variant selection (Taste theme) + 2nd question

Shopify Discussion

Topic summary

Two issues with Shopify product variants in a (German-language) store:

  • Thumbnails should select the corresponding product variant when clicked. Currently, selecting a variant updates the main image, but clicking a thumbnail does not preselect the matching variant. The user expects this to likely need JavaScript adjustments in the theme.

  • When switching between variant groups with differing option availability, the previously selected (now unavailable) option remains selected and appears struck through. Desired behavior: automatically preselect the first available option in that group (example: switching from “Pharmazie” to “Veterinärmedizin”). A screenshot was provided to illustrate the strikethrough state, and a product URL plus store password were shared for context.

Outcome/status: After receiving a quick, detailed response (content not included), the user decided not to implement these changes for now, considering the effort not worthwhile. No changes were adopted, and there is no active solution implemented. The discussion is effectively paused without a finalized resolution.

Summarized with AI on December 12. AI used: gpt-5.
1

Hi there,
I am busy building our webshop and I know my way around code a bit, even if Shopify’s liquid structure is new to me. I am getting the hang of the liquid coding, but I can’t seem to solve the thumbnail issue, so far.

Issue #1
I am trying to make the thumbnail pics connect to the respective product variant selection.
It works when clicking on the product variant (the respective picture loads), but not vice versa.
I would like to click on a specific thumbnail and get the respective product variant selection (pre-selected).
This probably involves coding in e.g. JavaScript, I guess.

Issue #2
There are some variants that have different names. Once you switch variants, I would like the first available variant (of the category) to be pre-selected. Currently say Option A is available in Variant A, but Option A is not available in Variant B. When you click on Variant B, the selection Option A remains selected, even if Option A is then displayed strikethrough (screenshot & specific example in URL => the switch from “Pharmazie” to “Veterinärmedizin”.

Screenshot 2024-12-06 at 15.37.00.jpg
Screenshot 2024-12-06 at 15.37.00.jpg1240×798 80.4 KB

Thanks a bunch!
Any help is much appreciated!

Website info:
Website is still not fully published, so password = medicus.
URL to specific product page: https://medicusserpens.de/products/dienstgrad-schlaufe-sanitatsoffizier-diverse
Website language is German, so don’t be afraid. :wink:

2

Alrighty, thanks for the super fast and indeed sophisticated answer.
I might come back to you one day, but for now I’ve decided against implementing this since I don’t deem the result worth the work.
Cheers!