Preview scenes, effects, and clear stickers

Preview scenes, effects, and clear stickers

Overview

Designer mode supports three preview-only layers that help customers visualize the final product. None of these are included in print-ready exports — they appear only while editing or when the customer toggles Preview on the storefront. Configure them in Calculator Editor → Designer (Step 5) → Canvas bindings in Designer mode.

Scene binding

Scene (productOverlay) frames the artboard inside a product mockup using a nine-slice image (corners and edges stretch, center stays open for the design).

Setup How
One scene for everyone Add Scene binding → fixed image URL → upload a PNG frame with a transparent center hole.
Scene per choice Add Scene binding → map each swatch or dropdown value to a different frame image.

Scenes are for visual context only — they do not appear on proof PNGs, print files, or cut-line SVGs.

Preview Effect binding

Preview Effect (previewOverlay) adds a finish layer over the design when Preview mode is active — laminate gloss, matte haze, holographic glitter, and similar looks.

Built-in finishes include Glossy, Mirror, Matte, Cracked Ice, Glitter, Pixie Dust, and Prismatic. Map a material swatch or dropdown to a built-in finish, or upload a custom overlay image with blend mode and opacity.

Setup How
One finish Add Preview Effect → fixed built-in material or custom image.
Finish per choice Map each material or laminate option to a different finish.
Multiple options Add several mapped sources — the first option with a matching value wins.

Customers see the effect when they click the Preview tool on the canvas (Designer mode only). The tool is hidden when Customer access is Product preview because the whole editor is already a live preview.

Clear sticker / transparent preview

For clear vinyl stickers, set the Background binding's per-choice image mode to Transparent on the swatch that represents clear material. The canvas shows a checkerboard behind the artwork and Preview mode draws a cut-edge outline so customers see how the sticker reads on clear stock.

Pair transparent background with a Cut line shape binding (preset shape or Auto (die-cut)) and enable Export cut-line SVG under export settings.

Examples

  • Holographic sticker shop — Material swatch maps to Preview Effect → Glitter per finish; clear material uses Background → Transparent.
  • Framed sign mockup — Fixed Scene PNG wraps the artboard; customers design inside the frame without affecting print output.

    • Related Articles

    • Cut lines and die-cut export

      Overview Cut lines define the trim shape around a design — rectangles for standard stickers, circles for buttons, or a custom contour for die-cut vinyl. Configure them in Calculator Editor → Designer (Step 5) with a Cut line shape canvas binding ...

    • Canvas tools and guides

      Overview Canvas tools are the controls in the horizontal row beside the logo at the top of the editor. They help customers measure, align, and preview their design. You manage them in Calculator Editor → Step 5 (Designer): click a tool chip in the ...

    • Binding calculator options to canvas properties

      Overview A binding maps a calculator option (Width, Height, Material, Shape, …) to a property of the editor canvas (artboard width, background color, cut-line shape, bleed, …). When the customer changes a bound option in the editor's right panel, the ...

    • Product Designer

      Overview The Product Designer adds a full-screen design editor to your calculator. Customers open it from a styled button on the product page, work on a dedicated artboard, and save proof and production files before add to cart. This is separate from ...

    • Live Preview

      Overview The live preview panel is the right-hand side of the calculator editor. It renders your calculator the way customers will see it on your storefront, updating in real time as you make changes. You can switch between different saved states and ...