Category: Products · Min plan: Free · Slug: image-cadre
Adds a visual crop tool when uploading product images. Shows the exact storefront frame so you can resize and crop images to fit perfectly.
Features
Visual crop tool on product image upload
Fixed 1:1 frame — the real storefront product-card frame
Drag, zoom, and rotate in 90° steps
Cropping happens in the browser, before upload
Skip / Skip all buttons for quick uploads
Works on both create and edit pages
Why use it
Storefront product cards are square on every DZBuild theme. If you upload a 4:3 photo, the storefront centre-crops it to a square and cuts off the top and bottom — usually exactly the part you wanted to show.
This add-on lets you choose which square before the file is uploaded: drag, zoom, and rotate until the framing is right. No more re-uploading because the thumbnail looks wrong.
How to activate
Open Dashboard → Add-ons at
/dashboard/addons.Find Image Cadre & Crop under Products.
Click Activate (Free plan).
The settings panel exposes: - Open cropper automatically (on by default) — this is the on/off switch for the whole feature, not just its timing. With it off the crop modal never opens and there is no manual way to launch it: files upload uncropped. - Output quality (75-100) — WebP/JPEG encoder quality for the 1500×1500 output (default 90).
Using the cropper
After activating, every product image upload at /dashboard/products/create and /dashboard/products/{id}/edit opens a modal with:
The image you just picked
A fixed 1:1 square crop frame — the frame the storefront actually uses
Drag to reposition
Pinch / scroll wheel to zoom, or the Zoom in / Zoom out buttons
Rotate — turns the image 90° counter-clockwise per click (fixed quarter-turns; you cannot straighten a slightly tilted photo)
Reset — back to the original framing
قص وتأكيد (Crop & confirm) to keep the cropped version
تخطي (Skip) to use the image as-is
تخطي الكل (Skip all) — appears only when more than one image is still queued
📝 Note
The cropper dialog currently renders in Arabic only, even when your dashboard language is French.
Cropping happens entirely in your browser, before the upload. The cropped canvas replaces the picked file in the upload queue, so when you crop, only the cropped version is sent to DZBuild and nothing is re-processed server-side. Skipping an image uploads the original untouched.
Output format
Cropped images are always re-encoded at 1500×1500 px, as WebP where your browser supports it and JPEG otherwise. The uploaded filename's extension changes accordingly (photo.png becomes photo.webp). Output quality is the quality setting for that encoder.
What it changes about the upload flow
The add-on takes over the product page's image picker (the upload area and the file input).
It still enforces the page's maximum images per product — when you are at the cap it shows an alert instead of queueing more files.
Each file still passes the page's normal validation; rejected files are listed in an alert and skipped.
If the crop tool cannot load — a blocked or very poor connection, for example — the add-on silently steps aside: no modal appears and the normal image picker keeps working.
Tips
Set Output quality to 90 by default — drops file size significantly without visible quality loss. Push to 95-100 only for hero/cover images on premium-priced products.
The crop frame is a fixed 1:1 square. All DZBuild themes display product cards as squares, so a crop stays correct if you switch themes.
Shot came out sideways? Use the Rotate button — it saves you a round trip to your photo editor. It only does 90/180/270° turns, though.
Pairs naturally with the
image_textvariant type (small image + label) — the variant thumbnails inherit the cropped framing.