Skip to main content

How do I adapt the appearance to my website/shop?

Requirements​

  • Go to the preview of your configurator
  • Click on the pencil icon near the logo (top left if you haven't set one up yet).
  • Now you can upload an image file with your logo. It will then be displayed above the product display.
  • You can also adjust the size and transparency of the logo.
  • You can also enter a web address that should be opened when you click on the logo.
  • Click on
    Loading...

Selection of the layout​

  • Go to the editor of your configurator
  • Click on the desktop icon in the middle of the menu bar at the top. You will now see the desktop view.
  • Click on the pencil icon behind the Mobile/Desktop selection
  • Here you will see a selection of ready-made layouts for your configurator. You can choose one.
  • Finally, click on
    Loading...
    and then also
    Loading...

Responsive layouts​

info

The layouts are all responsive. This means that they adapt to the screen size of different devices. If you use the web component, the layouts adapt to the size of the assigned area.

You can change the size of the configurator window in the editor to check the effects.

You can also specify a special layout for mobile devices.

  • Go to the editor of your configurator
  • Click on the mobile symbol in the middle of the menu bar at the top. You will now see the mobile view.
  • Click on the pencil icon behind the Mobile/desktop selection
  • Remove the tick next to "No mobile layout"
  • Here you will see a selection of ready-made layouts for your configurator. You can choose one.
  • Finally, click on
    Loading...
    and then also
    Loading...

Create individual layout​

info

To use customized layouts, you need basic knowledge of HTML and CSS.

  • Open the layout selection again
  • To do this, switch to
    Loading...
    .
  • If you wish, you can import the currently selected layout here:
    Loading...
    .
  • Now you can customize your layout with some HTML and CSS.
  • Finally, click on
    Loading...
    and then also
    Loading...

Which elements are available here?​

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

<GroupsNavigation />

The header with the configuration steps.

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

The complete sidebar

  • design: accordion, topmenu or onlysidebar,
  • hideLoader: if "true", the progress bar is not displayed when calculating the validity. (With <ValuesLoading > a custom version can then be displayed)
  • slide is optional with default false. If it is true, the change to the next step is animated in the sidebar next step is animated in the sidebar.
  • columns is optional default
    `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

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

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

PROTECTED_2

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. xml-ph-0002@deepl.intern 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 als Default angezeigt. Im Extremfall enthält das Layout nur diese Komponente, dann werden ausschliesslich die Layouts der Schritte angezeigt.

So fügen Sie einem Schritt ein Layout hinzu:

  • Wechseln Sie zu dem Schritt
  • klicken Sie auf das Stift-Symbol hinter dem Namen des Reiters
  • Schalten Sie in der Seitenleiste Individuelles Gruppen-Design an
  • Erfassen Sie das Layout in dem nun erschienen Eingabefeld.

Mobile Layouts​

Ebenso wie das Desktop-Layout können Sie auch das Layout bestimmen, dass Ihr Konfigurator auf einem mobilen Gerät zeigt. Wählen Sie dazu einfach die mobile Ansicht im Editor und öffnen Sie dann die Layout-Auswahl

info

Derzeit stellen wir nur ein mobiles Standard-Layout zur Verfügung. Sie können aber bereits individuelle mobile Layouts erstellen.

Anpassen der Farben​

  • Gehen Sie zum Editor Ihres Konfigurators, wechseln Sie ggf. in der rechten Seitenleiste auf "Home"
  • Klicken Sie auf
    Loading...
  • Hier können Sie zunächst wählen, ob Sie ein
    Loading...
    oder ein dunkes bevorzugen.
  • Danach können Sie die verschiedenen Farben einstellen.
  • Klicken Sie auf
    Loading...

CSS nutzen​

Wenn Sie sich mit CSS auskennen und das Design Ihres Konfigurators damit noch genauer bestimmen wollen, gibt es zwei Möglichkeiten:

CSS Datei​

Sie können Sie eine CSS-Datei angeben.

  • Gehen Sie zum Editor Ihres Konfigurators, wechseln Sie ggf. in der rechten Seitenleiste auf "Home"
  • Klicken Sie auf
    Loading...
  • Scrollen Sie nach unten, bis Sie die CSS Einstellungen sehen.
  • Geben Sie die Adresse einer CSS-Datei an oder laden Sie ein hoch.
  • Klicken Sie auf
    Loading...

CSS im Layout​

Wie oben beschrieben, kann man individuelle Layouts in HTML erstellen.

Dort lässt sich ein Style-Tag einbauen, in dem ebenfalls CSS untergebracht werden kann:

PROTECTED_3

tip

CSS-Selektoren sollten immer die Klasse configurator, so that the changes are really limited to the configurator frontend remain limited to the configurator frontend:

Further technical explanations can be found in Entwickler-Dokumentation.

tip