On my Shopify website, I have a list of collection images that are taken depending on what image is uploaded to the collection. I want to override the images and replace them with icons instead. Below is the code when I inspect the element.
<img class="lazyautosizes lazyloaded" src(unknown) data-aspectratio="1.4998556165174703" data-srcset="//cdn.shopify.com/s/files/1/0667/7446/6774/collections/Image_a8a74781-cf71-4613-891f-531d748b822e_720x.jpg?v=1661077157 720w, //cdn.shopify.com/s/files/1/0667/7446/6774/collections/Image_a8a74781-cf71-4613-891f-531d748b822e_900x.jpg?v=1661077157 900w, //cdn.shopify.com/s/files/1/0667/7446/6774/collections/Image_a8a74781-cf71-4613-891f-531d748b822e_1080x.jpg?v=1661077157 1080w" sizes="116px" srcset="SAME LINK AS THAT OF DATA SRCSET"
What I tried in CSS
.lazyautosizes.lazyloaded alt[value= Cell Phones, Smart Watches & Accessories] {background-image: url("https://cdn.shopify.com/s/files/1/0667/7446/6774/files/iphone.png?v=1662374833") !important;
}
Result: Failed to work. The srcset is where the link should be replaced.
UPDATE: I added the following code to my theme.liquid file
<script>
<img class="lazyautosizes lazyloaded" src(unknown) data-aspectratio="1.4998556165174703" data-widths="[720, 900, 1080]" data-sizes="auto"
alt="Cell Phones, Smart Watches & Accessories" data-srcset="//cdn.shopify.com/s/files/1/0667/7446/6774/collections/Image_a8a74781-cf71-4613-891f-531d748b822e_720x.jpg?v=1661077157 720w, //cdn.shopify.com/s/files/1/0667/7446/6774/collections/Image_a8a74781-cf71-4613-891f-531d748b822e_900x.jpg?v=1661077157 900w, //cdn.shopify.com/s/files/1/0667/7446/6774/collections/Image_a8a74781-cf71-4613-891f-531d748b822e_1080x.jpg?v=1661077157 1080w"
sizes="116px" srcset="https://cdn.shopify.com/s/files/1/0667/7446/6774/files/smartphone.png?v=1662378908">
</script>
Still not working. What am I missing?
