Focal Points

Focal points are supported in Marble 1.1.0 and above versions.

Focal points give you more control over the way your image is displayed when you use different aspect ratios, and on varying screen sizes. You can only have one focal point per image, but you can change it or remove it at any time.

More details from Shopify's guide here: https://help.shopify.com/en/manual/online-store/images/theme-images#set-a-focal-point-on-a-theme-image.

Example

Let's say that you have the hero section in your homepage and you want it to be shorter. For example you pick the Medium height setting and you have the section like this:

Then you add an image to the first slide and the image gets cropped. For example like this:

In the example it's obvious that only the top part of the image is shown as the section is short, but the image is tall so it gets cropped.

Here is where Focal Points come into play. You can pick whatever point you want to be focused and it will be centered within the picture.

Within the above example, if we want the focal point to be the bag, we click on the Edit button over the image and add a point over the bag.

Here is a short vide showing how this works.