Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
make image change variant sections
{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
var variantImages = {},
thumbnails,
variant,
variantImage,
optionValue,
productOptions = [];
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}
{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}
if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
}
productOptions.push(variant);
{% endfor %}
</script>
{% endif %}
@jejelfass

This comment has been minimized.

Copy link

commented Mar 28, 2017

Hi

I use the debut theme and input your code. thank you, but i have one issue: in the drop down menu, the "Pick a Color" became "Pick a undefined" after i added your code. Do you know why?

thanks!

@csenterprises1

This comment has been minimized.

Copy link

commented Jun 11, 2017

It works great the only thing is that it selects the lowest priced one when advertising it on the actual home page. Is there a correction for this?

Thanks :-)

@Shyamala-123

This comment has been minimized.

Copy link

commented Nov 16, 2017

I have used "supply" theme. I tried this code but it was not working :(

Please let me know what is the issue...

Thanks!

@JenGL

This comment has been minimized.

Copy link

commented Nov 17, 2017

this is not working for minimal theme ...

@akashvsj

This comment has been minimized.

Copy link

commented Jul 6, 2018

its slecting from drop down but when i press add to cart, default one get added instead of selected image. please help

@brianhernandez

This comment has been minimized.

Copy link

commented Oct 20, 2018

this is not working for minimal theme ...

@JenGL I was working on a Minimal theme and I was having issues with this too. It turned out that the theme.js file wasn't being linked to in the theme.liquid file. To solve this, I just needed to add {{ 'theme.js' | asset_url | script_tag }} in the theme.liquid file just before the </body> tag that is found towards the end of the theme.liquid file. I ended up using this code in the theme.js file as it was the most current comment at the time I was solving this issue.

@teexpression

This comment has been minimized.

Copy link

commented Jul 2, 2019

Hi, This works perfectly for the product page. But in my quick view (quick shop) pop up, this doesn't work. I would appreciate a ton if someone genius can solve the issue. Please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.