Theming & styling

There are two style surfaces with different mechanics:

1. The core designer UI (canvas, main bar, toolbars) — rendered in the light DOM, themed via CSS custom properties on :root.
2. The external modules (the web components placed in your product page sections) — rendered in shadow DOM, themed via inherited --fpd-* custom properties, ::part() selectors, and an optional per-module customCss setting.

Regular CSS selectors from your theme's stylesheet do not reach inside the external modules' shadow DOM — use the mechanisms below.

Core designer variables

Set these on :root (or on .fpd-container to scope them). The most useful ones:

:root {
  /* Colors */
  --fpd-primary-color: #485563;      /* primary accent */
  --fpd-primary-fg-color: #fff;
  --fpd-secondary-color: #029eeb;
  --fpd-text-color: /* body text */;
  --fpd-border-color: /* borders */;
  --fpd-btn-primary-color: /* primary buttons */;
  --fpd-btn-primary-text-color: /* their label */;

  /* Shape & layout */
  --fpd-border-radius: 6px;
  --fpd-container-min-height: 500px;
  --fpd-sidebar-width: 400px;        /* module sidebar */
  --fpd-sidebar-nav-width: 80px;
  --fpd-topbar-nav-height: 70px;
  --fpd-off-canvas-width: 350px;
  --fpd-canvas-bg: /* canvas background */;
}

Further variables exist for snackbars, tooltips, scrollbars, range sliders, the actions bar, and the element toolbar (all prefixed --fpd-); inspect the loaded FancyProductDesigner.css for the full set.

External module variables

The external modules read inherited --fpd-* variables with built-in fallbacks — every variable is optional. Set them once on :root and they pierce all module shadow DOMs.

Shared across modules

Variable	Styles	Default
--fpd-primary-color	Primary accent / buttons	#5fa372
--fpd-primary-fg-color	Text on primary	—
--fpd-primary-outline-color	Outline buttons	—
--fpd-primary-soft-color	Selected-state borders	—
--fpd-primary-tint-bg	Selected-state backgrounds	—
--fpd-border-color	Card and input borders	#e5e5e5
--fpd-border-radius	Corner radius	6px
--fpd-input-bg	Input backgrounds	#fff
--fpd-btn-border-width	Button border width	1px
--fpd-shadow-modal / --fpd-shadow-pop	Modal / popover shadows	—

Add-Elements module

--fpd-add-elements-card-gap, --fpd-add-elements-card-bg, --fpd-add-elements-card-radius, --fpd-add-elements-card-shadow, --fpd-add-elements-card-shadow-hover, --fpd-add-elements-badge-color (default #41a05f), --fpd-add-elements-icon-size (default 4.4em), --fpd-add-elements-icon-bg (default #e8f1eb), --fpd-add-elements-icon-color, --fpd-add-elements-label-weight.

Texts module

--fpd-text-row-gap, --fpd-text-edit-bg, --fpd-text-input-focus-outline, --fpd-text-input-scroll-margin-top / -bottom, and --fpd-text-edit-breakpoint (default 768px — below this width the text editor switches to the mobile bottom-sheet mode; this variable is read by JavaScript, so it must resolve to a pixel value).

Info popover

--fpd-info-icon-size (22px), --fpd-info-icon-color, --fpd-info-popover-bg, --fpd-info-popover-fg, --fpd-info-popover-border, --fpd-info-popover-border-radius (8px), --fpd-info-popover-shadow.

Layouts module

--layouts-confirm-accent and --layouts-confirm-cancel-color for the swap-confirmation dialog; both fall back to the shared primary variables.

Runtime variables — do not override

Some --fpd-* variables are written by JavaScript at runtime and must not be set by the theme: --fpd-vv-offset-top, --fpd-vv-height, --fpd-keyboard-inset, --fpd-sheet-height, --fpd-content-height. They track the visual viewport and mobile keyboard.

::part() selectors

Module internals are exposed as CSS shadow parts, so a theme can style specific elements directly:

fpd-texts-module::part(text-input) {
  font-family: inherit;
}

Inspect a module in DevTools to see its part="…" attributes — parts are the supported styling contract; internal class names inside the shadow DOM are not.

Per-module customCss

Every module accepts a customCss string in its block settings (theme editor). Its content is injected as a <style> tag inside the module's shadow DOM — a last-resort escape hatch when variables and parts are not enough. The Add-Elements module additionally supports designsCustomCss for the embedded designs browser.

Sizing note

Module components size themselves in px-safe units, but your theme's root font size affects any rem-based spacing you add around them. If your theme sets a non-standard root font size (e.g. html { font-size: 10px }), prefer px in your custom rules.

Text labels and translations

Two independent systems provide UI text:

Core designer labels

Delivered per shop from the FPD admin language settings. Override any label from the theme:

window.FPD = window.FPD || {};
window.FPD.lang = {
  // structure mirrors the admin language JSON
};

Inline FPD.lang values win over the delivered language file.

External module labels

The external modules ship built-in dictionaries for English and German and pick the language automatically: explicit block setting → Shopify.locale → <html lang> → browser language → English fallback.

Overriding module labels, in order of precedence:

1. Block settings in the theme editor (e.g. addTextLabel, designsLabel, buttonText) — highest priority, per section.
2. Language settings in the FPD admin under keys of the form moduleOverrides.<key> — e.g. moduleOverrides.uploadButton — shop-wide.
3. Built-in dictionary of the detected language.

The full key list (upload, gallery, QR code, text editing, layouts, designs, etc.) can be found in the module translations table; with ?debug enabled, every translation lookup is logged to the console, which is the quickest way to find the key for a given label.