Why has selecting variants by clicking product images in Shopify (Debut theme) stopped working?

You can try this code: replace productJson.forEach in if (productJson.length > 0){ in function _selectVariant:

productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const thumbnails1 = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');
        const thumbnails2 = document.querySelectorAll('#'+ sectionId + ' img[src*="/files/"]');
        if (thumbnails1.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails1.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }else if (thumbnails2.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails2.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }
      });

 

Note: Make sure the number of brackets {} is still complete.

I also found that uploading variant images directly onto the variant instead of using the main uploader and assigning it to the variant, it would work with the old code template. But using this code I did not have to go back and update all the old ‘broken’ variants and things seem to work with my old workflow.