Überschriftengröße in Shopify ändern (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 Ü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 Schieberegler für die Überschriftengröße meine H1 nicht?

Einige Themes wenden die Skalierung der Überschriftengröße nur auf bestimmte vom Theme definierte Klassen an (z. B. .h0, .h1-display) und nicht auf das reine <h1> HTML-Element. Wenn deine H1 nicht auf den Schieberegler reagiert, inspiziere das Element in den DevTools, um zu sehen, welche Klasse die Größe steuert, und aktualisiere diese Klasse dann per CSS oder lass sie von Fudge anpassen.

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

Ein üblicher Bereich liegt bei 1,75rem–2,5rem auf dem Desktop und 1,4rem–1,8rem auf Mobilgeräten. Größere H1 wirken zwar designorientiert, verbessern aber selten die Conversion — was mehr zählt, sind Hierarchie und Lesbarkeit. Die Schrift sollte auf 16-Zoll- und 5-Zoll-Viewports 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 bei body.template-product h1 { font-size: 2rem; } ein, um Größen pro Template anzuwenden, ohne andere Seiten zu beeinflussen.

Sollten Überschriften auf Mobile und Desktop gleich groß sein?

Nein. Eine für den Desktop dimensionierte Überschrift wirkt auf Mobile meist zu groß — reduziere sie durch eine Media Query um ca. 30–50 %. Ohne responsive Größenanpassung schieben große Desktop-Überschriften den Inhalt auf Smartphones below the fold und schaden der Mobile-Conversion.

Hat die Änderung der Überschriftengröße Auswirkungen auf die SEO?

Nein. SEO hängt von der Überschriftenhierarchie (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 nach Belieben ändern, ohne das Ranking zu beeinflussen, solange die zugrunde liegende Tag-Struktur intakt bleibt.