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

Das Wichtigste in Kürze

• Globale Überschriftengrößen werden unter Theme-Editor > Theme-Einstellungen > Typografie festgelegt.
• Die meisten Themes bieten einen Schieberegler für die Überschriftengröße, der alle Überschriften proportional anpasst.
• Für die individuelle Kontrolle pro Überschrift (H1 vs. H2 vs. H3 in verschiedenen Größen) brauchst du CSS im Assets-Ordner deines Themes.
• CSS-Änderungen erfordern die Bearbeitung der assets/base.css oder Ähnlichem – dupliziere dein Theme vorher.
• Fudge kann das CSS für dich aus einer einfachen Beschreibung erstellen und anwenden.

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

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.9 im Shopify App Store.

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

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

Related: Padding und Margin in Shopify ändern.

Siehe auch: Schriftfarbe in Shopify ändern.

Related: Schriftarten in Shopify aktualisieren.

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:

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.

Verwandt: Mobile Abstände in Shopify verbessern.

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

FAQ

Verwandter Artikel: Abstände in Shopify bearbeiten.