Image & Asset Requirements

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

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.

Preparing Images for Multiple Customizable Parts

A layered Live Preview combines a background and separate images into one product preview. Each independently customizable area can have its own preview-enabled option. Selecting a new value changes its assigned image while the other selections remain in place. This works for shirt collars and bodies, bag panels and handles, or other products with separately customizable areas.

Example: Fabric Colors, Hibiscus Prints, and a Back Logo

For example, choosing a red collar with white flowers displays that collar image over the selected shirt color. Changing the collar should preserve the body color. Use Multiple Views in Popup mode to show the back logo on the back of the shirt; a front image cannot show artwork placed on the back. Each view needs matching artwork and placement.

If fabric colors are stocked Shopify variants, start with Variant image as the background. The body does not have to be a transparent PNG when a suitable variant photo supplies the base image. See Shopify Variants vs Podifai Options for the distinction between the base product and custom options.

Start with the Images You Already Have

Having fabric color variants does not mean the pattern, logo, or separated preview layers already exist. If it has not been designed yet, the pattern and logo artwork need to be created before this preview setup can display them.

Identify the areas shoppers can customize and whether the product image should update when they choose colors. Confirm whether the collar and logo should share a color selection or have independent choices. This determines the setup to review before you prepare the full collection of images.

Prepare the Transparent Layers

• Separate independently changing areas. Keep the area visible and the surrounding canvas transparent so it does not cover the rest of the product.
• For pre-aligned full-canvas PNG layers, export each view's layers at the same pixel dimensions, preserving their positions and transparent margins. Avoid trimming each export differently.
• Keep replacement images for the same layer consistent in dimensions, position, and scale. Standalone logos can also be positioned and resized in the editor; full-canvas exports are a preparation method, not a requirement for every asset.
• When swapping prepared images, prepare each offered appearance of a layer. When flowers and their background are combined in one collar image, include each offered flower/background combination. You do not need a complete shirt image for every combination of body, collar, and logo.
• Include the required perspective, fabric texture, folds, and shading in prepared artwork when a realistic result is needed.
• Keep Image Swatch preview images at or below 2 MB each. PNG is useful for transparent raster layers; see Recommended Formats for other supported assets.

Choose Prepared Images or Image Coloring

Use prepared image replacements for specific fabric textures or multicolor patterns. For artwork that should keep its shape and shading while changing color, use Image coloring with a linked Color Swatch. Transparent PNG artwork should be white or light grey; SVG artwork is recolored directly.

If shoppers choose the flower color and the collar background color independently, prepare those areas as separate layers or supply each offered combined appearance. One merged image cannot identify the flowers and background as independent color regions. Review one sample before preparing all assets.

These layers create the visual preview. Merchant-provided Image Swatch artwork and product backgrounds are excluded from print-ready PNGs; keep your original production artwork separately.

Check the Combined Preview

1. Choose the background and add a preview-enabled option for each independently changing area.
2. Assign the prepared Preview Image to each value, then position, size, and rotate the layers to align with the product.
3. Change one choice at a time. Confirm that the intended area changes and the other selected layers remain visible.
4. Check each offered appearance over light and dark fabric colors for opaque edges, gaps, or unwanted coverage.
5. Switch through the front and back views and verify their artwork separately. Repeat the preview checks on desktop and mobile.

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, image-enabled Checkbox, 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

1. Create the Shopify product and variants.
2. Assign the final product or variant images in Shopify.
3. Choose the Live Preview background source in Podifai (how).
4. Upload the thumbnail, preview, and overlay assets (Image Swatch).
5. Position and resize each Live Preview layer (Live Preview).
6. 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

• Live Preview
• Image Masks
• Image Swatch
• Image Upload
• Shopify Variants vs Podifai Options