hi, does anyone know how to make this image’s lower part to be visible instead of the top part? I don’t see any options to do it…
pw: mastew
Topic summary
Request to adjust homepage image positioning in the Shopify Rebel theme so the lower part of the image is visible instead of the top. The poster cannot find any theme option to change this behavior.
- Evidence: An attached screenshot highlights the current top-cropped view of the image, making the visual issue central to understanding the request.
- Access provided: Store preview URL and password were shared to allow others to inspect the setup and reproduce the issue.
- Ask: Guidance on a setting or customization to control image alignment/cropping so the bottom portion is displayed.
Status and outcomes: No solutions or follow-ups yet; the thread remains open and unresolved. Category: Store Design; Tag: customizations.
1 Like
Try setting a Focal point at the bottom part of the image
https://help.shopify.com/en/manual/online-store/images/theme-images#setting-a-focal-point-on-an-image
2 Likes
Hi, thanks for this additional information! Although this time, it doesn’t seem to work. I tried to set a focal point but still doesn’t show the part of the image i want to be visible in the homepage.
Please take a screenshot of your hero settings in theme customization.
hey @Wellanie Welcome to Shopify Community so you have to resize your image like your hero section container size is 2400 / 1000 for desktop size
and 750 / 1100 for mobile size make your image resize with this size and then check it
1 Like
Welcome to Shopify Community, you should be resize your image like 2400*1000. Try this one , I will hope this is helpful for you.
The system uses those parameters, but they do not work because the wrapper is grid.
Try adding this to the “Custom CSS” of this section:
.hero__media-wrapper {
display: block;
}
.hero img {
height: 100%;
object-fit: cover;
}
When you add this, focal point starts to work.
Maybe some settings affect this, not sure yet.
Before/After:
