Hi all. Im hoping one of the experts can help me. I want to change my homepage hero video to the basic shopify slideshow. The problem is that no matter what size image i use it always zooms in and cuts off the image.
I want the image setting on large because it looks nice without having to scroll down to see the rest of the image. I dont want “adapt to first image,small or medium”.
Its driving me mad. Ive tried all sorts of size images. Ive added some screenshots of the problem.
Mobile is absolutely fine. its just desktop. In theme editor mode it looks good but when i change to full screen its terrible.
Ive changed it back to the video hero for now until someone can help because it looks better. If you need me to change it to the slideshow so you can see the problem then just let me know, i will be online for the next few hours.
Url is - smoothervibes.com
Dawn theme.
Thank you.
Topic summary
A user is experiencing image cropping issues with Shopify’s Dawn theme slideshow on desktop. While the slideshow appears correctly in the theme editor and on mobile devices, full-screen desktop view crops the images undesirably.
Key Details:
- The “Large” image size setting is preferred to avoid scrolling
- Mobile display works fine; issue is desktop-specific
- Currently using a video hero as a temporary workaround
- Screenshots show the discrepancy between editor mode (good) and full-screen (cropped)
Proposed Solutions:
- Try the “Page” layout option to restrict section width and reduce cropping on wide screens
- Create separate image sliders for desktop and mobile with appropriately sized images for each
- Use CSS to display the correct slider based on screen size
- Design different image dimensions for desktop versus mobile to accommodate varying aspect ratios
Status: The discussion remains open with the user awaiting further guidance or testing of suggested solutions.
Well, if your image proportions do not match the window proportions, there will be some cropping. Or empty space. You can’t do much about it.
Also – there is a “Layout” switch at the top right corner of your first screenshot – have your tried the “Page” layout? It will restrict section width on wide screens to avoid cropping.
If this does not help – what exactly do you want to achieve?
@jteddy can you please activate image slider? desktop images and mobile images dimensions are different and hence you get the issues
you can create 2 sliders, one for desktop and other with mobile images and then show the one you want as per screen size using CSS
Hello,
About your situation, please try to use the different image for desktop and mobile. The image on the mobile should be cropped and redesign to fit the mobile view. This is also improving the performance for the mobile score speed.