How do I customize the appearance to match my website/online store?

Prerequisites

• You have einen Konfigurator angelegt

Using Your Logo

• Go to the preview of your configurator
• Click the pencil icon next to the logo (top left, if you haven’t set one up yet).
• Now you can upload an image file containing your logo. It will then be displayed above the product image.
• You can also adjust the size and transparency of the logo.
• Additionally, you can specify a web address to open when the logo is clicked.
• Click on
  Loading...

Design

Selecting a Design

• Go to your configurator’s editor
• Click on
  Loading...
  on the right
• and then on
  Loading...
• Here you’ll see a selection of pre-designed themes for your configurator. You can choose one.
• Finally, click on
  Loading...

Custom Designs

• Click on
  Loading...
  for the selected design.
• Now you can customize your design with some CSS.
• Finally, click on
  Loading...
  and then on
  Loading...
• The design named “Custom Design” is now active.

Layout

Selecting a Layout

• Go to your configurator’s editor
• Click on
  Loading...
  on the right
• and then on
  Loading...
• Here you’ll see a selection of pre-designed layouts for your configurator. You can choose one.
• Finally, click on
  Loading...

Responsive Layouts

info

All layouts are responsive. This means they adapt to the screen sizes of various devices. If you use the web component, the layouts will adapt to the size of the assigned area.

In the editor, you can change the size of the configurator window to see how the layouts look.

You can also specify a special layout for mobile devices.

• Go to your configurator’s editor
• Click the mobile icon in the middle of the top menu bar. You will now see the mobile view.
• Click the pencil icon next to the Mobile/Desktop selection
• Uncheck the box next to “No Mobile Layout”
• Here you’ll see a selection of pre-designed layouts for your configurator. You can choose one.
• Finally, click on
  Loading...

Create a Custom Layout

info

To use custom layouts, you’ll need a basic understanding of HTML and CSS.

• To do this, open the layout selection again.
• Click on
  Loading...
  for the selected layout.
• Now you can customize your layout with some HTML and CSS.
• Finally, click
  Loading...
  and then
  Loading...
• The layout named “Custom Layout” is now active.

Making the Custom Layout Responsive

To keep the layouts responsive, we use CSS container queries.

This allows you to change the layout depending on the width at which the configurator is embedded on the website or displayed on the device. In our standard layouts, for example, it looks like this:

    @container (max-width: 900px) {
      .k3-layout-paginated-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20rem;
      }

      ... weitere CSS Klassen ...
    }

This specific example specifies that, for widths less than 900px, the input field on the right is 20rem wide.

What elements are available here?

You can use almost all HTML and CSS constructs in the layout. In addition, tags are available for specific tasks:

<GroupsNavigation />

The header with the configuration steps.

<GroupsView design="topmenu" slide="true"/>
<Sidebar design="topmenu" columns="2" slide="true" />

The entire sidebar

• design: accordion, topmenu, or onlysidebar,
• hideLoader: if set to "true," the progress bar is not displayed while calculating validity. (A custom version of this can then be displayed using <ValuesLoading >.)
• slide is optional, with the default being false. If it is set to true, the transition to the next step is animated in the sidebar.
• columns is optional; the default is `1. Es bestimmt die Spaltenanzahl in der Seitenleiste.

<GroupOutlet />

Zeigt das Layout des aktuellen Schrittes an (s.u.)

<StandaloneVariable variableKey="key" sticky="true"/>

Zeigt eine einzelne Variable an variableKey: key der Variable. sticky="true", wenn die Variable unabhängig von der aktiven Gruppe angezeigt werden soll.

<StandaloneGroupWrapper groupKey="gruppe"/>

Zeigt einen einzelnen Schritt an. groupKey: key des Schrittes

<PriceTable overviewType="articlesOnly" />

Zeigt die Zusammenfassung an. Der Typ ist einer von variablesAndArticles, variablesOnly oder articlesOnly.

<ComponentBreadcrumbs />

Anzeige der Navigation bei Produktkomponenten

<SceneView />

3D- oder Bild-Anzeige

<SocialShareButtons />

Teilen-Knöpfe

<SceneButtons />

AR- und weitere Knöpfe

<EditScene />

Knopf für Verschieben von Modellen

<Price />

Standard Preis-Darstellung

<ExitButtons />

Darstellung der Aktions-Knöpfe

<Logo />

Das Logo

<FullScreenButton />

Knopf für Vollbilddarstellung

<NavigationButtons />

Weiter und Zurück

<UndoRedoControls/>

Damit können im Frontend Undo und Redo implementiert werden.

<LanguageSwitcher />

Ein Auswahlfeld, mit dem der Nutzer die Sprache der Inhalte im laufenden Konfigurator wechseln kann. Angeboten werden alle unter Sprachen angelegten Inhaltssprachen in der dort festgelegten Reihenfolge, jeweils in der Sprache selbst benannt ("Deutsch", "English", ...). Bei nur einer angelegten Sprache zeigt die Komponente nichts an.

<OcBranding />

Die Branding-Komponente. Muss jederzeit sichtbar positioniert werden, auch wenn keine Sidebar verwendet wird.

<LabelActionsDisplay />

Anzeige von per Regel zugesteuerten Texten

<TopLeft></TopLeft>

Grid-Position, auch MidCenter, BotRight und alle Kombinationen davon

<CustomLayoutComponent name="customComponent" />

Hier kann eine eigene React-Komponente eingebunden werden. Diese muss in einer Erweiterung vorhanden sein. name: Name der Komponente.

PROTECTED_2

Anzeige von Inhalten abhängig vom Wert eines Ja/Nein-Merkmales.

PROTECTED_3

Anzeige von Inhalten abhänggi von einer Benutzerauwahl.

<TranslatableText text="Hello World" />

Zeigt einen Text an. text: Text in der default Sprache. Dieser Text kann dann über den Stift im Editor übersetzt werden.

<HoverContent elementId="element" ></HoverContent>

Zeigt den Inhalt nur wenn das Element gehovert wird in einem Popover. elementId: ID eines HTML Elements (z.b. <div id="element"/>).

<PriceData type="overall" mwst="19" language="de" currency="eur" instanciated="false" />

Preis-Darstellung in Textform. type: overall, mwst, netto, VAT: Mehrwertsteuer, language: Sprache, currency: Währungskürzel instanciated: Ob bei Multiplizitätsvariablen der Preis gefiltert wird (true) oder global bleibt (false).

<ActionOverview actionKey="key" step="navigate" />

Zeigt den inhalt einer Bestell Aktion an. actionKey: key der Aktion, step: navigate, overview, contact, confirmation

Typography, Switch, Box, Link, Stack, Button, Divider

Verschiedene graphische Gestaltungselemente.

ExpandCircleDownIcon, KeyboardArrowDownIcon, CloseIcon, MoreVertIcon

Verschiedene Icons.

Verschiedene Layouts in verschiedenen Schritten

Wenn im Layout die Komponente GroupOutletverwendet wird, dann blendet sie den Inhalt des Layouts aus dem aktiven Konfigurationsschritt ein, falls der Schritt eines hat. Falls nicht, wird der Inhalt des Tags GroupOutlet are displayed by default. In extreme cases, the layout contains only this component; in that case, only the layouts of the steps are displayed.

To add a layout to a step:

• Go to the step
• Click the pencil icon behind the step’s name
• Enable Custom Design in a Step in the sidebar
• Enter the layout in the input field that now appears.

Colors

• Go to your configurator’s editor; if necessary, switch to “Home” in the right sidebar
• Click on
  Loading...
• Then click on
  Loading...
• Now you can set the different colors.
• Click on
  Loading...