Image crop and focal point in Media Manager / image inputs

[pixelastronauts]

Summary

Add crop and focal point controls to Weaverse image inputs / Media Manager, so merchants can frame an image in Studio instead of only picking the full file.

Problem

The image input today stores:

type WeaverseImage = {
  id: string
  url: string
  altText: string
  width: number
  height: number
  previewSrc: string
}

There is no crop, no freeform focal point, and no way to set focus per usage of the same file.

Workarounds are limited:

• position input — 9-point grid (top left … bottom right). Coarse, and not tied to the image itself
• Hydrogen Image crop — center | top | bottom | left | right CDN crop. Same limitation
• Shopify Admin focal point on Files — not exposed in Studio, not in WeaverseImage, and it’s one focal point per file, not per section

On heroes, cards, and banners we often need to keep a face / product / logo in frame when object-fit: cover crops the image. Editors currently have to pre-crop in another tool or live with the 9-point grid.

Proposal

Focal point (highest value)

Let the merchant click a point on the selected image in Studio. Store it per input / per usage, not globally on the Shopify file.

type WeaverseImage = {
  id: string
  url: string
  altText: string
  width: number
  height: number
  previewSrc: string
  focalPoint?: { x: number; y: number } // 0–1 or 0–100
}

Themes apply it as object-position (and optionally Shopify CDN crop) so object-fit: cover keeps that area visible.

A 9-point position fallback is fine; a clickable point is what we actually need.

Crop (nice to have)

Optional crop rect on the same image object (x, y, width, height as % or px), so Studio can produce a framed asset without leaving Weaverse. Focal point alone would already cover most banner/card cases.

Why this belongs in Studio

• Editors work in Weaverse, not Shopify Files
• The same file is reused in different sections with different frames
• Schema already has image; this is an extension of that picker, similar to editing alt text today

Related: #522 (Media Manager filters) — same surface, different problem.

Happy to test a Studio build if you add focal point to WeaverseImage.

[hta218]

Nice @pixelastronauts! We love that idea. Taking a look on how we can implement it.

[pixelastronauts]

Love how quickly you react to these — thanks @hta218 🙏