Adding new variant images is saving to different url now

Topic summary

A store owner is experiencing issues with variant image selection after adding new products. The problem stems from a URL path change in how Shopify stores product images.

The Issue:

  • Old products: Images use /product/ path in their URLs
  • New products: Images use /files/ path in their URLs
  • Existing code (based on Shopify’s variant selection tutorial) only targets images with /products/ in the src attribute

Current Behavior:

  • Using old code: Variant selectors work only for old images, not new ones
  • Using updated code targeting /files/: Works only for new images, not old ones

Technical Details:
The code in question uses: const thumbnails = document.querySelectorAll('#' + sectionId + ' img[src*="/products/"]');

The discussion remains open with the user seeking guidance on how to make the variant selector work for both old and new image URL formats simultaneously.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.

So recently we were adding more items to our store and noticed our image selector was no longer changing the variant selector when clicking NEW items that were recently added vs old items still changed it. I had originally added the code that was on the forums to make it work (I dont remember where I found it but it was similar to this).

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/select-variants-click

The issue I found is if you go to the part that says:

const thumbnails = document.querySelectorAll(‘#’+ sectionId + ’ img[src*=“/files/”]');

The old post use to be “img[src*=/products/”]'); " rather than from files. So when we look at new images the url address contains /file/ path rather than the old product images containing /product/ path.

So now if we use old code the selectors only work and change for old images, and if we use new code it only changes for new item images and not old..

How do we fix this?