Skip to main content

Image Cadre & Crop

Category: Products  ·  Min plan: Free  ·  Slug: image-cadre

Adds a visual crop tool when uploading product images. Crop each photo to a fixed 1:1 square inside your browser, before anything is sent to DZBuild.

Features​

  • Visual crop tool on product image upload
  • Fixed 1:1 square crop 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​

Most DZBuild themes show product cards as squares. If you upload a 4:3 photo, the storefront centre-crops it 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.

Three themes are the exception. Bloom, Prestige and Promobi draw product cards slightly taller than they are wide, so a square crop is scaled up to fill the card and a thin strip is lost on the left and the right. Leave a bit of margin around the subject and the same crop reads correctly on every theme.

How to activate​

  1. Open Dashboard → Add-ons at /dashboard/addons.
  2. Find Image Cadre & Crop under Products.
  3. Click Activate (Free plan).
  4. 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 same one whatever theme your store runs
  • 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: file size drops with no 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 and does not follow the theme, whatever the add-on card says about detecting a theme ratio. On Bloom, Prestige and Promobi the card is a little taller than a square, so keep the subject away from the left and right edges.
  • 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_text variant type (small image + label) — the variant thumbnails inherit the cropped framing.