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

Das Wichtigste auf einen Blick

• Globale Überschriftengrößen werden unter Theme-Editor > Theme-Einstellungen > Typografie festgelegt.
• Die meisten Themes bieten einen Schieberegler für die Überschriftenskalierung, der alle Größen proportional anpasst.
• Für eine individuelle Steuerung (H1 vs. H2 vs. H3 in verschiedenen Größen) benötigst du CSS im Assets-Ordner deines Themes.
• CSS-Änderungen erfordern das Bearbeiten von assets/base.css oder ähnlichem – erstelle vorher unbedingt eine Kopie deines Themes.
• Fudge kann das CSS für dich schreiben und anwenden, basierend auf einer einfachen Beschreibung auf Englisch.

Der Theme-Editor von Shopify gibt dir die Kontrolle über Schriftarten und eine allgemeine Größenskala für Überschriften. Für präzise Größen pro Überschriftentyp musst du 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 Überschriftenskalierung für deinen gesamten Shop.

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

Schritt 4. Suche die Einstellungen für die Überschriftenschriftart. 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 bewirkt: Es passt die Basis-Skalierung an, die vom CSS deines Themes verwendet wird. Es funktioniert wie ein Multiplikator – ein größerer Wert macht alle Überschriften im Verhältnis zum Fließtext größer.

Was es nicht bewirkt: Das Verhältnis zwischen H1-, H2- und H3-Größen. 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:

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

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