Überschriftengröße in Shopify ändern (2026)

Das Wichtigste in Kürze

Globale Überschriftengrößen werden im Theme-Editor unter Theme-Einstellungen > Typografie festgelegt.

Die meisten Themes bieten einen Schieberegler (Slider) für die Überschriften-Skalierung, der alle Überschriftengrößen proportional anpasst.

Für die individuelle Anpassung einzelner Überschriften (H1 vs. H2 vs. H3 in verschiedenen Größen) benötigst du CSS im Assets-Ordner deines Themes.

Für CSS-Änderungen muss die assets/base.css oder eine ähnliche Datei bearbeitet werden – dupliziere vorher unbedingt dein Theme.

Fudge kann das CSS für dich schreiben und anwenden – basierend auf einer einfachen Textbeschreibung.

Der Theme-Editor von Shopify gibt dir die Kontrolle über die Schriftarten der Überschriften und eine allgemeine Größenskalierung. Für exakte, individuelle Überschriftengrößen musst du jedoch CSS hinzufügen. Hier erfährst du, wie beides funktioniert.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir haben auch Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.

Methode 1 – Überschriftengröße im Theme-Editor ändern

Dies ändert die globale Überschriften-Skalierung in deinem gesamten Store.

Siehe auch: Schriftfarbe in Shopify ändern.

Schritt 1. Gehe zu Onlineshop > Themes > Customizer.

Schritt 2. Scrolle in der linken Seitenleiste nach unten und klicke auf Theme-Einstellungen.

Schritt 3. Öffne den Bereich Typografie.

Schritt 4. Suche nach den Einstellungen für die Überschriften-Schriftart. Die meisten Themes enthalten einen Schieberegler für Überschriftengröße oder Skalierung der Überschriften. Ziehe ihn, um die Größe aller Überschriften proportional zu erhöhen oder zu verringern.

Schritt 5. Klicke auf Speichern.

Was dies steuert: Dies passt den Basis-Skalierungswert für Überschriften an, der vom CSS deines Themes verwendet wird. Es ist ein Multiplikator – ein größerer Wert macht alle Überschriften im Verhältnis zum Textkörper größer.

Was es nicht steuert: Das Größenverhältnis zwischen H1, H2 und H3. Dafür benötigst du CSS.

Methode 2 – Individuelle Überschriftengrößen mit CSS ändern

Wenn du H1 in einer Größe, H2 in einer anderen und H3 in einer weiteren Größe benötigst, reicht der Theme-Editor allein nicht aus. Du musst CSS-Overrides hinzufügen.

Schritt 1. Dupliziere zuerst dein Theme. Gehe zu Onlineshop > Themes > Aktionen > Duplizieren. Das ist dein Sicherheitsnetz.

Schritt 2. Gehe bei deinem aktiven Theme auf Aktionen > Code bearbeiten.

Schritt 3. Öffne im Datei-Browser den Ordner Assets. Suche nach base.css, theme.css oder einem ähnlich benannten Haupt-Stylesheet.

Schritt 4. Scrolle zum Ende der Datei und füge deine Regeln für die Überschriftengrößen hinzu:

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

Schritt 5. Klicke auf Speichern.

Responsive Größen verwenden

Für eine Storefront, die auf dem Handy gut aussieht, verwende eine Media Query, um kleinere Größen für kleine Bildschirme festzulegen:

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

Die richtige CSS-Datei finden

Der Dateiname variiert je nach Theme:

Theme	Haupt-CSS-Datei
Dawn	`base.css`
Debut	`theme.css`
Brooklyn	`application.css.liquid`
Eigene Themes	Suche unter Assets nach der größten `.css`-Datei

Wenn du dir unsicher bist, welche Datei du bearbeiten sollst, durchsuche den Code nach einer bestehenden h1- oder h2-Regel, um zu finden, wo die Überschriften-Styles bereits definiert sind.

Du möchtest präzise Überschriftengrößen, ohne selbst CSS zu schreiben?

Try Fudge for Free

Welche Einheiten für Schriftgrößen verwenden?

rem ist die empfohlene Einheit für Schriftgrößen. Sie bezieht sich auf die Basis-Schriftgröße des Browsers (normalerweise 16px), was bedeutet:

1rem = 16px
1.5rem = 24px
2rem = 32px
2.5rem = 40px

Vermeide px für Überschriften – es skaliert nicht mit den Barrierefreiheits-Einstellungen des Browsers. Rem tut das.

Fudge für Änderungen der Überschriftengröße nutzen

Wenn du dich nicht wohl dabei fühlst, CSS-Dateien direkt zu bearbeiten, kann Fudge das übernehmen. Beschreibe einfach, was du möchtest:

“Mache H1-Überschriften auf dem Desktop 2.5rem und auf dem Handy 1.8rem groß. Mache H2-Überschriften 2rem.”

Fudge identifiziert die richtige Datei, schreibt das CSS und zeigt dir einen Entwurf zur Überprüfung an, bevor etwas live geht. Kein Risiko, deine bestehenden Styles zu beschädigen.

Kurzübersicht

Ziel	Methode
Alle Überschriftengrößen zusammen anpassen	Theme-Editor > Theme-Einstellungen > Typografie > Größenskala für Überschriften
Spezifische Größe für H1, H2, H3 separat festlegen	CSS in assets/base.css
Responsive Überschriftengrößen für Mobilgeräte	CSS mit Media Queries

FAQ

Warum ändert der Slider für die Überschriften-Skalierung meine H1 nicht?

Einige Themes wenden die Größenskalierung nur auf bestimmte, vom Theme definierte Klassen an (z. B. .h0, .h1-display) und nicht auf das reine HTML-Element <h1>. Wenn deine H1 nicht auf den Slider reagiert, untersuche das Element in den DevTools, um zu sehen, welche Klasse die Größe steuert. Aktualisiere diese Klasse dann via CSS oder lass Fudge die Anpassung vornehmen.

Welche Überschriftengröße sollte eine H1 auf einer Shopify-Produktseite haben?

Ein gängiger Bereich ist 1.75rem–2.5rem auf dem Desktop und 1.4rem–1.8rem auf Mobilgeräten. Größere H1 wirken zwar modern (design-forward), verbessern aber selten die Conversion – wichtiger sind Hierarchie und Lesbarkeit. Die Schrift sollte sowohl auf 16-Zoll- als auch auf 5-Zoll-Displays gut lesbar bleiben.

Kann ich auf verschiedenen Seitentypen unterschiedliche Überschriftengrößen haben?

Ja. Shopify fügt dem <body>-Tag Template-spezifische Klassen hinzu (z. B. template-product, template-collection). Grenze dein CSS wie folgt ein: body.template-product h1 { font-size: 2rem; }, um Größen pro Template anzuwenden, ohne andere Seiten zu beeinflussen.

Sollten Überschriften auf Mobilgeräten und auf dem Desktop gleich groß sein?

Nein. Eine für den Desktop angepasste Überschrift wirkt auf Mobilgeräten oft viel zu groß – reduziere sie mit einer Media Query um etwa 30–50 %. Ohne responsives Sizing drücken große Desktop-Überschriften auf Smartphones den Content in den ,Below the fold‘-Bereich (außerhalb des sofort sichtbaren Bereichs) und schaden der Mobile-Conversion.

Wirkt sich die Änderung der Überschriftengröße auf SEO aus?

Nein. SEO hängt von der Überschriften-Hierarchie (eine H1 pro Seite, logische H2/H3-Verschachtelung) und den Keywords in den Überschriften ab – nicht von der visuellen Größe. Du kannst Schriftgrößen frei ändern, ohne die Rankings zu beeinträchtigen, solange die zugrunde liegende Tag-Struktur intakt bleibt.