Homepage Slider Images Too large

Highlighted
New Member
2 0 0

The images on my homepage slider are a bit large, I prefer they be smaller. Can anybody help me with this issue?

Thanks,

Hmm!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1380 134 373

Hey there, @hmm 

 

Bo here from Shopify Support! 

 

It sounds like you are using a theme that uses Hero Images in the slider. 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:

 

Mobile view when height is "Full screen"

Mobile view when height is "Adapt to first image"

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.

 

When looking for assistance with the design of your store it is important to give as much context and information as possible. Information such as a descriptive subject title, a link to your store, the name of the theme you're using are essential for proper help. Please read our Help Us Help You guide so you can get better at getting assistance from the community. 

 

All the Best,

Bo

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