Resources must be created following specific standards to work correctly with Product Designer App. This guide explains how to prepare product images, artworks, and fonts in the correct format to ensure the best performance, preview quality, and design experience.

You can also download standard resource examples provided by us and use them directly or as references.

Product Images #

Product images are the most important resource because they define how the design preview looks on your website.

You can download sample product images from our resource library, unzip them, and open the files in Photoshop to follow the structure and layer setup.

Supported Image Types #

• PNG (recommended) – required for transparent areas
• JPG (supported from version 1.0.6+) – used with color backgrounds

Image Size & Ratio #

• Square images only
• Recommended size: 800×800px to 1200×1200px
  • Smaller images → low preview quality
  • Larger images → slower website performance

Layer Structure (Required) #

• Base layer
  • Design area must be white or a solid color
  • Non-design areas must be transparent
  • Background color is controlled by the design area
• Mask layer
  • Transparent layer with shadows and highlights
  • Creates a realistic product preview
• Additional layers
  • Used to allow customers to change colors or elements
  • Unlimited layers supported

⚠️ All layers must have the same size (example: 1000×1000px) to ensure correct alignment inside the editor.

JPG Product Images with Color (v1.0.6+) #

If you want to use JPG images with colors:

• Use custom colors
• Select color type: “Background with image”
• Upload the correct product image for each color

Thumbnail Image #

• Create a full product image as a thumbnail
• Format: JPG
• Used for product listing and previews

✔️ Correct image standards will ensure accurate previews and a professional product appearance.

Artworks #

Artworks are optional design resources that help customers create designs faster and more easily.

You can download standard SVG artworks provided by us or upload your own files.

Supported Artwork Types

• SVG (recommended)
• PNG
• JPG

Bitmap Images (PNG, JPG) #

Follow these rules for bitmap artworks:

• Use high-resolution images
• Crop all unnecessary borders and empty space
• Use PNG to preserve transparency
• Keep image size reasonable (not too large) for performance
• Avoid redundant or unused areas

Vector Images (SVG) #

SVG files offer the best flexibility and performance.

Recommended SVG standards:

• Resize SVG to 800×800px
• Remove:
  • Hidden elements
  • Empty tags
  • Unused objects
• Export SVG from:
  • Adobe Illustrator
  • CorelDRAW
• Keep styles defined using attributes
  • Allows customers to change SVG colors inside the editor

✔️ Product Designer App supports color changes on SVG elements using attribute-based styles.

Fonts #

Fonts are used in the design editor for text customization.

You can download standard font files from our resource library or upload your own.

Font Requirements #

• File type: .TTF (TrueType Font)
• All characters must display correctly
• Recommended file size: under 3MB
  • Smaller font files improve loading speed

Summary #

Following these resource standards will ensure:

• Accurate design previews
• Smooth editor performance
• Professional product presentation
• Better user experience for customers

If your resources are created correctly, Product Designer App will work beautifully and efficiently.