Customization Guide

Brand your configurator with themes, layout, behavior, and quote settings.

Where to customize

Open a configurator in admin mode (Dashboard → your configurator → Manage). Use the theme panel and settings dialogs in the builder toolbar — changes save to that configurator and apply to both admin preview and the public embed.

Theme & colors

The theme customizer controls your buyer-facing brand:

  • Primary color — buttons, links, and accents
  • Secondary color — supporting UI elements
  • Background and surface colors
  • Text and muted text colors
  • Border radius for cards and inputs

Typography

Pick font families for headings and body text. Use web-safe stacks or Google Fonts supported by your theme configuration.

Layout

  • Max content width for the configurator panel
  • Spacing scale between sections
  • Grid density for option cards

Behavior settings

Per-configurator flags in settings:

  • Allow quotes — show or hide the request-quote flow
  • Require email — make email mandatory on the quote form
  • Show total — display running price total to buyers
  • Auto pricing — resolve prices automatically when options change

Quote form

Customize which fields appear on the quote request dialog (name, company, phone, notes, and custom fields via quote form schema). Field requirements can be tuned per configurator.

Custom CSS

For advanced cases, add overrides targeting the configurator root container on your host page. Prefer theme settings first — they stay compatible with embed updates.

/* Host-page overrides (use sparingly) */
#salescfg-root-your-id {
  max-width: 1200px;
  margin: 0 auto;
}

#salescfg-root-your-id [data-option-card] {
  transition: transform 0.15s ease;
}

Tip

Test overrides on the embed preview URL from the dashboard before deploying to production.

Next step

When branding is ready, copy the embed snippet and follow the embedding guide. Embedding guide

Customization Guide | SalesCFG