Minimal theme - Slideshow image cropping on desktop (fine on mobile)

[deepred]

As the title says, I am using the Minimal theme. On mobile, the slide show image is displaying perfectly (image is set at 2160 pixels wide x 2700 pixels high) so its a vertical oriented image. On desktop, its cropping it at about half the height.

Any ideas? I have the setting "Adapt to first slide" selected and this is still occurring. If I zoom backwards in my browser window on desktop enough it will display fully, so it seems like the image needs to be set to display at full size regardless of screen size. It seems like its trying to contain the image within a frame based on the monitor size you are using.

Thanks!

[Andrew]

Hi @deepred,

Great question! And you're absolutely right that "it's trying to contain the image within a frame based on the monitor size you are using" because Shopify's free themes are responsive. This means that they adapt to whatever device the website is being viewed on, in order to improve the user experience.

So as the store owner you will need to anticipate this and upload your images accordingly. If your images are too wide and viewed on a tall screen, you might get this sort of cropping:

Likewise, if your images are too tall on a widescreen, you might get this effect:

That's why we have some best practices for uploading images to follow to mitigate this.

I elaborated on this a little more in another community forum post. It's a common question and it's great that you asked it! You'll find in that post that I also link plenty of suggestions and resources on user experience design, which you may find useful.

How are you finding the process of customizing your theme? Have you any other questions? I'd like to just point you in the direction of our fantastic free courses and tutorials on designing your store in our Academy. I love them because I can follow along with them while working on my store.

I look forward to hearing from you! -Hyde

[deepred]

Hi Hyde

Thanks for the reply. I noticed another site using minimal who was able to do what I’m speaking of. They have these huge vertical photos and they display correctly both on mobile and on desktop, and the area where the images are can actually expand and collapse when the slideshow moves to a more horizontal image so that must be custom code that they added I take it?

I was trying debut theme and it does the same, wish there was an option to force full size regardless of screen size.

[Andrew]

While I cannot speak to other stores, I can advise that for the best results you will want to follow the documentation for the Minimal Theme. I'd also suggest that you look into our Online Store 2.0 themes which offer even better customization options! I hope this information helps! -Hyde