01Base mockup
02Selected option layers
03Text and artwork
04Generated preview
Recommended approach: Use high-resolution transparent PNG or WebP assets for option layers.
Compose a predictable layer stack
A render view starts with a base product image. Selected option assets are placed above it by z-index. Text and customer artwork occupy merchant-defined zones with bounded movement and scale.
| Layer | Controlled by | Purpose |
|---|---|---|
| Base image | Merchant | Unchanging product reference |
| Option layer | Customer selection | Color, component, or finish |
| Text zone | Customer text and merchant style | Names, numbers, engraving |
| Artwork zone | Customer upload and merchant bounds | Logo or custom graphic |
Use normalized placement
Position and size are stored relative to the fixed canvas, so the same recipe can render consistently in Admin, the storefront, generated previews, and build sheets.
Common questions
Why is the render canvas fixed?
The fixed canvas is the production coordinate system. Editor zoom and pan change only the workspace view, not saved output.