Edit photos: rotate, crop, and set the focus point

You can edit an image directly in the admin panel after you've uploaded it. You can rotate it, crop it, and tell the system where the subject is so that the most important part always remains in the image when the theme crops it. You can’t mess anything up along the way: the original always remains unchanged, and you can reset everything with a single click.

How to open image editing

Image editing is available wherever you upload images in the admin panel: on products, categories, pages, blog posts, landing pages, brands, campaigns, shipping methods, payment methods, and security profiles.

1. Go to the product or page where the image is located.
2. Find the image section. For products, it’s called “Product Images.”
3. Click on the image itself. A window with the editing tools will open.

The window has two tabs: “Crop and Rotate” and “Focus Point.”

Rotate the image

Use “Rotate Left” or “Rotate Right.” The image rotates a quarter turn at a time. This is exactly the same action you’re familiar with from your phone or computer, and no quality is lost.

Note that any crop is removed when you rotate the image. This is intentional: a frame you’ve drawn around a landscape-oriented image doesn’t make sense when the image is suddenly in portrait orientation. Rotate first, then crop.

Crop the photo

Drag a frame over the portion you want to keep. You can drag the corners and the sides, and you can move the entire frame by dragging the center.

In the Format field, you can lock the frame to a specific aspect ratio:

• Free gives you complete freedom.
• "Square" (1:1) is suitable for product cards and Instagram.
• Landscape (4:3) and Widescreen (16:9) are suitable for banners and cover photos.
• Portrait (3:4) is suitable for clothing and other tall images.

To remove the crop again, click Remove Crop.

Focus point: keep the subject in the frame

Themes often display images in fixed formats. A product card on the front page, for example, might be completely square, even if your image is wide. In that case, part of the image has to be cropped, and until now, the crop has always been made from the center.

This becomes a problem when the subject isn’t centered. If the model is on the left side of the image, their head or half of their body will be cut out of the square crop.

With a focus point, you specify where the subject is. Go to the Focus Point tab and click the spot in the image that should always be included. A blue dot will appear. When the app then crops the image, it will crop around your point instead of the center.

You can move the point by clicking a new location, and remove it again using “Remove Focus Point.” Without a focus point, the image is cropped from the center, just as before.

The focus point is only used when the image needs to be cropped to a fixed format. If the image is displayed at its full height and width—for example, on a product page—the focus point has no effect.

You can’t ruin your image

The original image is never overwritten. Rotation, cropping, and the focus point are saved as a few numbers next to the image, and they’re only applied when the image is displayed in the shop.

That’s why you can always undo your changes. The “Reset to Original” button at the bottom of the window removes rotation, cropping, and the focus point all at once, and the image is restored to the way it was when you uploaded it. This applies even months later.

Images you’ve edited are marked with a small “Edited” label in the image overview, so you can see this without opening them.

Upload, Order, and Alt Text

The image section works the same way throughout the admin panel:

• Upload: Drag images into the dotted box, or click “Select from Computer.” Images upload immediately, so you don’t need to save the page first to add alt text.
• Order: Drag the handle in the corner of an image to move it. The order is saved automatically. The first image is the main image.
• Alt text: Enter a brief description of what’s in the image. It’s saved when you save the page.
• Delete: Check the “Delete this image” box and save the page.

You can upload PNG, JPEG, GIF, and WebP files. SVG is not supported because images must be scalable to the sizes used by the theme.

If an image from your phone is oriented incorrectly

Phone cameras sometimes save a portrait-oriented image as landscape, even if it was taken in portrait mode, and include a note in the file about how it should be rotated. Not all systems read this note, so a portrait-oriented image may end up landscape after upload.

If that happens, you can fix it in a moment: click on the image and use Rotate Left or Rotate Right until it’s oriented correctly. The rotation is saved without altering your original file, so you can always reset it.

For developers

Cropping and rotation are applied directly to the image itself, so the theme doesn’t need to do anything. Both “fit” and “box” work on the edited image, and “box” automatically uses the focus point.

If your theme crops the image using CSS, you can retrieve the focal point as a ready-made ` object-position`:

<{if $image->getFocalPoint()}>
    <img src="<{$image->getSrc(800, 800, 'box')}>" alt="<{$image->getDescription()|escape}>"
         style="object-fit: cover; object-position: <{$image->getFocalPoint()}>"/>
<{/if}>

There are also getFocalX() and getFocalY(), which return numbers between 0 and 1, or nothing if no point has been set.

Via the REST API, the `rotate`, ` crop `, and `focal` fields are available for each image, both when you retrieve it and when you save it. Rotation is measured in degrees clockwise, cropping consists of four numbers between 0 and 1 in the order x, y, width, and height, and the focal point consists of two numbers between 0 and 1. Cropping is calculated based on the rotated image, so the rotation is applied first.

Frequently Asked Questions

Will I delete my original image when I crop it?

No. The image you uploaded remains unchanged. The crop is applied only when the image is displayed, and you can always click “Reset to Original” to restore everything.

Do I need to do anything differently, or does it work as usual?

It works just as usual. You drag and drop the images as before. The difference is that they’re uploaded immediately, and you can click on an image if you want to edit it.

Do I need to re-edit all my old photos?

No. Old images are untouched and look exactly the same as before. You can edit them if you want, but you don’t have to.

How can I tell if a colleague has already edited an image?

Edited images have a small label that says “Edited” in the image overview. If you open the image, you can see the rotation and frame as they were saved.

Does it work the same way for products and categories?

Yes. The image section is the same everywhere. Products have a few extra fields per image—for example, linking to a variant—but uploading, ordering, and editing work the same way.

Can I set the focus point for multiple images at once?

Not in the admin panel, where it’s set one image at a time. If you have many products, you can set the fields via the REST API, which supports rotation, cropping, and focus point for each image.

Does this take up more space on the server, and does it slow down the store?

No. Only a few additional files are saved in addition to the original. The edited version of the image is created once and then reused, just like all other image sizes in the store.

How long does it take for customers to see the update?

Immediately. An edited image gets its own URL, so customers see the new version and not an old one cached in their browser.

Does the cropping carry over to Google Shopping and when someone shares a link?

Yes. Feeds and shared images use the same images as the store, so your rotation and cropping will be reflected the next time the feed is fetched.

Is the alt text enough for SEO?

The alt text describes the image for search engines and screen readers, and it’s also included in the image’s URL. It does not replace the product’s own text and description.