> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Variablen

> Hier findest du alle grundlegenden Farb- und Stylesettings, die sich global auf dein Template auswirken.

## Export/Import/Vorlagen

Hier kannst du deine Einstellungen exportieren und wieder importieren oder Vorlagen in der Datenbank speichern, um so schnell zwischen Styles zu wechseln.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-export-import.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=5f3e9ac0a518651ec13ae370a9ba5db8" alt="Export Import Vorlagen" width="2360" height="544" data-path="images/niu-plus-variablen-export-import.jpg" />
  </Frame>
</div>

<Tabs>
  <Tab title="Vorlage speichern">
    Hier hast du die Möglichkeit die Einstellungen dieses Tabs als Vorlage in der Datenbank zu speichern, um so schnell zwischen Styles zu wechseln.

    <Steps>
      <Step title="Namen vergeben">
        Vergebe einen aussagekräftigen Namen für deine Vorlage
      </Step>

      <Step title="Speichern">
        Klicke auf *Vorlage speichern*
      </Step>
    </Steps>
  </Tab>

  <Tab title="Vorlage laden">
    Lade eine zuvor erstellte Vorlage durch Auswählen in dem Drop-Down-Menü und anschließendem Klick auf *Vorlage laden*.
  </Tab>

  <Tab title="Export">
    Falls du die Einstellungen nicht in deiner Datenbank speichern oder die Einstellungen auf eine andere Shopdomain übertragen willst, kannst du dir die Einstellungen ganz einfach exportieren und als Datei herunterladen.

    <Note>
      So kannst du bspw. alle Einstellungen auf deinem Staging-Shop vorbereiten und anschließend mit wenigen Klicks auf dein Live-System übertragen.
    </Note>

    Klicke hierfür einfach auf *Exportieren*.
  </Tab>

  <Tab title="Import">
    Importiere einen zuvor erstellten Export der Einstellungen. Ziehe die Datei einfach in den Kasten oder drücke *Browse*, um die Datei auf deinem Gerät zu suchen.
  </Tab>
</Tabs>

***

## Werkseinstellungen

Hier kannst du alle Einstellungen auf den Standard wieder zurücksetzen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-werkseinstellungen.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=febc0590431da71fae47b133b6bce813" alt="Werkseinstellungen" width="2354" height="242" data-path="images/niu-plus-variablen-werkseinstellungen.jpg" />
  </Frame>
</div>

<Warning>
  **Standard wiederherstellen**

  Mit Klick auf *Wiederherstellen*, werden alle Einstellungen in dem Tab "Variablen" auf den Standard zurückgesetzt.
</Warning>

***

## Grundfarben und Vorkonfiguration

Wähle deine Grundfarben aus. Das Template passt sich automatisch an deine Auswahl nach definierten Regeln an, die für ein ausgewogenes Ergebnis sorgen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-grundfarben.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=a6610ebc65bdb123e6f8192eb53eb148" alt="Grundfarben" width="2356" height="946" data-path="images/niu-plus-variablen-grundfarben.jpg" />
  </Frame>
</div>

<ParamField path="Automatische Anpassung" type="boolean">
  <Note>
    Lasse diese Einstellung aktiviert, damit sich zusammengehörige Farben gleichmäßig und automatisch anpassen.
  </Note>
</ParamField>

<ParamField path="Primärfarbe" type="color">
  Lege hier die Primärfarbe deines Shops fest. Diese beeinflusst standardmäßig unter anderem:

  Farbe der Topbar, Button-Farben und Bestseller-Artikelribbon.

  Außerdem wird die Farbe beim Farbgenerator berücksichtigt und wirkt sich auf die anderen automatisch gesetzten Farben aus.
</ParamField>

<ParamField path="Sekundärfarbe" type="color">
  Lege hier die Sekundärfarbe deines Shops fest. Diese beeinflusst standardmäßig:

  Sekundär-Button, Warenkorb-Button und New-Product-Ribbon für Artikel.

  Diese Farbe wird ebenfalls beim Farbgenerator berücksichtigt, allerdings mit weniger Einfluss als die Primärfarbe.
</ParamField>

<ParamField path="Tertiärfarbe" type="color">
  Lege die Tertiärfarbe deines Shops fest. Diese beeinflusst maßgeblich:

  Schrift- und Hintergrundfarbe sowie Farbe des Tertiär-Buttons.

  Diese Farbe wird ebenfalls beim Farbgenerator berücksichtigt und hat einen ähnlichen Einfluss wie die Primärfarbe - insbesondere auf Schrift- und Hintergrundstyles.
</ParamField>

### Akzentfarben

* **Accent 1** – Die erste Akzentfarbe für schnellen Zugriff in der CompanionApp und im OnPage-Composer
* **Accent 2** – Die zweite Akzentfarbe für schnellen Zugriff in der CompanionApp und im OnPage-Composer

<ParamField path="Meta Theme Color" type="color">
  Lege die Meta Theme Color deines Shops fest. Diese Farbe beeinflusst das Erscheinungsbild des Browsers auf mobilen Geräten, indem sie die Farbe der Adressleiste oder der Browser-Oberfläche anpasst, wenn die Seite geöffnet ist.

  <Info>
    Dies trägt zur einheitlichen Darstellung deiner Markenfarben über verschiedene Plattformen hinweg bei.

    [Mehr Informationen bei MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
  </Info>

  Zusätzlich kannst du per Dropdown zwischen "Standard" und "Custom" wählen. Bei "Custom" wird ein weiteres Eingabefeld freigeschaltet, in dem du einen eigenen Hexcode eintragen kannst.
</ParamField>

***

## Erweiterte Einstellungen

Für die meisten Fälle genügt die Einstellung der Grundfarben. Hier kannst du alle einzelnen Styles für jedes Element individuell anpassen, ohne die Grundfarben zu beeinflussen.

### Hintergrund- und Schriftfarbe

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-hintergrund-schrift-1.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=c02e1bda922ac5339ba49c062fca70b8" alt="Hintergrund und Schriftfarben" width="2354" height="544" data-path="images/niu-plus-variablen-hintergrund-schrift-1.jpg" />
  </Frame>
</div>

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-hintergrund-schrift-2.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=88dcc537629b5beb14278572d4c12c46" alt="Hintergrund und Schriftfarben 2" width="2348" height="642" data-path="images/niu-plus-variablen-hintergrund-schrift-2.jpg" />
  </Frame>
</div>

<ParamField path="Primär Hintergrund" type="color">
  Haupt-Hintergrundfarbe für primäre Flächen im Shop.
</ParamField>

<ParamField path="Primär Hintergrund 2" type="color">
  Zweite Hintergrundfarbe für primäre Flächen, z. B. für Abstufungen oder Verläufe.
</ParamField>

<ParamField path="Sekundär Hintergrund" type="color">
  Haupt-Hintergrundfarbe für sekundäre Flächen im Shop.
</ParamField>

<ParamField path="Sekundär Hintergrund 2" type="color">
  Zweite Hintergrundfarbe für sekundäre Flächen, z. B. für Abstufungen oder Verläufe.
</ParamField>

<ParamField path="Font primär 1" type="color">
  Schriftfarbe auf primärem Hintergrund.
</ParamField>

<ParamField path="Font primär 2 (Abstufung)" type="color">
  Abgestufte Schriftfarbe auf primärem Hintergrund, z. B. für weniger wichtigen Text.
</ParamField>

<ParamField path="Font sekundär 1" type="color">
  Schriftfarbe auf sekundärem Hintergrund.
</ParamField>

<ParamField path="Font sekundär 2 (Abstufung)" type="color">
  Abgestufte Schriftfarbe auf sekundärem Hintergrund, z. B. für weniger wichtigen Text.
</ParamField>

<ParamField path="Font Muted" type="color">
  Gedämpfte Schriftfarbe, z. B. für Platzhaltertexte oder deaktivierte Elemente.
</ParamField>

<Steps>
  <Step title="Farbe öffnen">
    Klicke auf den Pfeil neben der entsprechenden Farbe
  </Step>

  <Step title="Farbe wählen">
    Wähle deine gewünschte Farbe per Color-Picker oder trage den Hexcode ein
  </Step>

  <Step title="Anwenden">
    Drücke auf "Apply", um die Farbe anzuwenden
  </Step>

  <Step title="Speichern & Kompilieren">
    Vergiss nicht dein Theme zu kompilieren und die Einstellungen zu speichern
  </Step>
</Steps>

### Signalfarben

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-signalfarben.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=d2a58f0ab147117c89734f09b0ad8637" alt="Signalfarben" width="2346" height="538" data-path="images/niu-plus-variablen-signalfarben.jpg" />
  </Frame>
</div>

Hier kannst du die Signalfarben deines Shops anpassen. Diese werden hauptsächlich für Mitteilungen an den Nutzer verwendet.

* **Success-Farbe** – Wird angezeigt, wenn ein Artikel erfolgreich in den Warenkorb gelegt wurde
* **Info-Farbe** – Wird verwendet, wenn ein Nutzer beispielsweise sein Passwort falsch eingegeben hat
* **Warning-Farbe** – Für Warnhinweise und wichtige Mitteilungen
* **Error-Farbe** – Für Fehlermeldungen und kritische Hinweise

<Accordion title="Anpassung der Signalfarben">
  Du kannst per Dropdown entweder den Standard oder eine deiner hinterlegten Grundfarben wählen.

  Um eine andere Farbe zu verwenden, wähle in dem Dropdown "Custom", um den Colorpicker freizuschalten. Wähle deine gewünschte Farbe per Color-Picker oder trage den Hexcode ein und drücke anschließend auf "Apply".

  Vergiss nicht dein Theme zu kompilieren und die Einstellungen zu speichern!
</Accordion>

***

## Ribbons (Artikelsticker)

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-ribbons.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=be33034a7dce1115942b78dba1307c94" alt="Artikelribbons" width="2410" height="1086" data-path="images/niu-plus-variablen-ribbons.jpg" />
  </Frame>
</div>

### Border Radius

Hier kannst du die Kantenabrundung der Artikelribbons festlegen. Verwende eine CSS Auszeichnung, um den Border Radius festzulegen.

<CodeGroup>
  ```css Keine Abrundung theme={null}
  0
  ```

  ```css Gleichmäßig theme={null}
  5px
  ```

  ```css An jeder Seite einzeln theme={null}
  5px 5px 5px 5px
  ```

  ```css Individuell theme={null}
  0 10px 5px 0
  ```

  ```css Diagonal theme={null}
  15px 10px
  ```
</CodeGroup>

**Beispiele:**

`0` → Keine Abrundung, `5px 5px 5px 5px` → 5px an jeder Seite, `5px` → 5px an jeder Seite, `0 10px 5px 0` → Oben links 0, oben rechts 10px, unten rechts 5px, unten links 0, `15px 10px` → Oben links und unten rechts 15px, oben rechts und unten links 10px

### Ribbon-Farben

Außerdem kannst du hier die Farbe der einzelnen Artikelribbons/Artikelsticker festlegen. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen.

Um eine andere Farbe zu verwenden, wähle in dem Dropdown "Custom", um den Colorpicker freizuschalten.

Folgende Ribbons kannst du individuell einfärben:

* **Bestseller** – Standard: Primärfarbe
* **Special offer** – Standard: Dangerfarbe
* **New product** – Standard: Sekundärfarbe
* **Top offer** – Standard: Custom
* **Upcoming** – Standard: Infofarbe
* **Top reviews** – Standard: Primärhintergrund 2
* **Out of stock** – Standard: Custom
* **On stock** – Standard: Successfarbe
* **Preorder** – Standard: Warningfarbe

***

## Preis Ribbon

Wenn du in Kategorieseiteneinstellungen die Ribbondarstellung für den Preis aktiviert hast, kannst du hier die Farben und Styles wählen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-preis-ribbon.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=95576f4e7b2aba589720a1037e25d6d2" alt="Preis Ribbon" width="2360" height="382" data-path="images/niu-plus-variablen-preis-ribbon.jpg" />
  </Frame>
</div>

**Border Radius:** Hier kannst du die Kantenabrundung festlegen (siehe Border Radius Beispiele bei Ribbons).

**Preis Ribbon Farbe:** Wähle hier eine Farbe für das Ribbon. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen oder "Custom" für den Colorpicker wählen.

***

## Lagerstatus Farben

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-lagerstatus.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=7fa2501ec98a550a6c308f2cdded6833" alt="Lagerstatus Farben" width="2350" height="436" data-path="images/niu-plus-variablen-lagerstatus.jpg" />
  </Frame>
</div>

Hier kannst du die Farben für die verschiedenen Lagerstatus definieren:

* **Sofort verfügbar** – Farbe für verfügbare Artikel (Standard: Successfarbe)
* **Für dich Bestellbar** – Farbe für begrenzt verfügbare Artikel (Standard: Warningfarbe)
* **Vergriffen** – Farbe für nicht verfügbare Artikel (Standard: Dangerfarbe)

Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen oder "Custom" für den Colorpicker wählen.

***

## Logo, Navigation und Footer

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-logo-navigation.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=f75faeb4ad07580c8c2adace1e283926" alt="Logo und Navigation" width="2352" height="1654" data-path="images/niu-plus-variablen-logo-navigation.jpg" />
  </Frame>
</div>

### Logos

<Tabs>
  <Tab title="Primäres Logo">
    Hier kannst du dein primäres Logo hochladen. Das primäre Logo ist für die Desktop Version gedacht und als Fallback für die mobilen Varianten, falls kein mobiles Logo hinterlegt wurde.
  </Tab>

  <Tab title="Mobile Logo">
    Lade hier (falls vorhanden) dein mobiles Logo hoch. Das mobile Logo bietet die Möglichkeit ein kleineres oder kompakteres Logo als Alternative anzulegen.

    <Note>
      Gerade wenn du ein sehr breites Logo mit viel Text verwendest, eignet sich eine gekürzte Version für den mobilen Header.
    </Note>
  </Tab>
</Tabs>

### Größeneinstellungen

* **Höhe Nav Desktop** – Setze einen festen Wert für die Höhe der Nav für die Desktopansicht. Erlaubt sind CSS-Werte wie px, rem, vh oder %.
* **Höhe Nav Mobil** – Setze einen festen Wert für die Höhe der Nav für die mobile Version. Erlaubt sind CSS-Werte wie px, rem, vh oder %.
* **Höhe Logo Desktop** – Setze einen festen Wert für die Höhe des Logos für die Desktopansicht. Die maximale Höhe wird durch die Höhe der Nav gedeckelt.
* **Höhe Logo Mobile** – Setze einen festen Wert für die Höhe des Logos für die mobile Version. Die maximale Höhe wird durch die Höhe der Nav gedeckelt.

### Farbeinstellungen

Zusätzlich kannst du die Hintergrund- und Akzentfarben von Topbar, Navigation und Footer einzeln festlegen. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen oder "Custom" für den Colorpicker wählen.

* **Topbar Hintergrundfarbe** – Hintergrundfarbe der obersten Leiste
* **Nav Hintergrundfarbe** – Hintergrundfarbe der Hauptnavigation
* **Nav Kategorieleiste Hintergrundfarbe** – Hintergrundfarbe der Kategorieleiste innerhalb der Navigation
* **Nav Item Akzentfarbe** – Akzentfarbe für Navigationspunkte (z.B. bei Hover/Aktiv)
* **Footer Topbar Hintergrundfarbe** – Hintergrundfarbe der obersten Footer-Leiste
* **Footer Hintergrundfarbe** – Hintergrundfarbe des Hauptfooters
* **Footer Akzentfarbe** – Akzentfarbe für Elemente im Footer
* **Footer Bottombar Hintergrundfarbe** – Hintergrundfarbe der untersten Footer-Leiste

***

## Buttons

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-buttons.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=68ab08a5a3f1b6e536131b986836ba04" alt="Button Settings" width="2350" height="1749" data-path="images/niu-plus-variablen-buttons.jpg" />
  </Frame>
</div>

<ParamField path="Border Radius" type="string">
  Hier kannst du die Kantenabrundung festlegen (siehe Border Radius Beispiele bei Ribbons).
</ParamField>

### Schriftoptionen

**Headfont statt Bodyfont für Buttons verwenden:** Mit dieser Einstellung kannst du entscheiden, ob du die Schriftart für Überschriften (Headfont) anstelle der Fließtextschriftart (Bodyfont) für deine Buttons nutzen möchtest.

**Button Schrift in Caps Lock:** Bei Aktivierung dieser Einstellung wird der Buttontext ausschließlich in Großbuchstaben dargestellt.

### Button-Typen

* **Primär, Sekundär, Tertiär** – Drei separate Gestaltungsmöglichkeiten für deine Buttons, deren Aktion beim Drücken noch von dir ausgewählt werden kann
* **Warenkorb-Buttons** – Warenkorb, zur Kasse und Quickbuy Button
* **Footer Topbar Button** – Design für die Buttons in der Fußzeile bzw. Kopfzeile
* **Accent Button 1** – Zusätzliche Gestaltungsmöglichkeit für Buttons mit Akzentfarbe
* **Consent & Load more** – Buttons im Cookie-Banner und für "Mehr laden"

<ParamField path="Buttonfarbe" type="color">
  Außerdem kannst du die Farbe der verschiedenen Buttons hier anpassen. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen oder "Custom" für den Colorpicker wählen.
</ParamField>

<ParamField path="Buttontyp" type="select">
  Zusätzlich kannst du den Button-Typ der einzelnen Buttons anpassen:
</ParamField>

* **Full** – Button ausgefüllt mit Farbe
* **Outlined** – Button umrandet mit Farbe
* **Flat** – Weder Füllung noch Umrandung, nur die Schrift ist eingefärbt
* **Link** – Button wird wie ein reiner Textlink dargestellt

<ParamField path="Button-Stil (Consent & Load more)" type="select">
  Für die Consent-Buttons ("Alles Akzeptieren", "Einmal erlauben", "Konfigurieren", "Alles Ablehnen") und den Load-more-Button wählst du per Dropdown, welcher der zuvor definierten Button-Stile (z. B. Sekundärbutton) verwendet werden soll.
</ParamField>

***

## Eingabefelder

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-eingabefelder.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=149ce65e036fbf1c038ebe4ef78e4361" alt="Eingabefelder" width="2352" height="226" data-path="images/niu-plus-variablen-eingabefelder.jpg" />
  </Frame>
</div>

**Border Radius:** Hier kannst du die Kantenabrundung für Eingabefelder festlegen (siehe Border Radius Beispiele bei Ribbons).

***

## Containersettings

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-variablen-containersettings.jpg?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=d933a0f5357ce980fd5c516bb8273c5a" alt="Container Settings" width="2244" height="478" data-path="images/niu-plus-variablen-containersettings.jpg" />
  </Frame>
</div>

**Container Breite:** Die Breite des Standard-Containers. Darin liegt der größte Teil des Shops – Kategorieseiten, Produktdetailseiten, Content. Der bisherige Wert ist 1250px.

**Container-XL Breite:** Die Breite des großen Containers. Darin liegen vor allem Header und Footer – Navigation, USP-Zeile und Fußbereich –, außerdem Warenkorb, Konto und Checkout. Das begrenzt für besonders große Bildschirme die maximale Breite. Der Standard liegt bei 1650px.

**Breiten angleichen:** Setzt die Container-XL Breite auf die Container Breite, damit Navigation und Inhalt in einer Flucht stehen. Bewährt haben sich 1440px für beide.

<Warning>
  Das verändert das Layout auf allen Seiten – bei einem laufenden Shop vorher eine Vorlage als Sicherung speichern.
</Warning>

***

## Produktboxen

Hier werden die wichtigsten Informationen zu deinem Produkt als kurze Übersicht angezeigt. Entscheide dabei, wie viele Zeilen des Produkttitels bzw. der Produktbeschreibung in deinen Produktboxen ersichtlich sind.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-produktboxen.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=8177eb8a8b4733b0703c3d5e22c6a998" alt="Produktboxen" width="2360" height="330" data-path="images/niu-plus-variablen-produktboxen.jpg" />
  </Frame>
</div>

<ParamField path="Anzahl Zeilen Produkttitel" type="number">
  Legt fest, wie viele Zeilen des Produkttitels in der Produktbox maximal angezeigt werden, bevor der Text abgeschnitten wird.
</ParamField>

<ParamField path="Anzahl Zeilen Beschreibung" type="number">
  Legt fest, wie viele Zeilen der Produktbeschreibung in der Produktbox maximal angezeigt werden, bevor der Text abgeschnitten wird.
</ParamField>

***

## Font Settings

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-font-settings.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=2db76f82a161bde01e79dff14d20b2fd" alt="Font Settings" width="2356" height="1724" data-path="images/niu-plus-variablen-font-settings.jpg" />
  </Frame>
</div>

<Note>
  Wähle hier deine Schriftarten und Styles aus. Wähle Pagespeed optimierte Optionen, wenn dir die simulierten Abstufungen der Fontweights ausreichen und du mehr Wert auf einen schlanken Ladevorgang legst.

  In der Regel genügt der Browsercache, um deinen Kunden ein hervorragendes Ergebnis zu liefern auch mit mehreren Fonts. Wenn du gar keine Fonts auswählen willst, nutze die System Default Fonts, um die Standardfonts der jeweiligen User zu verwenden.
</Note>

### Font Display Settings

Die Font Display Settings entscheiden darüber, wie Fonts geladen werden:

<Tabs>
  <Tab title="Swap">
    Font wechselt, sobald sie geladen wurde - kann zu Layout-Shifts führen
  </Tab>

  <Tab title="Optional">
    Gewählte Font wechselt nicht, wenn sie nicht rechtzeitig verfügbar ist - verhindert Layout-Shifts
  </Tab>
</Tabs>

<Info>
  In der Regel reicht der Browsercache, um alle Fonts rechtzeitig zur Verfügung zu stellen.
</Info>

### Font Headlines

Wähle hier die Schriftart für deine Überschriften. Du kannst eine der mitgelieferten Schriftarten oder Custom wählen, um deine eigene Schriftart zu nutzen.

**Mitgelieferte Schriftarten:**

* System Default Serif
* System Default Sans-Serif
* Dyslexia (barrierefreie Schriftart)
* Custom (auch Pagespeed optimiert)

Alle folgenden Schriftarten sind zusätzlich Pagespeed optimiert wählbar:

| | | |
| - | - | - |
| Bahnschrift | Barlow | Bebas Neue |
| IBM Plex Sans | Inter | Lato |
| Merriweather | Montserrat | Noto Sans |
| Nunito | Open Sans | Oswald |
| Playfair Display | Poppins | Raleway |
| Roboto | Roboto Condensed | Rubik |
| Signika | | |

<Tip>
  Die "Pagespeed optimiert"-Varianten simulieren Schriftschnitte (Fontweights), anstatt sie einzeln nachzuladen, das spart Ladezeit.
</Tip>

<Note>
  Dyslexia hat nicht jeden Schriftschnitt: vorhanden sind nur 400 und 700. Wählst du z. B. 800 (ExtraBold), rendert die Schrift stattdessen mit 700.
</Note>

**Custom Headlines Font Name:** Custom Fonts musst du manuell im Stylesheet einbinden. Trage hier den exakten Namen ein, wie du die font-family bezeichnet hast.

**Headline Fontweight:** Schriftdicke der Überschriften.

### Font Bodytext

Wähle hier die Schriftart für deine Textkörper. Du kannst eine der mitgelieferten Schriftarten oder Custom wählen, dieselbe Auswahl wie unter [Font Headlines](#font-headlines) beschrieben.

**Custom Bodytext Font Name:** Custom Fonts musst du manuell im Stylesheet einbinden. Trage hier den exakten Namen ein, wie du die font-family bezeichnet hast.

**Bodytext Fontweight:** Schriftdicke des Fließtexts.

### Display Font

Wähle hier die Schriftart für deinen Schaugrößentext, dieselbe Auswahl wie unter [Font Headlines](#font-headlines) beschrieben.

**Display Fontweight:** Schriftdicke des Schaugrößentexts.

### Navigation

<ParamField path="Nav Items Level 1 Fontweight" type="number">
  Schriftdicke für Hauptnavigationspunkte.
</ParamField>

### Responsive Fontsizes

**Responsive Fontsizes nutzen:** Wenn aktiviert, passen sich die Schriftgrößen dynamisch an die Displaygröße an, wodurch eine optimale Lesbarkeit auf verschiedenen Geräten gewährleistet wird.

<Accordion title="Skalierungsoptionen">
  **Base Fontsize Skalierungsfaktor**

  Bei aktivierter responsiver Schriftgröße kannst du hier einen Skalierungsfaktor wählen:

  **Standardwert:** 1. **Wert \< 1** verkleinert die Schriftgröße, **Wert > 1** vergrößert die Schriftgröße.

  **Base Desktop Breite**

  Wähle hier die Basis-Desktopbreite in px. Von diesem Wert aus skaliert die Schriftgröße vom Maximalwert herunter bis zum empfohlenen Minimalwert.

  **Skalierungsfaktor**

  Hier kannst du einstellen, wie stark die einzelnen Schriftgrößen zueinander skalieren, basierend auf der Basis-Schriftgröße.
</Accordion>

### Vorschau & Testing

**Kursiv Preview:** Aktiviere diese Einstellung, um die Schriften in der Vorschau in kursiv angezeigt zu bekommen.

<Warning>
  Diese Einstellung hat keinen Einfluss auf das Front-End deines Shops - nur auf die Vorschau in den Einstellungen.
</Warning>

**Schriftdicke Preview:** Hier siehst du die Vorschau deiner gewählten Schrifteinstellungen, welche automatisch aktualisiert wird, ohne dass du auf „Speichern" oder „Theme kompilieren" drücken musst..

<Info>
  **Bezeichnungen in der Vorschau:**

  **D1-D6:** Display-Font, **H1-H6:** Headline-Font

  Die aktuelle Bildschirmbreite wird automatisch anhand deiner gewählten Browser-Fenstergröße aktualisiert.
</Info>

***

## Deine Style-Vorschau

Hier siehst du eine Zusammenfassung deiner erfassten Styles auf einen Blick.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/4ymcTXXIJmMUSneM/images/niu-plus-variablen-style-vorschau.jpg?fit=max&auto=format&n=4ymcTXXIJmMUSneM&q=85&s=fb38cb7d4f6a1e313332a76ee992590f" alt="Style-Vorschau" width="2314" height="2328" data-path="images/niu-plus-variablen-style-vorschau.jpg" />
  </Frame>
</div>

<Info>
  Die Vorschau fasst alle wichtigen Styles zusammen: Grundfarben (Primary, Secondary, Tertiary, Accent 1/2), Signalfarben (Info, Success, Warning, Danger), Meta Theme, Headline-Beispiele auf hellem und dunklem Hintergrund, Button-Varianten sowie Beispiele für Success-, Warning-, Info- und Error-Meldungen.
</Info>

<Tip>
  Nutze diesen Abschnitt, um schnell zu prüfen, ob deine Farbkombination stimmig wirkt, bevor du das Theme final kompilierst.
</Tip>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.