Solved

on select varient change with image

Kumar2573
Shopify Partner
171 8 21
          <script
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
          <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              var title=variant.title;
              var imgpath=$('#variant-select option[data-title="'+title+'"]').attr("data-img");
                 $(".c-product-image-slider img").attr('src',imgpath);
    console.log(imgpath);
              // This is where you would put any code that you want to run when the variant changes.
            }
 
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
          </script>
          {% endif %}
          
          <!---- End variants slectionchangejs ----> 
Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Accepted Solutions (3)

Kumar2573
Shopify Partner
171 8 21

This is an accepted solution.

<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-title="{{ variant.title }}" data-img="{{variant.image|img_url:"master"}}"value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

View solution in original post

Kumar2573
Shopify Partner
171 8 21

This is an accepted solution.

         <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              
              var title=variant.title;
              var imgpath=$('#variant-select option[data-title="'+title+'"]').attr("data-img");
             
              if(imgpath != null){
                 $(".c-product-image-slider img").attr('src',imgpath);
              }
              var variant_price = $('#variant-select option[data-title="'+title+'"]').attr("data-prices")
    console.log(variant_price); 
                $("#price_id").text(variant_price)
              // This is where you would put any code that you want to run when the variant changes.
            }
 
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
            
 
          </script>
          {% endif %}
          
          <!---- End variants slectionchangejs ---->  
Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

View solution in original post

Kumar2573
Shopify Partner
171 8 21

This is an accepted solution.

add js for variant selection

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

View solution in original post

Replies 7 (7)

Kumar2573
Shopify Partner
171 8 21

This is an accepted solution.

<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-title="{{ variant.title }}" data-img="{{variant.image|img_url:"master"}}"value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Kumar2573
Shopify Partner
171 8 21

<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-prices="{{variant.price | money }}" data-title="{{ variant.title }}" {%if variant.image != blank %}data-img="{{variant.image|img_url:"master"}}"{% endif%} value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

Kumar2573
Shopify Partner
171 8 21

This is an accepted solution.

         <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              
              var title=variant.title;
              var imgpath=$('#variant-select option[data-title="'+title+'"]').attr("data-img");
             
              if(imgpath != null){
                 $(".c-product-image-slider img").attr('src',imgpath);
              }
              var variant_price = $('#variant-select option[data-title="'+title+'"]').attr("data-prices")
    console.log(variant_price); 
                $("#price_id").text(variant_price)
              // This is where you would put any code that you want to run when the variant changes.
            }
 
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
            
 
          </script>
          {% endif %}
          
          <!---- End variants slectionchangejs ---->  
Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

Kumar2573
Shopify Partner
171 8 21

This is an accepted solution.

add js for variant selection

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Kumar2573
Shopify Partner
171 8 21
 <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              var title=variant.title;
              //variants quantity check
              var vqty = $('#variant-select option[data-title="'+title+'"]').attr("data-qty");
               console.log(vqty);
              if(vqty > 0){
              $(".btn").attr("disabled", false);
                $(".btn").text("Add to cart");
              
              }
                else{
                 $(".btn").attr("disabled", true);
                 $(".btn").text("Sold Out")
                }
             
         
              
             // end variants qty
              var imgpath=$('#variant-select option[data-title="'+title+'"]').attr("data-img");
             
              if(imgpath != null){
                 $(".c-product-image-slider img").attr('src',imgpath);
              }
              var variant_price = $('#variant-select option[data-title="'+title+'"]').attr("data-prices")
    //console.log(variant_price); 
               $("#price_id").text(variant_price)
              // This is where you would put any code that you want to run when the variant changes.
            }
 
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
            
            if (variant) {
  if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
      jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
    } else {
      jQuery('#variant-inventory').text("This product is sold out");
    }
  } else {
    jQuery('#variant-inventory').text("This product is available");
  }
} else {
    jQuery('#variant-inventory').text("");
}
 
          </script>
          {% endif %}
          
Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

Rose_Buddha
Visitor
1 0 0

Hi, where do you have to past that in order to change the image, when changing the (color) variant?

made4Uo
Shopify Partner
3804 713 1126

Hi, 

 

This code would not work if you have a slider or carousel. Anyways. I was able to obtain this with no APP or external library. 

If you have Dawn theme or Any Shopify 2.0 FREE themes, this should work. No APPs or EXTERNAL library needed. The code is made to call and listens all the variant options related images. You can have multiple variants options. Works with the Dawn product settings too, that includes thumbnail carousel and even the media size settings.

See video for more information.

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!