Storefront Image Editor
Let shoppers move, scale, rotate, and adjust supported preview layers on the storefront.
Turn on Show bounding box on storefront to let shoppers move, scale, and rotate supported text and image layers directly on the product preview. Uploaded images also support transparency and a black-and-white effect. Fixed shape masks are coming soon.
Enable the Storefront Editor
What this shows
- Open the product customizer in Podifai.
- Open the Live Customizer panel on the right side of the editor.
- Scroll to the bottom and turn on Show bounding box on storefront.
- Save the customizer and open the product page in a new storefront session.
- Select a supported preview layer and test move, resize, and rotate controls on desktop and mobile.
Shopper Controls
- Move — Drag the selected layer to a new position on the product image.
- Scale — Drag a size handle to adjust the layer's size and visible area.
- Rotate — Use the rotation control to match an angled product area.
- Transparency — Adjust the opacity of a supported uploaded image layer.
- Black and white — Apply a black-and-white effect to a supported uploaded image layer.
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 it. Test short and long text, portrait and landscape uploads, and the smallest mobile layout your theme supports.
Theme Compatibility
- Disable product image zoom. Zoom handlers can block selection of the bounding box.
- Avoid product image sliders. Slider and carousel gestures can intercept clicks and drags.
- Test both display modes. Verify the controls in your chosen Inline or Popup layout.
See Theme Compatibility. If your theme does not let you disable zoom or its slider, contact Podifai Support with the theme name, store URL, and product URL.
Current Boundaries
- The controls adjust the preview layer; they do not provide customer-controlled cropping.
- A fixed circle, heart, or other shape mask cannot currently be applied to a shopper upload.
- Live Preview is a purchase preview. Confirm production-file requirements separately.
For shopper uploads, see Image Upload. For all preview layer types, see Live Preview.
FAQ
What can shoppers edit on the storefront?
When Show bounding box on storefront is enabled, shoppers can select supported text or image preview layers and move, scale, or rotate them. Uploaded image layers also support transparency and a black-and-white effect.
How do I enable storefront layer editing?
Open the product's Live Customizer panel, scroll to the bottom, turn on Show bounding box on storefront, save, and test the product page.
Why can't a shopper select the bounding box?
Theme image zoom and product-image sliders can intercept the same click or drag events. Disable image zoom and use a non-slider product image layout when using storefront layer editing.
Can shoppers crop or mask an uploaded image?
There is no separate crop tool. Shoppers can scale and move an uploaded image to adjust its visible area, but this does not crop the source image. Fixed shape masks are coming soon.