Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jonathanmoore/13a5bdb0552e18baded878b7d8fd28f2 to your computer and use it in GitHub Desktop.
Save jonathanmoore/13a5bdb0552e18baded878b7d8fd28f2 to your computer and use it in GitHub Desktop.
Make Image Change javascript (for theme.js file)
$(document).ready(function() {
thumbnails = $('img[src*="/products/"]').not(':first');
if (thumbnails.length) {
thumbnails.bind('click', function() {
var arrImage = $(this).attr('src').split('?')[0].split('.');
var strExtention = arrImage.pop();
var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
if (typeof variantImages[strNewImage] !== 'undefined') {
productOptions.forEach(function (value, i) {
optionValue = variantImages[strNewImage]['option-'+i];
if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text().trim() === optionValue }).length) {
Copy link

jonathanmoore commented Feb 22, 2017

Fixes two errors in the JavaScript for triggering variant changes with images.

  1. On line 9 the original first part of the condition checks to see if the optionValue variable is null. However, optionValue will always return a value or undefined.
    typeof optionValue !== 'undefined'
  2. Most themes, including many official Shopify themes and upcoming tools, include white space / line breaks in the <option>...</option> markup. For this reason the filter in the second part of the condition in line 9 needs to .trim() the value.

Copy link


I have an issue in my shopify theme. The image of variant doesn't change when I choose a variant (like a different color).

Here is my product.liquid :

            <select id="product-select" name="id">
              {% for variant in product.variants %}
              <option value="{{ }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
              {% endfor %}

And I added your code into theme.js too

Can you help me please ?

Copy link

Ok i found a solution after few hours searching :)

Here the code in product file :


<div class="col-sm-6 col-lg-5 product_images">
      {% if product.images.size != 0 %}
          {% if product.images.size > 1 %}
  <div class="product_image">
        <img id="elevatezoom_big" class="fancybox" src="{{ product.featured_image.src | product_img_url: 'grande' }}" data-zoom-image="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.title | escape }}" />

And here the javascript :

` <script>
var selectCallback = function(variant, selector) {

   if (variant && variant.featured_image) {
    var originalImage = $(".product_image img");
    var newImage = variant.featured_image;
    var element = originalImage[0];
    Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
        $(element).parents('a').attr('href', newImageSizedSrc);
        $(element).attr('src', newImageSizedSrc);
</script> `

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment