Help Editing Variant Image Code In Minimal Theme After Shopify Changed img url format.

Store Design

Topic summary

A Shopify store owner using the Minimal theme for 7+ years is experiencing issues with custom variant image filtering code after Shopify changed image URLs from /products/ to /files/.

The Problem:

  • Legacy code successfully hides non-selected variant images when URLs contain /products/
  • New product images using /files/ URLs cause all variant images to remain visible
  • When clicking variants with new URL format, the main zoomable image disappears, leaving only small thumbnails

Attempted Solution:

  • User tried adding var thumbnails = jQuery('img[src*="/files/"]') to account for new URL format
  • This partially works: hides other variant images correctly, but removes the main product image on variant selection

Current Status:

  • Code functions properly only when all images use the old /products/ format
  • Mixed or fully /files/ format breaks the main image display functionality
  • Shopify support has not provided assistance
  • User seeks help modifying the JavaScript/jQuery code to handle both URL formats while preserving main image visibility
Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Minimal theme. I have a code that shows only the images selected of a given variant, the other images are hidden. I’ve been using this code for over 7 years with no issues until Shopify recently changed the image url from /products/ to /files/ now the code doesn’t work on new variants. Wondering if someone can help me adjust the code to account for this. I’m getting no help from support.

The code is as follows. To the best of my knowledge (granted I put it in almost a decade ago) it was only needed on the product liquid I don’t remember putting any code anywhere else.

{% assign option_name = 'Condition' %}
{% if product.options contains option_name %}       
        
<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not('#related-products img')                   /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')            /* Except related products */
  .not('a[href^="/products/"] img')               /* Except mini-cart products */
  .not('header img')                              /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                             /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first');                                 /* Except first one, i.e the main image */

  var optionSelect; 
{% assign option_index = 0 %}  
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}  
  {% endif %}
{% endfor %}
  
{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';   
{% endif %}
  
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 4 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});    
</script>

{% endif %}

That code still works perfectly IF all the images on that product page have the /product/ url format. If all or some have the new /files/ format then ALL the variant images still show.

So I tried adding this to the code:

var thumbnails = jQuery('img[src*="/files/"]') /* All product images */

which accounts for the new “files” url. With this added the above code it functions correctly again by hiding all the other variant images BUT when you click on any variant other the first one the main image which allows you to zoom in disappears and all you’re left with just the small thumbnails. Example

test1.jpg
test1.jpg937×650 61.9 KB

test2.jpg
test2.jpg1000×648 49.5 KB

So there is something else I’m not accounting for which is hiding the main image when any other variants are selected. Any ideas?