Skip to main content

focal_point

The focal point for an image.

The focal point will remain visible when the image is cropped by the theme. Learn more about supporting focal points in your theme.

Tip

Use the image_tag filter to automatically apply focal point settings to an image on the storefront. This applies the focal point using the object-position CSS property.

Properties

Anchor to
x
number

The horizontal position of the focal point, as a percent of the image width. Returns 50 if no focal point is set.

Anchor to
y
number

The vertical position of the focal point, as a percent of the image height. Returns 50 if no focal point is set.

Returned by

Anchor to Referencing the `focal_point` object directly

Referencing the focal_point object directly

When a focal_point object is referenced directly, the coordinates are returned as a string, in the format X% Y%.

{{ images['potions-header.png'].presentation.focal_point }}

Output

1.9231% 9.7917%
Was this section helpful?