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

Wichtigste Erkenntnisse

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

Die meisten Themes bieten einen Schieberegler, der alle Überschriften proportional anpasst.

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

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

Fudge kann das CSS für dich schreiben und anwenden – eine Beschreibung in einfachen Worten genügt.

Der Shopify Theme Editor gibt dir die Kontrolle über die Schriftarten deiner Überschriften und eine allgemeine Größenskalierung. Für präzise, individuelle Größen je Überschrift musst du CSS hinzufügen. Hier erfährst du, wie beides funktioniert.

Warum du uns vertrauen kannst

Wir haben bereits hunderte Shopify Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.8 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 wieder in einer anderen Größe brauchst – der Theme Editor allein reicht dafür 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 Dateibrowser 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

Damit dein Storefront auch mobil gut aussieht, nutze 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`
Benutzerdefinierte 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. So findest du heraus, wo die Überschriften-Styles bereits definiert sind.

Willst du exakte Überschriftengrößen, ohne selbst CSS zu schreiben?

Try Fudge for Free

Verwandt: Mobile Abstände in Shopify verbessern.

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 gemeinsam anpassen	Theme Editor > Theme-Einstellungen > Typografie > Überschriften-Skalierung
Spezifische Größe für H1, H2, H3 separat festlegen	CSS in assets/base.css
Responsive Überschriftengrößen für mobile Geräte	CSS mit Media Queries

FAQ

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

Manche Themes wenden die Überschriften-Skalierung nur auf spezifische, im Theme definierte Überschriften-Klassen an (z. B. .h0, .h1-display) und nicht auf das reine <h1>-HTML-Element. Wenn dein 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 per CSS oder lass Fudge das für dich übernehmen.

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

Ein üblicher Bereich ist 1.75rem–2.5rem auf dem Desktop und 1.4rem–1.8rem auf Mobilgeräten. Größere H1-Überschriften sehen zwar designorientiert aus, verbessern aber selten die Conversion – wichtiger sind Hierarchie und Lesbarkeit. Achte darauf, dass sie sowohl auf 16-Zoll- als auch auf 5-Zoll-Viewports gut lesbar bleiben.

Kann ich verschiedene Überschriftengrößen für verschiedene Seitentypen festlegen?

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

Sollten Überschriften auf dem Handy und dem Desktop gleich groß sein?

Nein. Eine für den Desktop dimensionierte Überschrift wirkt auf dem Handy oft viel zu groß – reduziere sie mit einer Media Query um etwa 30–50 %. Ohne responsives Sizing drücken große Desktop-Überschriften den Content auf Smartphones nach unten (below the fold) und schaden der mobilen Conversion.

Beeinflusst eine Änderung der Überschriftengröße das SEO?

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