-
-
Save drabbytux/0f7e6c4dca81f42db1efd195628b898e to your computer and use it in GitHub Desktop.
{% 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 %} |
I have used "supply" theme. I tried this code but it was not working :(
Please let me know what is the issue...
Thanks!
this is not working for minimal theme ...
its slecting from drop down but when i press add to cart, default one get added instead of selected image. please help
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.
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.
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.
$('body').on('click','selected_element', function(){
// your code
});
Select image using this way in a Popup.
Hi there, Can someone please help me add this feature on Shopify Masonry theme. Thanks
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!
I have the same problem - has there been an answer given for this? Also, I'm using Venture theme, not Debut
Hi, I was wondering if this could be used in the same way if adding to a Lightspeed eComm theme or if any adjustment need to be made. Thanks!
Hello! I have the Flex theme (by Out of The Sandbox) in the Shopify store and use Scrolling as the product page template.
When I click on a product variant on the product page, SKU changes but the picture of the product remains the same (each variant has a different photo assigned).
Do you think this code will be suitable for solving this problem?
Thank you for any advice!
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 :-)