Canvas Visual Preview

Show customers real-time visual previews of their product customizations using layered images.

What is Canvas?

The Canvas feature creates a dynamic product preview that updates as customers make selections. It works by layering images on top of each other, showing different elements based on chosen options.

Use Cases

• Apparel - Show different colors, prints, or embroidery
• Jewelry - Display material options (gold, silver, rose gold)
• Furniture - Preview fabric and finish choices
• Tech accessories - Show case colors and designs
• Custom products - Any product with visual options

How Canvas Works

Canvas uses a layer system:

1. Base Layer - The product background or outline
2. Option Layers - Images that appear based on selections
3. Overlay Layers - Fixed elements like shadows or watermarks

When a customer selects an option, the corresponding layer becomes visible, creating a composite preview image.

Setting Up Canvas

Enabling Canvas for a Product

1. Open the product in Uplift
2. Navigate to the Canvas tab or section
3. Toggle Enable Canvas Preview on
4. Configure canvas dimensions (or use auto)

Adding the Base Layer

1. Click Add Base Layer
2. Upload or enter URL for the base image
3. This image always displays as the bottom layer
4. Save the layer

Creating Option Layers

1. Click Add Layer
2. Name the layer (e.g., "Blue Color")
3. Upload the layer image
4. Link to an option:
   • Select the add-on group
   • Select the specific option
5. Set the layer order (z-index)
6. Save the layer

Preparing Images

Image Requirements

Image Alignment

For layers to align correctly:

• Use identical canvas sizes for all images
• Position elements consistently across layers
• Export from the same artboard/canvas in your design tool
• Test alignment before going live

Working with Transparency

PNG transparency allows layers to stack properly:

• Option layers should have transparent backgrounds
• Only the relevant element should be opaque
• Use 24-bit PNG with alpha channel

Layer Management

Layer Order (Z-Index)

Control which layers appear in front:

• Lower numbers = behind
• Higher numbers = in front
• Base layer typically at 0
• Option layers 1-10
• Overlays 10+

Conditional Visibility

Layers can be shown/hidden based on:

• Option selection - Layer appears when option is chosen
• Variant selection - Different layers for product variants
• Multiple conditions - AND logic for complex scenarios

Reordering Layers

1. Open the canvas configuration
2. Drag and drop layers to reorder
3. Or manually edit z-index values
4. Preview changes before saving

Advanced Configuration

Multiple Views/Angles

Show different product angles:

• Create separate canvas configurations per view
• Add view selector buttons (Front, Back, Side)
• Maintain consistent option linking across views

Zoom Functionality

Enable customers to zoom in:

• Configure zoom level (1.5x, 2x, etc.)
• Click-to-zoom or hover-to-zoom
• Mobile pinch-to-zoom support

Transition Effects

Add polish with animations:

• Fade - Smooth opacity transition
• None - Instant swap
• Configure transition duration

Performance Optimization

Optimizing Images

• Compress PNGs - Use TinyPNG or similar
• Right-size dimensions - Don't use 4000px images for 400px display
• WebP alternative - Offer WebP for supported browsers
• Lazy loading - Load non-visible layers on demand

Layer Considerations

• Keep total layers under 10 when possible
• More layers = longer load time
• Consider combining rarely-changed layers
• Test on slower connections and devices

Troubleshooting

Canvas not displaying

• Verify canvas is enabled for the product
• Check base layer image URL is valid
• Look for JavaScript errors in console
• Clear cache and refresh

Layers misaligned

• Verify all images have same dimensions
• Check layer position settings
• Re-export images from same artboard size

Slow loading

• Compress all layer images
• Reduce image dimensions
• Limit number of layers
• Enable lazy loading

Layer showing at wrong time

• Verify option linking is correct
• Check conditional visibility rules
• Test with simple conditions first

Best Practices

• Plan layer structure - Sketch out layers before creating images
• Use consistent naming - Clear layer names make management easier
• Test all combinations - Check every option permutation
• Mobile-first - Ensure canvas works well on small screens
• Fallback images - Have a default view if canvas fails
• Regular audits - Check canvas after adding new options

Next Steps

• Color Swatches Guide - Create visual option selectors
• Conditional Logic - Advanced show/hide rules
• Storefront Customization - Style the canvas display