Skip to main content

​
Übersicht

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.

​
Einstellungen des Header-Moduls

​
Allgemein

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. Allgemeine Einstellungen des Upcart-Header-Moduls mit Steuerelementen für Höhe und Hintergrundfarbe neben einer Warenkorbvorschau

​
Titel

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. Titeloptionen des Upcart-Header-Moduls: Theme-Titel übernehmen, Markenlogo oder benutzerdefinierte Textstile

​
Von Theme-Titeln übernehmen

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

​
Textstile definieren

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.

​
Schließen-Schaltfläche

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.
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.
Einstellungen der Schließen-Schaltfläche des Upcart-Header-Moduls für Position, Farben, Symbolgröße und Rahmen

​
Benutzerdefiniertes Template

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.

​
Tipps

  • Du möchtest präzise Abstände oder Größen? Verwende 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. Wenn du individuelle Änderungen benötigst, empfehlen wir, dich an einen Shopify-Experten zu wenden.