Image Masks

Image Masks let merchants display image-based Live Preview content inside a specific shape. Use one of Podifai's built-in masks or upload a custom PNG mask for Image Swatch, image-enabled Dropdown, image-enabled Badge Group, or Image Upload preview content.

Supported Option Types

Masks are available for options whose Live Preview result contains an image:

• Image Swatch
• Image-enabled Dropdown
• Image-enabled Badge Group
• Image Upload

Choose a Mask

1. Enable Live Preview for the image-based option.
2. Select its image preview layer in the editor.
3. Open the Mask setting.
4. Choose one of Podifai's built-in masks or upload a custom PNG mask.
5. Position and scale the preview content so it fits the visible masked area.
6. Save and test every affected option value on desktop and mobile.

Upload a Custom PNG Mask

Use a custom PNG mask when the visible area needs to match a product-specific outline. Prepare the PNG at the same aspect ratio as the intended preview area, keep its edges clean, and leave enough tolerance for shopper uploads with different proportions.

Masks with Image Upload

Image Upload can use a mask together with the Storefront Image Editor. The merchant chooses the mask and enables the shopper tools that are appropriate for the product. Shoppers can then reposition, scale, rotate, adjust opacity, apply grayscale, or zoom the preview according to those settings while the uploaded image remains presented inside the masked area.

Testing Checklist

• Test portrait, landscape, square, and transparent images.
• Check that important artwork stays inside the visible mask area.
• Verify the mask on every product view where the layer appears.
• Test the result in both Inline and Popup modes on desktop and mobile.