Storefront Image Editor
Choose how shoppers can adjust their Image Upload inside Live Preview.
Last updated: 2026-09-13
Enable Storefront image editor on an Image Upload option to let shoppers adjust their uploaded image in Live Preview. Merchants choose whether to allow Reposition, Scale, Rotate, Adjust opacity, Grayscale, and Zoom preview.
Enable the Storefront Editor
What this shows
- Open the product customizer in Podifai.
- Select the Image Upload option and enable Live Preview.
- Turn on Storefront image editor in the option's Live Preview settings.
- Select the shopper tools that should be available for this upload field.
- Save the customizer and open the product page in a new storefront session.
- Upload test images and verify every enabled tool on desktop and mobile.
Automatic Image Processing
Automatic image processing is separate from the Storefront Image Editor. It applies an effect immediately after the shopper uploads an image, and the processed result is used both in Live Preview and in the production file attached to the customization.
- Convert to grayscale on upload — Automatically creates a grayscale version.
- Remove background on upload — Automatically removes the image background.
You can enable either effect or both effects. When Storefront image editor is also enabled, shoppers can still use the merchant-selected reposition, scale, rotate, opacity, grayscale, and zoom controls after the automatic processing step.
Shopper Controls
- Reposition — Move the uploaded image within the customization area.
- Scale — Adjust the size of the uploaded image.
- Rotate — Rotate the image within the customization area.
- Adjust opacity — Change the transparency of the uploaded image.
- Grayscale — Convert the uploaded image preview to grayscale.
- Zoom preview — Zoom in or out to inspect a small customization area without changing the final design.
Prepare the Starting Layout
Position and size every preview layer in the Podifai editor before enabling shopper controls. The merchant layout should be a safe, useful default; the storefront editor then lets the shopper fine-tune the uploaded image. Test portrait, landscape, square, and transparent uploads, plus the smallest mobile layout your storefront supports.
Use the Editor with Image Masks
Image Upload supports Podifai's built-in masks and merchant-uploaded PNG masks. The mask defines the visible shape; the enabled Storefront Image Editor tools let the shopper position and style the uploaded image within that presentation. See Image Masks.
Other Preview Layer Editing
Show bounding box on storefront is a separate layer-editing control for supported text and image preview layers. When using that control, Shopify theme image zoom or product-image sliders can intercept click and drag events. See Live Previewand Theme Compatibility for those requirements.
FAQ
What can shoppers edit on the storefront?
For Image Upload, merchants can enable Reposition, Scale, Rotate, Adjust opacity, Grayscale, and Zoom preview. Shoppers see only the tools enabled for that upload option.
How do I enable the Storefront Image Editor?
Select an Image Upload option, enable Live Preview, turn on Storefront image editor, and choose which shopper tools to provide.
Does Zoom preview change the final image placement?
No. Zoom preview lets the shopper inspect a small customization area more closely. It does not change the final design placement or scale.
Can Image Upload use a mask?
Yes. The merchant can choose a built-in mask or upload a custom PNG mask. The Storefront Image Editor then lets the shopper adjust the uploaded image within that presentation using the enabled tools.
What is Automatic image processing?
Automatic image processing applies selected effects as soon as a customer uploads an image. You can enable Convert to grayscale on upload, Remove background on upload, or both. The processed result is used in Live Preview and in the production file attached to the customization.