Image & Asset Requirements
Prepare image swatches, uploads, backgrounds, and overlay graphics for Live Preview.
Last updated: 2026-09-13
Use lightweight, consistently sized images for reliable Live Preview. Image Swatch assets can be up to 2 MB each. SVG is supported for merchant-created thumbnail and preview assets and for customer-facing Image Upload, which accepts supported image files up to 8 MB.
File Size Limits
| Asset | Limit | Purpose |
|---|---|---|
| Image Swatch thumbnail | 2 MB | Small option image shown to the shopper |
| Image Swatch preview image | 2 MB | Visual layer or image used in Live Preview |
| Dropdown or Badge Group value image | 2 MB | Optional PNG, JPG, WebP, or SVG visual shown with a value |
| Customer Image Upload | 8 MB | Shopper-provided PNG, JPG, JPEG, WebP, or SVG file |
Image Swatch assets and customer Image Upload files serve different purposes. The 8 MB customer upload limit does not change the 2 MB limit for merchant-created swatch and preview assets.
Dimensions and Aspect Ratios
- Use square product and variant images when possible.
- Keep every variant image at the same aspect ratio.
- Prefer the same pixel dimensions across all variant images.
- Leave enough consistent space around the product for personalization layers.
- Test both desktop and mobile after positioning the layers.
Recommended Formats
- SVG — Scalable icons, line art, and other merchant-created vector images used by Image Swatch, image-enabled Dropdown, or image-enabled Badge Group values.
- Transparent PNG or WebP — Logos, artwork, charms, patches, and overlay graphics.
- JPG or WebP — Product photos and opaque background images.
- PNG, JPG, JPEG, WebP, or SVG — Supported customer Image Upload formats.
Image Mask Assets
Podifai includes built-in masks and also supports merchant-uploaded PNG masks. Masks can shape image-based Live Preview content from Image Swatch, image-enabled Dropdown, image-enabled Badge Group, and Image Upload. Prepare a custom PNG at the same aspect ratio as the intended preview area and test it with both portrait and landscape content. See Image Masks.
Recommended Setup Order
- Create the Shopify product and variants.
- Assign the final product or variant images in Shopify.
- Choose the Live Preview background source in Podifai.
- Upload the thumbnail, preview, and overlay assets.
- Position and resize each Live Preview layer.
- Test the customizer on desktop and mobile.
Performance
Compress preview assets before uploading them. Load time increases with the number and size of option values, preview images, and visual layers. If a product contains an extremely large catalog of choices, remove unused values or split the configuration into smaller product flows.
Related Guides
FAQ
Why can't I upload an Image Swatch file larger than 2 MB?
Image Swatch thumbnail and preview assets are limited to 2 MB each. Customer-facing Image Upload is a different option and accepts PNG, JPG, JPEG, WebP, and SVG files up to 8 MB.
What image shape works best for Live Preview?
Square images work best when possible. Keep every product and variant image at the same aspect ratio and preferably the same pixel dimensions so preview layers stay aligned.
Which format should I use for overlay graphics?
Use SVG for scalable merchant-created icons or vector artwork, or transparent PNG or WebP for raster logos, artwork, patches, charms, and other graphics that should appear over the product background.
Which Podifai option types accept SVG images?
Yes. SVG is supported for Image Swatch thumbnail and preview images, image-enabled Dropdown and Badge Group values, and shopper-facing Image Upload.
Can I upload a custom image mask?
Yes. Use one of Podifai's built-in masks or upload a custom PNG mask for image-based Live Preview content.