Customising the design (CSS)

The configurator should look like your shop: colours, font, corners, the look of the selection fields. You adjust all of this with CSS, without any JavaScript. This page applies to the V3 frontend engine. Legacy generates different HTML, so the variables and classes below do not apply there.

What the configurator already takes from the shop

In a shop – via a shop plugin or the HTML snippet – the configurator takes font, font size and text colour from your theme. You do not need to do anything for this. You only need to adjust what the configurator brings along itself: accent colour, borders, backgrounds, corners.

If you embed it with data-configento-embed-mode="admin-preview", it shows title, price and summary itself and also uses its own colours for texts. Even then it inherits the font from the page.

Where your CSS belongs

You have two places:

• Your shop's theme – the right place if all configurators should look the same.
• Custom CSS in the Component Settings under Design – the right place for a single component. It is loaded with the configurator, in the shop and in the preview in the admin.

Put [data-configento] in front of rules for individual elements, e.g. [data-configento] .cfg-toggle-item__price. The configurator loads its own CSS after your theme; with this prefix your rule still wins. This is not necessary for the variables below.

Colours, font and corners

The simplest adjustment: set variables on :root. They take effect in the whole configurator and also in the enlarged image view and the info windows, which open outside the configurator.

:root {
  --configento-color-accent: #1d3c78;
  --configento-color-border: #c8d0e0;
  --configento-radius-md: 0;
}

The names of these variables stay the same in all 3.x versions.

Active color: If an Active color is set in the component settings under Design, it applies to this component instead of --configento-color-accent. Leave the field empty if the colour should come from your CSS.

Different font: If the configurator should use a different font than the page, set it on the element with data-configento. The font must be loaded on the page, for example via your theme.

[data-configento] { font-family: 'Source Sans 3', sans-serif; }

Styling individual elements

For styling beyond the variables there are classes and attributes that we guarantee: they stay the same in all 3.x versions and only change with a new first version digit. Other classes and the rest of the HTML structure may change.

Frame of every characteristic

Radio buttons and checkboxes

You reach the selected state via the input, e.g. .cfg-toggle-item__label:has(input:checked).

Input fields and select lists

If CSS isn't enough because a characteristic should look and behave completely differently – for example as a licence plate – you draw it with your own rendering in JavaScript.

The easiest way to target a specific characteristic is your own class: enter it in the editor in the characteristic's CSS class field, and it ends up on the .cfg-char element.

Examples

Custom radio buttons – circle via CSS instead of the browser default, selected row highlighted:

[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--configento-color-accent);
  border-radius: 50%;
}
[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input:checked {
  background: radial-gradient(var(--configento-color-accent) 45%, transparent 50%);
}
[data-configento] .cfg-toggle-item__label:has(input:checked) {
  background: var(--configento-color-accent-soft);
}

For this, set --configento-color-accent and --configento-color-accent-soft on :root, as shown above.

Show errors more clearly:

[data-configento] .cfg-char[data-configento-invalid] .cfg-char__title { color: var(--configento-color-error); }
[data-configento] .cfg-char[data-configento-invalid] .cfg-input { border-color: var(--configento-color-error); }

Hide surcharges, for example if your shop shows them differently:

[data-configento] .cfg-toggle-item__price { display: none; }

Troubleshooting

Next steps

• Component Settings – Active color and Custom CSS
• HTML Snippet Integration
• JavaScript API (V3) – if you want to intervene beyond the look
• Frontend Engine: Legacy or V3