Trying to crop a user added image whilst respecting the focal point

Technical Q&A
,

Topic summary

Main issue: Cropping a client-uploaded header background image to a fixed letterbox size while keeping the user-defined focal point using Shopify’s img_url filter and inline CSS.

  • Current behavior: Requesting 750x300 without a crop returns 417x300, which looks grainy on screens wider than 417px. Adding crop only allows keywords (left, right, top, bottom, center), not an arbitrary focal point.

  • Constraint: No apparent way to crop around a custom focal point when generating the image via img_url; available crop options do not map to a user-selected focus area.

  • Editor UX note: CMS editors interpret “focal” as the “center,” prompting a desire for a distinct “focal” crop option separate from the current keyword set.

  • Outcome/status: No solution or workaround provided. The thread highlights a limitation/feature gap in Shopify’s image transformation tools and remains unresolved.

Summarized with AI on January 20. AI used: gpt-5.
1

Am I being daft, or is there no way to crop around my focal point? I’ve read a lot of articles and I can’t see how to do this.

Quick summary of my situation. I’m using an image added by my client when customising a page as a header background. I take the input and use inline CSS and the img_url filter to add it as a background.

If the image is a big square, for example, and I need a letterbox I can set img_url: ‘750x300’ to save downloading more of the image than I need. However if I set no crop value it is actually giving me an image sized at 417x300 (which is then grainy above 417px screenwidth) or, I set a crop, but only have access to the left, right, top, bottom, center keywords. It feels like there should be a way to crop to the set size around the focal point.

Would really appreciate anyone’s help. Thank you.

Wes

2

Also looking for this, since for our CMS editors, they perceive changing the “focal” point as the “center”.

It’d be awesome to have “focal” as a separate crop option