Clicking an image to change variant

Shopify Discussion
1

Hoping someone can help me.

I have the debut theme and all I am trying to do is make it so that when a customer clicks the image the variant automatically changes to the correct item. I have three other stores that had the same issue and all of them were fixed by Shopify support. However, this time around I have hit a complete brick wall. I have been told that its no longer supported I now need to pay if I want it fixed.

I have tried to paste in the code that they gave me but it still will not work with my theme. If I launch my site how it currently is then customers will just be ordering the wrong items based on the image they clicked.

Your help would really be appreciated.

Many thanks

2

Hello

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/select-variants-click please follow this tutorial. Let me know if you still face any issues.

3

Hi thank you for getting back to me.

This is actually the link that Shopify support gave. I have copied this at the bottom of my theme.js and hit save but it does not fix the issue on the website unfortunately.

4
  1. In the left-hand sidebar, locate and click on the “product-template.liquid” file under the “Sections” folder.
  2. Look for the code that renders the product images. It might be within a <div> element with a class like product-single__media-wrapper or product-single__photo.
  3. Find the code that creates the clickable image, which is likely an <a> tag or a <div> container. Add the following code inside that element:
onclick="selectVariant(event)"
data-variant-id="{{ variant.id }}"
​
  1. Save the changes to the file.
  2. Still in the “Sections” folder, locate and click on the “product-form.liquid” file.
  3. Inside this file, find the JavaScript section (typically at the bottom) and add the following code:

​
5

Thank you for your detailed response but unfortunately, I cannot find product-single__media-wrapper or product-single__photo.

6

@NomtechSolution

can you tell me where i can locate product-single__media-wrapper or product-single__photo

in refresh theme

https://ibaadatbyjasmine.com/

7

I need to check theme files to give you exact solution

8

can you tell me where i can locate product-single__media-wrapper or product-single__photo

in minimog theme---- it is minimog theme not refresh, I mistakenly wrote refresh.

whenever you check please check for minimog

https://ibaadatbyjasmine.com/