Hi -
Right now the desktop images in my hero banner (slideshow) are showing up at a great frame size. The problem is the resolution of the first image is very soft/grainy because of the resolution I need to export the image at to get the banner size to stay at that height/width. I know I can use fixed height which gets it pretty close but when doing so it applies to mobile which I don’t want to happen.
Is there a way to fix the height of the slideshow display to maintain this frame size without using the fixed height option? If there is any way to do that as well as force the image at a larger resolution to conform to the frame (similar to the second image in the slideshow) that would be great. I think I may be able to figure it out with focal point once the frame is set, but would love to see if there are any other options to maintain what I’m seeing now while being able to use a bigger image. Currently using the adapt to first image option in my theme.
Website is https://par6golfco.com
@par6golfco
In the Symmetry theme unfortunately there is no easy way to get around that, it would require an re-coding the entire Slideshow section, an overhaul.
There are two potential solutions though.
-
You can try limiting the Slideshow’s width like this:
-
In your Shopify Admin go to online store > themes > actions > edit code
-
In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
-
paste this code right above the tag:
You can set the 1000px to any size you wish.
Or alternatively, this Slideshow code snippet covers the exact issue you’re dealing with, you can upload the high quality images at and it will automatically do the math to ensure they are uncut (in other words, no worrying about focal point) and in the best quality available for whatever device is loaded, so, once the image is loaded, no blurriness.
You can also upload different images for mobile and desktop as well, this way you can ensure the best experience on all devices.
I hope it helps.
Kind regards,
Diego
