Image Cropping on Slideshows and other Hero Images

Highlighted
Shopify Staff
Shopify Staff
1298 128 335

The height of your slideshow automatically adjusts to fill the screen of the device being used to browse your store. This is based on the screen size of the device. As a result, some of the images/videos can often be partially cropped out. This is expected behavior for any website that uses a Hero image and is not unique to only Shopify.

Most Shopify themes use hero images and hero slideshows and so they would be subject to this automatic cropping. There are two main points to consider when uploading full-width-images as it is not something that can be adjusted or fixed without replacing the entire slideshow.

These two points are:

  1. Don't use images that have text in them; images with text often have their text clipped on smaller screens such as phones and tablets.
  2. The main focal point of the slide should be in the center of the image so that the most important part is shown on all screens and does not get partially cropped out.

Newer themes have an additional setting called “Slide Height” or “Section Height”. With this new setting, you can select “Adapt to first image”. The "adapt to first image" feature adapts the slideshow height to the first slide, this should prevent cropping. 

Screenshots:
Desktop view
20-09-m4nz9-rtdzr

Mobile view when height is "Full screen"

20-09-l77j0-qbdt5

Mobile view when height is "Adapt to first image"
20-09-gdemj-iusue

For more information regarding this, please check out our help guide on best practices when uploading full-width-images here. We also have this fantastic blog post which details how to combat image cropping here. You can of course use one of our other free themes or third party themes that do not use hero images if you would rather not use full-width images on your store. Free themes that do not feature hero images include Simple, Supply, and Minimal. These can all be found in our theme store. You can also use an app for a custom slider to add a slideshow or banner that is not full width to your store.

 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
439 44 65

Thanks for the tutorial! I see Shopify is coming up with solutions to common problems.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
1 Like