Overview

The Product Designer option is a launch button you add to a calculator so customers can open the full-screen editor. You add and configure it in Calculator Editor → Step 2 — Options & Pricing, the same place you add every other option. This page covers adding the button, its settings, linking it to a file upload, and where its appearance comes from.

Add the option

1. Open your calculator and go to Step 2 — Options & Pricing.
2. Click Add option → choose Product Designer.
3. The option appears at the bottom of your option list. Drag the handle to reposition it (it follows the standard option ordering — no special placement needed).

Basic settings

The Product Designer option uses the same shared fields as other options, plus one type-specific field. There is no Advanced settings tab for this type.

The Visibility rules tab works like other options — you can show or hide the button based on customer selections. The Product Designer option does not have a Value rules tab.

Button appearance

The launch button is styled by your calculator's style template, not by the option's Basic settings — and Step 5 — Designer does not control it either (Step 5 configures the full-screen editor: artboard, tools, bindings, export, and similar). By default the button matches your template: it uses your accent color, your control corner radius, your base font, and full row width. Every style template (Clean, Modern rounded, Minimal, Bold filled, Dark, High contrast) includes these button styles, so no custom CSS is required.

You can change the look in two ways under Calculator Editor → Placement & Styling → Styling:

• AI Style — describe what you want (for example "make the customize button orange with rounded corners") and the assistant updates the button variables for you.
• Styles (CSS editor) — edit the button variables directly. They appear in the editor under the ProductCustomizerButton group.

Example (in the Styles CSS editor):

--calc-pcb-bg: #008060;
--calc-pcb-text: #ffffff;
--calc-pcb-radius: 8px;
--calc-pcb-width: 100%;

These are separate from the calculator-wide Buttons variables (--calc-button-bg, --calc-button-text, --calc-button-radius), which style choice buttons and other standard controls. Use the --calc-pcb-* variables for the Product Designer launch button.

See CSS Variables and AI Style Assistant for the full styling reference.

Linking to a file upload (Image-edit mode)

If your calculator has a file upload option (e.g. "Upload Your Photo"), you can link a Product Designer button to it:

1. Add the Product Designer option to your calculator.
2. In its Basic settings, find Linked file upload option and pick your file option from the dropdown.
3. The button now opens in Image Edit mode. On the storefront, after the customer uploads a file, an Edit button appears next to the file in the uploader. Clicking it opens the same editor with the uploaded image loaded onto the canvas.
4. When the customer clicks Done (top-right corner of the editor), the edited image replaces the original upload.

Two-button setup

For products that benefit from both modes:

1. Add one Product Designer linked to your file upload (Image Edit mode).
2. Add a second Product Designer with no file link (Designer mode).
3. Each opens its own editor session. The customer can use one, both, or neither (unless you mark them required).

The UI prevents adding a third button.

Completed state

The button shows a visual indicator once the customer saves their design — a checkmark with a proof thumbnail. If the customer later changes a calculator option that's bound to the canvas (e.g. changes the sticker size), the completed state resets and the customer is asked to re-open the designer to re-verify their design.

Examples

• Photo + design combo — Link one button to "Upload Photo" (Image Edit) and add a second Designer button labeled "Add Text & Graphics" for overlay work on the artboard.
• Stickers only — Single Designer button, no file link. Mark it required so every order includes a saved design.
• Branded button — Keep the default label in Step 2, then set --pcb-bg and --pcb-color in Placement & Styling CSS to match your store theme.

Related Docs

• Product Designer Overview
• Configuring Step 5
• How customers use the editor
• Canvas Bindings
• Product Designer Translations
• Image Edit mode
• CSS Variables