So änderst du die Schriftgröße von Überschriften in Shopify (2026)

Wichtigste Erkenntnisse

• Globale Überschriftengrößen werden unter Theme-Editor > Theme-Einstellungen > Typografie festgelegt.
• Die meisten Themes bieten einen Schieberegler für die Überschriftenskalierung, der alle Überschriften proportional anpasst.
• Für eine individuelle Steuerung der Überschriften (H1 vs. H2 vs. H3 in verschiedenen Größen) brauchst du CSS im Assets-Ordner deines Themes.
• CSS-Änderungen erfordern die Bearbeitung von assets/base.css oder Ähnlichem – dupliziere zuerst dein Theme.
• Fudge kann das CSS für dich schreiben und anwenden – du musst nur in einfachen Worten beschreiben, was du willst.

Um die Schriftgröße von Überschriften in Shopify zu ändern, gehe zu Onlineshop > Themes > Anpassen > Theme-Einstellungen > Typografie und ziehe den Schieberegler für die Überschriftenskalierung (Heading scale). Für präzise Größen pro Überschrift musst du CSS hinzufügen.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

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

Das ändert die globale Skalierung der Überschriften in deinem gesamten Store.

Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.

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

Schritt 3. Öffne den Abschnitt Typografie.

Schritt 4. Finde die Einstellungen für die Überschriftenschriftart. Die meisten Themes enthalten einen Schieberegler für Überschriftengröße (Heading size) oder Überschriftenskalierung (Heading scale). Ziehe ihn, um die Größe aller Überschriften proportional zu vergrößern oder zu verkleinern.

Schritt 5. Klicke auf Speichern.

Was das steuert: Dies passt die grundlegende Überschriftenskalierung an, die vom CSS deines Themes verwendet wird. Es ist ein Multiplikator – ein größerer Wert macht alle Überschriften im Verhältnis zu deinem Fließtext größer.

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

Um die Schriftart der Überschriften selbst zu ändern, sieh dir an, wie man Schriftarten in Shopify aktualisiert.

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

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

Schritt 1. Dupliziere zuerst dein Theme. Gehe zu Onlineshop > Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren. Das ist dein Sicherheitsnetz.

Schritt 2. Klicke beim Duplikat auf das Drei-Punkte-Menü (…) und dann auf 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öße 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:

Wenn du dir nicht sicher bist, welche Datei du bearbeiten sollst, durchsuche die Codebasis nach einer bestehenden h1- oder h2-Regel, um zu finden, wo die Überschriftenstile bereits definiert sind.

Für kompaktere Layouts auf Smartphones sieh dir an, wie du die mobilen Abstände in Shopify verbesserst.

Welche Einheiten für Schriftgrößen verwenden?

rem ist die empfohlene Einheit für Schriftgrößen. Sie ist relativ zur Basis-Schriftgröße des Browsers (meistens 16px), das bedeutet:

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

Vermeide px für Überschriften – sie skalieren nicht mit den Barrierefreiheitseinstellungen des Browsers. Rem hingegen schon.

Wenn eher das gesamte Typografie-System das Problem ist und nicht nur eine einzelne Überschrift, schlägt dir unser kostenloser KI-Shopify-Store-Builder eine passende Typografie-Kombination und -Skalierung zusammen mit einer Farbpalette und einem Homepage-Design vor.

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

Wenn du dich nicht damit wohlfühlst, CSS-Dateien direkt zu bearbeiten, kann Fudge, der KI-Operator für Shopify-Stores, das in seinem Store-Editor für dich übernehmen. Beschreibe einfach, was du möchtest:

“Mache H1-Überschriften 2.5rem auf Desktop und 1.8rem auf Mobile. Mache H2-Überschriften 2rem.”

Fudge identifiziert die richtige Datei, schreibt das CSS und zeigt dir einen Entwurf zur Überprüfung, bevor etwas live geht. Dein Live-Store bleibt unverändert, bis du auf Veröffentlichen klickst.

Kurzübersicht

FAQ