How to Use Shopify Image Focal Point for Better Cropping

Responsive layouts can crop important parts of your images on smaller screens. The Shopify image focal point feature lets you keep products, logos, and faces perfectly framed across every device. In this guide, NextSky shows you how to use it to create a polished storefront, no coding required. 

What is a Shopify Image Focal Point?

An image focal point lets you tell Shopify which part of an image matters most. When your theme crops or resizes images for different screen sizes, Shopify keeps that area in focus instead of simply cropping from the center.

In the past, merchants were limited to preset alignment options like Top, Center, or Bottom, often causing key details such as a model's face or a product feature to be cropped out on mobile devices.

Shopify's modern editor solves this with a visual focal point picker, allowing you to place the focus anywhere on the image. Once saved, the focal point is automatically applied wherever that image appears across your store.

How to set an image focal point in Shopify

You can configure a focal point from multiple locations within your Shopify admin dashboard. The changes save globally to the asset itself.

Method 1: Using the Theme Editor

1. From your Shopify admin, navigate to Online Store > Themes and click Customize.
2. Click on the section or block containing the image you want to edit.
3. In the image picker field on the sidebar, click on the target image.
4. Click or drag the blue dot to the exact spot you want to keep in frame.
5. Click Save.

Method 2: Using the Files Section

1. Go to Content > Files in your Shopify admin.
2. Click on the image you want to modify.
3. Drag the blue dot to your preferred focus area.
4. Click Save.

Note: You can reset or move a focal point at any time by opening the image again, dragging the dot to a new location, or clicking Remove.

Setting multiple focal points for the same image

By default, Shopify only allows one focal point per image asset. If you use the same image in an image banner on your homepage and a grid section on a collection page, they will share the exact same focal point.

If you need different focal points for different sections, use this quick workaround:

1. Duplicate the image file on your computer.
2. Rename the files uniquely (e.g., summer-banner-desktop.jpg and summer-banner-mobile.jpg).
3. Upload both files to Shopify.
4. Set distinct focal points for each file and apply them to their respective sections in the theme editor.

Troubleshooting and theme compatibility

The "Theme Not Supported" Warning

You may see the warning: "This section of your theme doesn’t support focal points." If you're using a modern Online Store 2.0 theme, you can safely ignore it. Most updated themes already support Shopify's global focal point data, so image cropping will still work correctly on your live storefront.

When focal points will not apply

Focal points are highly effective, but they do not apply under the following conditions:

• "Adapt to image" settings: If a section ratio is set to adapt completely to the image's original aspect ratio, no cropping occurs, making the focal point irrelevant.
• Parallax backgrounds: Sections utilising advanced parallax scrolling effects handle image positioning through custom CSS scripts that override standard focal configurations.
• Dynamic raw data feeds: Certain unoptimized third-party application widgets or legacy blog structures may bypass Shopify's core image delivery network.