-
-
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 %} |
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, 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.