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

Store Design
, , , ,
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”.

medicusserpens_0-1733496230520.jpeg
medicusserpens_0-1733496230520.jpeg399×257 16.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

Hi @medicus-serpens ,

This will require experience in Liquid code and Javascript.

If you want, I can send you a collaborator invitation and check it out.

Please let me know.

3

Ok thanks for the reply.
Could you outline your ideas and the amount of approx. work a bit? e.g. how many files would have to be edited?
I am currently undecided, whether or not the result is worth the work.
And maybe, in terms of UX/UE, is it necessary?
Thanks!

4

Hi @medicus-serpens ,

Issue #1: First, you will need to add the media ID for the product-thumbnail.liquid file. Then, change the JS code of both media-gallery.js file and product-info.js file.

Issue #2: You will need to change the code in the product-info.js and global.js files, as well as change the structure of the product-variant-options.liquid file for it to work.

Both are complex requests and take a long time to change.

Hope it is clear to you

5

Alrighty, thanks again 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.
Cheers!

6

Hi @medicus-serpens ,

You’re welcome and see you soon :blush: