The BigCommerce system detects your browser, if your browser is a mobile browser, they will return a low-resolution image, it's a feature to save website data. But the image is returned is not good, it has too low resolution. You have 2 options to solve this problem.
#1. Contact to BigCommerce and ask them to return a higher resolution image for mobile devices.
#2. Add the below Javascript to your Footer Script (Admin panel > Storefront > Footer Script)
<script> (function () { function imbypass(images) { if (images.length) { for (var i in images) { if (typeof images[i] === 'object') { var image = images[i]; var imageLink = image.getAttribute('src'); if (image.hasAttribute('data-lazy')) { imageLink = image.getAttribute('data-lazy'); } if (image.hasAttribute('data-src')) { imageLink = image.getAttribute('data-src'); } var newImageLink = (imageLink.indexOf('?') !== -1) ? imageLink + '&imbypass=on' : imageLink + '?imbypass=on'; if (image.hasAttribute('data-lazy')) { image.setAttribute('data-lazy', newImageLink); } if (image.hasAttribute('data-src')) { image.setAttribute('data-src', newImageLink); } if (imageLink === image.getAttribute('src')) { image.setAttribute('src', newImageLink); } } } } } imbypass(document.querySelectorAll('.heroCarousel-image')); })(); </script>
Papathemes
Comments