Configuring Step 5 (Designer)

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 mirrors the storefront editor — the layout you see in admin matches what your customers see.

This page is the map for that workspace. Each area has its own detailed guide, linked below.

Wizard step numbers for reference:

Step Tab
1 Build with AI
2 Options & Pricing
3 Optional Features
4 Personalization
5 Designer (only when a Product Designer option exists)
6 Placement & Styling (or step 5 when Designer is hidden)

Mode toggle

The top of the workspace has a segmented toggle:

  • Designer mode — Configure the full product designer (text, clipart, uploads, shapes, layers, crop, and more).
  • Image-edit mode (Image Edit) — Configure the photo editor for linked file uploads. See Image Edit mode.

The toggle only lists features that apply to the current mode, so you cannot enable a Filter preset in Designer-only configuration by mistake. Most features work in both modes; Canvas bindings are Designer-only, and Crop is added from the feature list in Designer (off by default in new configs).

What you can configure

Area Where Guide
Features (left sidebar) Text, Clipart, Image Upload, Shapes, Frames, Draw, Layers, Crop, Finetune, Filter, plus the logo Designer features
Canvas tools (top row) Ruler, Grid, Snap, bleed/safe-zone guides, Show panels, Fit to Design, Preview, Undo/Redo, and guide colors Canvas tools and guides
Customer access & layout Full editing / Product preview / Display only, and layout/framing modes Editor profiles
Right panel (Designer) Which options appear, Save and Comment buttons, output files, default artboard Designer right panel
Canvas bindings Map calculator options to artboard size, background, cut-line, and more — per side when Front/Back is enabled Canvas Bindings
Front / Back (Designer) Optional second design surface with its own options and bindings Canvas Bindings (Front and back sides)
Output files Proof, print-ready, cut-line, canvas JSON, manifest, export DPI Print quality and production output
Clipart & fonts Shop clipart library and font selection Managing clipart and fonts
Translations Save/Done/comment labels and built-in editor strings Product Designer Translations

Gear settings (Storefront editor settings)

Open the gear icon beside the mode toggle for Storefront editor settings, which apply per mode (Designer / Image Edit):

  • Customer experience — customer access profile and layout/framing. See Editor profiles.
  • Export — output files and resolution. See Print quality and production output.
  • Ruler — units and tick granularity (when the Ruler tool is on). See Canvas tools and guides.
  • Translations — locale overrides for your button labels. See Product Designer Translations.
  • Default theme (Designer) — whether the storefront editor opens in dark or light mode. Customers can still switch with the sun/moon control.
  • Allow AI background removal — adds a Remove background button when a customer selects a single image. Uses AI credits. See AI background removal.

Validation warnings in these settings block Publish and Go live until resolved (for example, Use crop tool enabled without the Crop feature, or roll wallpaper without a print width).

Front and back (Designer only)

For double-sided products, add a Back surface from the + on the canvas Front / Back toggle. Use the gear beside that toggle for labels, Back orientation, or to remove the back side. Switch Front / Back in the right panel to configure each side's options and bindings separately. Artboard size and cut-line stay shared across both sides — see Canvas Bindings.

Examples

  • Die-cut stickers — Enable Text, Clipart, Image Upload, Layers, and Crop (features); set Full editing + Crop outside image (profiles); bind Width/Height and a Shape swatch to the cut-line (bindings).
  • Wallpaper rolls — Use Product preview + Drag image (profiles) and a Product image binding with panel width (Wallpaper and product image bindings).

    • Related Articles

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

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

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

    • Setting up the Product Designer option

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

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