-
-
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 %} |
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 :-)
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!
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!