Hey im ysi g horizon theme and when ever i add image in slideshow. It always show cropped image no matter i select it on auto. Small, medium or large. I want it to adopt to my image height and width
Hey @umerreader
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Could you share your store URL?
Here it is right now it is on medium height
Here it is
Hello @umerreader
The image you want to display is in a portrait format, while the Horizon theme’s slideshow is designed for wide banner images. That’s why it gets cropped.
Your full image :
To display the full image, you will need to use a landscape image or customize the theme code to support portrait images.
Please let us know if you need any further assistance.
The issue is caused by the image’s aspect ratio. Your current image is 9:16, but it should be 16:9.
Please upload an image with a 16:9 aspect ratio, and the issue should be resolved.
Isnt there any way adding the image with desired landscape ratio because it will have a hreat inpact on the looks of my store.
Also i tried to edit the the from object-fit cover to contain but it just ended up croppi g the image in a differnt way
Isnt there any way adding the image with desired landscape ratio because it will have a hreat inpact on the looks of my store.
Also i tried to edit the the from object-fit cover to contain but it just ended up croppi g the image in a differnt way.
(post deleted by author)
You can add the image in the desired landscape ratio in a kind of work around… more or less. Take the background colour, looks like you have white there, add your image with white borders, so it fits the desired ratio of the horizon theme.
A bit like this:
I would recommend working on the graphic a bit to make it a bit more appealing.
Thanks everyone who tried to help me out.
what’s happening is the slideshow section forces every image into a fixed ratio (that’s what auto/small/medium/large actually control), so any image that isn’t already that exact shape gets cropped. it’s not a bug, just how the section is built.
the actual fix: go to Online Store > Themes > Edit code, open assets/component-slideshow.css (or search the theme’s CSS files for “slideshow”), find the rule targeting the slide image, e.g. .slideshow__media img { object-fit: cover; } and change cover to contain. Save. That stops the crop, but images that don’t match the section’s ratio will show empty space on the sides instead — that’s the tradeoff with this route.
if neither works for you, apps like Focal Point let you set the crop point per image without touching theme code, which is the easier route if you’ve got a lot of images.