Skip to main content
EcomWize Builder includes a built-in image cropping tool that lets you crop, resize, and reframe images without leaving the builder. Cropped images are automatically converted to WebP format for optimized file sizes and saved to your media library.

​
Opening the Image Cropper

1

Select an image element

Click on any image element in a section on the canvas.
2

Open the crop tool

Click the crop icon in the image toolbar that appears. The Image Crop modal opens with your image loaded.
The cropper loads your image in a full-size canvas where you can adjust the crop area.
The image cropper fetches the image through a proxy to handle cross-origin restrictions. This means it works with any image URL, including images hosted on external CDNs.

​
Using the Cropper

The image cropper provides a canvas-based interface for precise cropping.

​
Basic Cropping

  • Drag the crop area — Click and drag within the image to reposition the crop frame.
  • Resize the crop area — Drag the edges or corners of the crop frame to adjust the size.
  • Zoom — Use pinch-to-zoom or scroll to zoom in and out on the image.
  • Pan — Click and drag the image to reposition it within the crop frame.

​
Aspect Ratio Locking

You can lock the crop area to a specific aspect ratio:
  • Free crop — No constraints, crop to any shape
  • Fixed ratio — Lock to common ratios like 1:1 (square), 16:9 (widescreen), 4:3, etc.
When an aspect ratio is locked, resizing the crop frame maintains the selected proportion.
Use a 1:1 aspect ratio for avatar images and testimonial photos. Use 16:9 for hero banner images. Use free crop when you need a custom shape.

​
Saving Cropped Images

1

Adjust the crop

Position and size the crop frame to capture the area you want.
2

Preview the result

Review the crop area to make sure it captures the right portion of the image.
3

Click Save

Click the Save (checkmark) button to save the cropped image.
4

Automatic processing

The cropper extracts the selected area from the canvas, converts it to WebP format, and uploads it to your media library.
5

Applied to section

The cropped image is automatically applied to the image element you originally selected, replacing the uncropped version.

​
WebP Conversion

Cropped images are automatically saved in WebP format, regardless of the original image format. This provides:
  • Smaller file sizes — WebP compression reduces file sizes significantly compared to JPEG or PNG
  • Faster loading — Smaller images load faster on your published Shopify pages
  • Consistent format — All cropped images use the same format for uniformity
The WebP conversion happens on the client side before uploading. The cropper renders the cropped area to an HTML canvas, then exports it as a WebP blob for upload.

​
Before and After

When you open the cropper, you see the full original image. As you adjust the crop frame, only the selected area will be saved. The original image is not modified — a new cropped version is created and uploaded as a separate file in your media library.
Since cropping creates a new file, your original image remains in the media library untouched. You can always go back to the original and crop it differently if needed.

​
Common Use Cases

Remove unnecessary background from product photos to create cleaner, more focused images. Crop tightly around the product for detail shots, or leave more space for lifestyle context.
When using real photos for testimonial sections, use the 1:1 aspect ratio lock to crop consistent square avatars from different source photos.
Hero sections often need wide, landscape images. Use the 16:9 or 3:2 aspect ratio to crop images to the right proportions for full-width hero banners.
If you are using screenshots or UI images, crop out unnecessary browser chrome, toolbars, or whitespace to show only the relevant content.

​
Troubleshooting

If the image fails to load, it may be due to the source URL being unreachable or a CORS restriction that the proxy could not resolve. Try re-uploading the image to EcomWize’s media library first, then open the cropper on the uploaded version.
This can happen if you crop a very small area from a low-resolution source image and then display it at a large size. Start with the highest resolution source image available for the best results.
Make sure you have adjusted the crop area. If the save is taking a long time, the image may be very large. Wait for the processing to complete — a loading indicator will appear during the save process.