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

### Automatische Anpassung

<Note>
  Lasse diese Einstellung aktiviert, damit sich zusammengehörige Farben gleichmäßig und automatisch anpassen.
</Note>

### Primärfarbe

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.

### Sekundärfarbe

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.

### Tertiärfarbe

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.

### Akzentfarben

<CardGroup cols={2}>
  <Card title="Accent 1">
    Die erste Akzentfarbe für schnellen Zugriff in der CompanionApp und im OnPage-Composer
  </Card>

  <Card title="Accent 2">
    Die zweite Akzentfarbe für schnellen Zugriff in der CompanionApp und im OnPage-Composer
  </Card>
</CardGroup>

### Meta Theme 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>

***

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

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

<CardGroup cols={2}>
  <Card title="Success-Farbe" icon="circle-check">
    Wird angezeigt, wenn ein Artikel erfolgreich in den Warenkorb gelegt wurde
  </Card>

  <Card title="Info-Farbe" icon="circle-info">
    Wird verwendet, wenn ein Nutzer beispielsweise sein Passwort falsch eingegeben hat
  </Card>

  <Card title="Warning-Farbe" icon="triangle-exclamation">
    Für Warnhinweise und wichtige Mitteilungen
  </Card>

  <Card title="Error-Farbe" icon="circle-exclamation">
    Für Fehlermeldungen und kritische Hinweise
  </Card>
</CardGroup>

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

***

## 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:

<CardGroup cols={3}>
  <Card title="Auf Lager" icon="check">
    Farbe für verfügbare Artikel
  </Card>

  <Card title="Wenige verfügbar" icon="clock">
    Farbe für begrenzt verfügbare Artikel
  </Card>

  <Card title="Nicht verfügbar" icon="xmark">
    Farbe für nicht verfügbare Artikel
  </Card>
</CardGroup>

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

<CardGroup cols={2}>
  <Card title="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 %.
  </Card>

  <Card title="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 %.
  </Card>

  <Card title="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.
  </Card>

  <Card title="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.
  </Card>
</CardGroup>

***

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

### Border Radius

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

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

<CardGroup cols={3}>
  <Card title="Primär, Sekundär, Tertiär" icon="1">
    Drei separate Gestaltungsmöglichkeiten für deine Buttons, deren Aktion beim Drücken noch von dir ausgewählt werden kann
  </Card>

  <Card title="Warenkorb-Buttons" icon="cart-shopping">
    Warenkorb, zur Kasse und Quickbuy Button
  </Card>

  <Card title="Footer Topbar Button" icon="arrow-down">
    Design für die Buttons in der Fußzeile bzw. Kopfzeile
  </Card>

  <Card title="Consent & Load more" icon="cookie">
    Buttons im Cookie-Banner und für "Mehr laden"
  </Card>
</CardGroup>

### Buttonfarbe

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.

### Buttontyp

Zusätzlich kannst du den Button-Typ der einzelnen Buttons anpassen:

<Tabs>
  <Tab title="Full">
    Button ausgefüllt mit Farbe
  </Tab>

  <Tab title="Outlined">
    Button umrandet mit Farbe
  </Tab>

  <Tab title="Plain">
    Nur Text und keine Farbe
  </Tab>
</Tabs>

***

## 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/wkx7UFt_dWh7NxNv/images/niu-plus-variablen-container.jpg?fit=max&auto=format&n=wkx7UFt_dWh7NxNv&q=85&s=20018cbedcc8c3dcc5ae85bfa29fc465" alt="Container Settings" width="2352" height="288" data-path="images/niu-plus-variablen-container.jpg" />
  </Frame>
</div>

**Container-XL Breite:** Hier entscheidest du, wie breit die größte Containerbreite sein soll. Das begrenzt für besonders große Bildschirme die maximale Breite der Container, in denen Elemente wie die Navigation und der Footer liegen.

<Info>
  Der Standard liegt bei 1650px.

  Um deinen Content genauso breit wie Nav und Footer zu machen, vergebe für den Container-XL und den Container-Fluid-XL die gleiche Breite.
</Info>

***

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

***

## 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.

**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.

**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.

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

### Navigation

**Nav Items Level 1 Fontweight:** Schriftdicke für Hauptnavigationspunkte.

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

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