Hero Image Debut Theme Size

Charlotte7
Excursionist
22 0 6

Hi ! 

I have a problem with the size of my hero image on desktop. 

On desktop my image it's cut and too much zoomed how can I fix that ? 

What size of picture should I put in the hero image to have a perfect image not cutting ? 

https://kokalaboutique.com/

Regards 

Replies 2 (2)
dmwwebartisan
Shopify Partner
9825 2237 3078

@Charlotte7 

Taking the Debut theme as an example, there are four factors that affect how your slideshow images appear using the theme. These are:

  • Image size
  • Image position settings
  • Slide height settings
  • Width-to-height ratio (or aspect ratio)

For image sizes, Debut recommends the following:

Slide height settingRecommended widthRecommended height
Adapt to first image1200 px600 px
Small1200 px475 px
Medium1200 px489 px
Large1200 px775 px

You can see that the best slideshow image sizes depend heavily on your theme settings.

https://webpop.io/shopify/image-sizes/

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Don
Shopify Staff
1598 107 216

Hi there @Charlotte7!

 

Slideshows like this are coded in such a way that you would need to select an image that will work well on multiple screen sizes, to account for image cropping.

 

You can see how to work within the image requirements of slideshow image sizes here on our blog site.

 

There's more info on the best practices for these and other images in your store here on our help site.

 

Check out that info, try out your slideshow images on a few different screen sizes and devices, and think about how you can best work with the requirements of the image slideshow.

 

It looks like you're selling women's fashion, is this a new business or an existing venture you're looking to expand?

Don | 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