Problem: A 500x1500px hero product image displays correctly on the Shopify website but is auto-cropped in the Shop App, which requires square images, resulting in an extreme zoom that makes the product unrecognizable.
Constraint: Making the image smaller to fit the Shop App’s square requirement causes the website image to shrink, disrupting the site’s design and layout.
Request: Seeking a way to resize or set a different image specifically for the Shop App without affecting the website version.
Evidence: Two attached images are central—one shows the Shop App’s zoomed/cropped result; the other shows the normal website display.
Context: Tags indicate this is a customization/troubleshooting issue focused on image aspect ratios between channels.
Status: No solution or guidance provided yet; the question remains open with the key need being per-channel image control for the Shop App only.
Summarized with AI on December 27.
AI used: gpt-5.
Our hero product image on our Shopify site is 500x1500px, which is displaying perfectly on our website. The issue is that on the Shop App that requires a square image, this hero image is cropped/zoomed in so much that you are unable to actually tell what the image is of.
Making the image smaller to work on the Shop App then makes the image on our website smaller and that is throwing our web design off.
Is there a way to resize the image for the Shop App only?
(This shows how the image displays on the Shop App. Super zoomed in.)
hey @SOLE5 so open your shopify admin page and then go to the online store and then in your right hand site go to the edit theme and then open that collection where you are facing the issue and then in your left hand site click the main collection and then in your right hand site you can see a image ratio option click on it and you can see the aspect ratio just click on it the aspect ratio and then your problem is solved
This is a common limitation with the Shop App. The app forces a 1:1 (square) crop on hero/featured images, so tall images like 500×1500 will always look heavily zoomed in.
Unfortunately, you can’t assign a separate image just for the Shop App for the same product image. The best workarounds are:
Upload a separate square version (1:1) of the image as the first product image, optimized for the Shop App, and move your tall hero image to a later position for your website layout.
Design a square “Shop-safe” image that has more padding around the product so nothing important gets cropped.
Use your theme’s settings (if available) to display a different image or aspect ratio on the product page, while keeping the square image first for the app.
In short, the Shop App always prioritizes square images, so managing image order and using a dedicated square version is the most reliable fix.
This helped me to get it sorted. I figured the best way was to just go in and change the code to better display square images on the Shopify site, rather than rectangle. So far everything seems to be working.
Glad to hear you got it sorted! Updating the code to handle square images directly sounds like the cleanest solution. If everything’s displaying correctly now, that’s a win. Cheers!
