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

# Header-Modul

> Erfahre, wie du den Header in deinem Upcart Drawer aktualisierst, einschließlich Logo, Titelstilen, Schließen-Schaltfläche und Layout.

<div id="overview">
  # Übersicht
</div>

Mit dem Header-Modul kannst du den oberen Bereich deines Upcart Drawers mit dem Logo deiner Marke, Titeltext, Layout, Hintergrundfarbe und Schließen-Schaltfläche anpassen. Visuelle Steuerelemente machen es einfach, deinen Header zu gestalten, ohne exakte Pixelgrößen definieren zu müssen.

<div id="header-module-settings">
  # **Einstellungen des Header-Moduls**
</div>

<div id="general">
  ## **Allgemein**
</div>

**Height** wechselt zwischen **Slim** und **Tall**, um den vertikalen Raum zu steuern. **Bottom border** ist entweder **None** oder **Thin**. **Background color** akzeptiert einen Hex-Code oder den integrierten Farbwähler und unterstützt Transparenz.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Allgemeine Einstellungen des Upcart-Header-Moduls mit Steuerelementen für Höhe und Hintergrundfarbe neben einer Warenkorbvorschau" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Titel**
</div>

Es gibt **drei Möglichkeiten**, den Header-Titel deines Cart Drawers festzulegen: das Standard-Titel-Styling deines Themes übernehmen, das Logo deines Shops anzeigen oder vollständig benutzerdefinierte Textstile erstellen. Jede Methode bietet Flexibilität je nach deinen Designanforderungen.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Titeloptionen des Upcart-Header-Moduls: Theme-Titel übernehmen, Markenlogo oder benutzerdefinierte Textstile" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Von Theme-Titeln übernehmen
</div>

Diese Option verwendet die Standard-Überschriftenstile deines Themes und hilft dir, das Design visuell konsistent mit dem Rest deiner Website zu halten. Du kannst über das Textfeld deinen eigenen Titel hinzufügen und mit `{{cart_quantity}}` dynamisch die Anzahl der Warenkorbartikel einfügen. Die Textausrichtung kann auf Side oder Center gesetzt werden, und du kannst die passende Überschriftenebene H2, H3 oder H4 basierend auf der Inhaltsstruktur deines Shops auswählen.

<div id="brand-logo">
  ## Markenlogo
</div>

Wenn du lieber ein Markenlogo anstelle von Text verwenden möchtest, kannst du das Logo deines Shops direkt in diesem Bereich hochladen. Wähle, ob das Logo an der Seite (Side) oder mittig (Center) ausgerichtet wird, und skaliere es mit dem Schieberegler **Logo size**, der von 14 px bis 48 px reicht. Es gibt keine erzwungene Begrenzung für die hochgeladene Datei, aber eine PNG-Datei wird für saubere Transparenz und scharfe Kanten empfohlen. JPEGs werden ebenfalls unterstützt, können aber Hintergrundrauschen enthalten oder Logo-Details verschlechtern. Achte aus Performance-Gründen darauf, die Dateigrößen optimiert zu halten.

* Wir empfehlen die Verwendung einer **PNG**-Datei für beste Qualität und Unterstützung transparenter Hintergründe.
* JPEGs funktionieren auch, sehen aber möglicherweise nicht so sauber aus, besonders wenn dein Logo einen Hintergrund oder feine Details hat.

<div id="define-text-styles">
  ## Textstile definieren
</div>

Die Auswahl der Option Text gibt dir volle Kontrolle über das Styling des Titels, unabhängig vom Theme deines Shops. Du kannst einen beliebigen benutzerdefinierten Titel eingeben und `{{cart_quantity}}` für dynamische Aktualisierungen einfügen. Die Textausrichtung kann auf Side oder Center gesetzt werden, mit Optionen, die Schriftstärke auf Normal, Semibold oder Bold zu ändern. Die Schriftgröße ist mit einem visuellen Schieberegler von 14 px bis 48 px einstellbar, und du kannst optional eine Textfarbenüberschreibung anwenden.

<div id="close-button">
  # Schließen-Schaltfläche
</div>

Die Schließen-Schaltfläche ist anpassbar, um zum Design deines Shops zu passen. **Location** platziert sie auf der linken (Left) oder rechten (Right) Seite des Drawers. **Background**, **Icon** und **Border** akzeptieren jeweils eine Farbe plus eine separate Hover-Farbe. **Icon size** ist Small, Medium oder Large, und **Icon thickness** ist Normal oder Thick. **Border** ist None, Thin, Normal oder Thick.

<Note>
  Die Felder für Rahmenfarbe und Rahmen-Hover-Farbe sind deaktiviert, solange **Border** auf **None** eingestellt ist. Wähle zuerst eine Rahmenbreite und lege dann die Farben fest.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Einstellungen der Schließen-Schaltfläche des Upcart-Header-Moduls für Position, Farben, Symbolgröße und Rahmen" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # Benutzerdefiniertes Template
</div>

In Version 2.0 des Header-Moduls erscheint unterhalb der Einstellungen ein Code-Editor **Custom template** mit einem einzelnen **Full**-Template, das das gesamte Modul abdeckt. Es verwendet React-basiertes JSX, und du musst zuerst **Access custom templates** unter **Settings > Cart settings > Advanced Settings** im Cart Editor aktivieren. Siehe [Ein benutzerdefiniertes Template einrichten](/de/upcart/setting_up_a_custom_template_in_upcart).

<div id="tips">
  # Tipps
</div>

* **Du möchtest präzise Abstände oder Größen?** Verwende [Custom CSS](/de/upcart/custom_css) für volle Kontrolle jenseits der Schieberegler, ideal für exakte Außenabstände, Innenabstände oder Logo-Skalierung.
* **Teste auf Desktop und Mobilgeräten.** Header-Elemente wie Text, Logo und Schaltflächen können auf verschiedenen Bildschirmgrößen unterschiedlich dargestellt werden
* **Verwende korrekte Überschriftenebenen.** Die Wahl der richtigen Überschrift (H2, H3, H4) hilft bei Barrierefreiheit und SEO. Passe sie an die Struktur der Inhalte deines Shops an.

Weitere Möglichkeiten, deinen Warenkorb zu personalisieren, findest du in unseren [Upcart-Hilfedokumenten](/de). Wenn du individuelle Änderungen benötigst, empfehlen wir, dich an einen [Shopify-Experten](https://www.shopify.com/ca/partners/directory) zu wenden.