Storefront Image Editor

Enable Uploaded image editor popup 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, Remove background, and Zoom preview.

Enable the Storefront Editor

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 Uploaded image editor popup is also enabled, shoppers can still use the merchant-selected reposition, scale, rotate, opacity, grayscale, and zoom controls after the automatic processing step.

Choose Standard or Premium Background Removal

1. Open a product customizer and its Global Settings.
2. Under Other → AI background removal, choose Standard or Premium. Standard is the default.
3. Click Save changes.

This setting applies across the store. Premium is included for every account at no additional charge. Select the service here, then configure Remove background on uploadon the Image Upload option when removal should happen automatically.

During automatic removal, shoppers see Removing background... while the image is processed. To offer manual removal, enable Uploaded image editor popup → Remove backgroundin Image Upload Properties → Live Preview. Shoppers click Customize beside their upload to open Edit Photo and choose Remove background. Use Apply changes in that dialog to apply shopper edits, then inspect the product preview. Check the result with representative uploads before using it for production.

Remove Background Automatically

In Image Upload Properties → Live Preview, turn on Automatic image processing and select Remove background on upload. Background removal runs when the customer uploads an image.

Let Customers Remove the Background

1. In Live Preview, turn on Uploaded image editor popup.
2. Select Remove background and save the customizer.
3. Customers upload an image and click Customize beside its thumbnail.
4. In Edit Photo, they select Remove background, then click Apply changes.

Enabling this tool lets customers choose the effect. It does not turn on automatic removal.

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.
• Remove background — Let shoppers remove the uploaded image background in the Edit Photo dialog.
• Zoom preview — Zoom in or out to inspect a small customization area without changing the final design.

Image Editing in Popup and Inline Customizers

Shoppers can open the image-editing dialog from either a Popup or an Inline customizer. The examples below show different products and upload configurations. The available tools are configured for each Image Upload option; switching the customizer's Display mode does not choose those tools.

Use Apply changes to return to the product preview. These screenshots show different enabled controls and processing states; review the option's editor and automatic-processing settings separately. For the customizer's placement, see Customizer Display Modes.

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.

Check That Shopper Adjustments Are Saved

1. Upload a clear image and open Customize beside its thumbnail if the image editor is not already open.
2. Change an enabled control, such as Scale or Rotate, and check the image inside the product area.
3. Select Apply changes and inspect the product preview.
4. Reopen the image editor and confirm that the adjustment is still applied.
5. Repeat on mobile, then review the uploaded file and final preview links with a test order.

For example, the tumbler demo retained a Scale value of 150% and a Rotate value of 30° after applying the changes and reopening the editor. These values are test examples, not recommended defaults. Test only the controls enabled for your upload field, and check production output separately.

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

On-canvas image controls is in the selected option's Properties → Live Preview tab. It controls the selected preview layer separately from the uploaded photo editor. The same setting is available for Text Input 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.

If an upload tool is missing, select that Image Upload option and check Live Preview, Uploaded image editor popup, and the specific enabled tool. If a layer cannot be selected on the product preview, check the option's On-canvas image controls, the individual allowed actions, and the theme gallery's zoom or slider behavior. Test the actual control that fails before changing unrelated settings.

On-Canvas Controls or the Uploaded Image Editor?

For a fixed-size print area, configure the upload area and use the uploaded image editor to adjust the photo within it. If on-canvas controls are also enabled, turn off Allow resize when shoppers must not resize the layer itself. Test the allowed movement, cropping, and rotation on the storefront.

See Charm Builder placement modes for preset patch libraries. Image Upload is for shopper-supplied files; Image Swatch is for the artwork choices you provide.