Designer right panel

Designer right panel

Overview

In Designer mode, the right panel is what the customer sees beside the canvas — the calculator options they can change, the live price, and the Save and Comment buttons. You build it in Calculator Editor → Step 5 (Designer) in the right-hand column. Image Edit does not use this builder; customers there finish with Done in the top-right corner.

When Front / Back is enabled, a Front / Back segmented control appears at the top of the right panel in Step 5. Each side has its own right-panel options and canvas bindings. See Canvas Bindings (Front and back sides).

Right-panel options

Pick which calculator options appear in the editor's right panel. Each option is draggable, so you control the order the customer sees. Use this to expose only the choices that affect the design (size, material, finish) and keep unrelated options out of the editor.

To make an option also change the canvas (artboard size, background, cut-line, and more), add a Canvas binding. See Canvas Bindings.

Save and Comment buttons

Control What it does
Save button Configure the label, for example "Save Design", "Done Editing", or "Add Customization".
Comment button Toggle on for production notes. Configure the button label and the modal placeholder. Notes attach to the order as a visible Production Notes property.

Translate these labels under the gear Translations tab. See Product Designer Translations.

The Designer and Image Edit settings are grouped into inner tabs — General, Buttons, Export, and Artboard — so the button labels and the design review workflow live together on the Buttons tab.

Design review workflow

Turn on Enable design review workflow on the Buttons tab (available for the Designer and Image Edit separately) to add a review step before the final save. It requires Customer access set to Full editing; it does not apply to Product preview or View-only.

When enabled, the customer flow becomes Edit → Review → Save:

  1. The usual Save (or Done) button becomes Review Design. Clicking it opens a review view with the product preview.
  2. The right panel shows two tabs — Review and Options. The Review tab displays your Review instructions; the Options tab keeps the normal calculator options.
  3. Above the buttons, the customer must tick I have reviewed and approve my design before Save Design is enabled. Keep Editing returns them to the editor.

You can customize every label and the Review instructions rich text (same editor as the Product Designer option instructions). Defaults are provided, and all of these strings can be translated on the Translations tab.

Output files

Choose which files are generated when a customer saves. These are summarized here and covered in full — including export DPI and low-resolution warnings — in Print quality and production output.

Output Purpose
Proof PNG Generated on every save; preview thumbnail and order verification image.
Print-Ready PNG (with bleed) Full-resolution artwork for print fulfillment.
Cut Line SVG Vector trim path for die-cut jobs. See Cut lines and die-cut export.
Canvas JSON Lets customers re-open and edit the design before add to cart.
Production Manifest Designer-only HTML placement spec for fulfillment.

When the Design Files page is enabled, customers get a single link after save with all generated downloads. See How customers use the editor.

Default artboard

The Default artboard sets fallback width, height, unit, bleed, and safe-zone values used when no canvas binding overrides them. Bind a size option to the artboard when the dimensions should follow customer input. See Canvas Bindings.

Examples

  • Custom mug — Right-panel options: Font and Color. Save button labeled "Save Design", Comment button on for special instructions, Proof PNG and Print-Ready PNG enabled.
  • Sized banner — Bind Width and Height to the artboard, expose a Material option in the right panel, and enable Cut Line SVG plus Production Manifest for fulfillment.

    • Related Articles

    • 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 ...

    • Configuring Step 5 (Designer)

      Overview Step 5 — Designer appears in the calculator wizard once you've added a Product Designer option in Step 2 — Options & Pricing. (When no Product Designer option exists, this step is hidden.) Clicking it opens a full-screen workspace that ...

    • Designer features (left sidebar)

      Overview Features are the tools customers use inside the full-screen editor — adding text, clipart, shapes, uploads, and more. You turn them on and configure them from the left sidebar of Calculator Editor → Step 5 (Designer). Each feature is a ...

    • Product Designer Translations

      Overview Product Designer text falls into two groups. Built-in editor strings cover standard UI customers see throughout the editor — feature tab names, toolbar tools, zoom controls, layer buttons, modals, and similar chrome. Your designer labels are ...

    • How customers use the Product Designer (storefront)

      Overview When a customer clicks your Product Designer button, a full-screen editor opens with their current calculator option values applied (artboard size, background, bound product image, and so on). This page walks through the customer experience ...