Canvas Visual Preview

Create stunning real-time product previews that update as customers make selections.

What is the Canvas?#

The Canvas is your product's visual preview system. It shows customers exactly what their customized product will look like by combining:

• Base product images
• Color overlays from swatch selections
• Image layers from option selections
• Decorative elements like badges or text

Setting Up the Canvas#

Accessing Canvas Settings#

1. Open the product manager
2. Select your product
3. Click the Layers & Badges tab

Basic Canvas Configuration#

1. Canvas Dimensions: Set width and height (default: 500x500)
2. Background: Choose transparent or solid color
3. Base Image: Upload your main product image

Understanding Layers#

The canvas uses a layer system, similar to Photoshop or Canva.

Layer Types#

Layer Order#

• Layers stack from bottom to top
• Lower layers appear behind higher layers
• Drag to reorder layers

Creating a Colorizable Layer#

This is the key to showing products in different colors.

Step 1: Prepare Your Image#

1. Create a grayscale version of your product
2. Use medium gray (#808080) for the main areas
3. Keep highlights (lighter) and shadows (darker) for depth
4. Maintain transparency for non-product areas

Step 2: Upload to Canvas#

1. Go to Layers & Badges
2. Click Add Layer
3. Select Colorizable Layer
4. Upload your grayscale image

Step 3: Connect to Swatches#

1. Go back to your swatch group
2. Each swatch color automatically tints the colorizable layer
3. Test with different colors in the preview

Tips for Best Results#

• Start with a well-lit product photo
• Remove background completely (transparent PNG)
• Test with light AND dark colors
• Adjust grayscale midpoint if colors look off

Adding Option Layers#

Show accessories or modifications when selected.

Step 1: Prepare Option Images#

For each option that should change the preview:

1. Create a transparent PNG
2. Match the canvas dimensions
3. Position the element where it should appear

Step 2: Upload to Option#

1. Edit the option
2. Upload the Option Image
3. The layer is created automatically

Step 3: Verify Positioning#

1. Select the option in the preview
2. Check alignment on the canvas
3. Adjust the image if needed

Layer Settings#

Per-Layer Options#

• Name: Identify the layer
• Visibility: Show/hide by default
• Opacity: Transparency level (0-100%)
• Blend Mode: How layer combines with others
• Position: X/Y offset from center

Blend Modes#

Customer Preview Panel#

The right side of the product manager shows the Customer Preview.

What It Shows#

• Exact canvas rendering
• All customization options
• Real-time updates
• Mobile responsive view

Using the Preview#

• Select options to see canvas updates
• Test different combinations
• Verify layer ordering
• Check mobile display

Performance Optimization#

Image Guidelines#

Loading Speed#

• Optimize all images before upload
• Use appropriate dimensions (not oversized)
• Limit total layers to 5-7
• Consider lazy loading for complex products

Common Canvas Setups#

Simple Color Customization#

Layers:
1. Base Image (product photo)
2. Colorizable Layer (grayscale version)

Product with Accessories#

Layers:
1. Base Image (main product)
2. Accessory A Layer (shows when selected)
3. Accessory B Layer (shows when selected)

Full Customization#

Layers:
1. Shadow/Background Layer
2. Base Product Layer
3. Colorizable Body Layer
4. Pattern Overlay Layer
5. Accessory Layers (multiple)
6. Badge/Logo Layer

Troubleshooting#

Layer Not Appearing#

• Check layer visibility toggle
• Verify layer order (may be behind another layer)
• Confirm image uploaded successfully
• Check option is selected in preview

Colors Look Wrong#

• Ensure colorizable layer is true grayscale
• Check that no color tint exists in original
• Adjust the grayscale midpoint
• Test with pure white and black swatches

Image Position Off#

• Verify image dimensions match canvas
• Check layer position settings
• Ensure transparent areas are consistent
• Re-export with correct positioning

Preview Not Updating#

• Refresh the page
• Save changes and reload
• Clear browser cache
• Check for JavaScript errors

Advanced Techniques#

Multiple Colorizable Areas#

For products with multiple color zones:

1. Create separate grayscale images per zone
2. Add as separate colorizable layers
3. Link different swatch groups to each layer

Conditional Layers#

Layers can be controlled by conditional logic:

1. Set up your conditional rules
2. Layer appears/hides based on selections
3. Example: Show "Engraving Preview" only when "Add Engraving" is checked

Animation Effects#

While not animated, you can create visual effects:

• Hover states in CSS
• Transition smoothness in theme
• Loading animations

Next Steps#

• Badges & Labels
• Conditional Logic
• Storefront Customization