Clicking an image to change variant

[Mikey7]

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

[Angel95]

Hello 

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

[Mikey7]

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. 

[NomtechSolution]

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:

<script>
  function selectVariant(event) {
    event.preventDefault();
    var variantId = event.target.dataset.variantId;
    if (variantId) {
      document.querySelector('.single-option-selector').value = variantId;
      document.querySelector('.single-option-selector').dispatchEvent(new Event('change', { bubbles: true }));
    }
  }
</script>
​

[Mikey7]

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

[herbovedam]

@NomtechSolution 

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

in refresh theme

https://ibaadatbyjasmine.com/

[NomtechSolution]

I need to check theme files to give you exact solution

[herbovedam]

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/