Tutorials

Shopify Preis-Schriftgröße ändern: Die ultimative Anleitung für dein Produktdesign

Melden

Hier ist ein leicht verständliches Tutorial, wie du die Schriftgröße des Preises auf deiner Shopify-Produktseite anpassen kannst – ohne tiefgreifende Programmierkenntnisse.

Die Preisangabe ist eines der wichtigsten Elemente auf deiner Produktseite. Wenn der Preis zu klein ist, wirkt er unscheinbar; ist er zu groß, kann er das Design dominieren. In dieser Anleitung zeigen wir dir drei Wege, wie du die Größe perfekt anpasst.

Methode 1: Über den Theme-Editor (Für moderne OS 2.0 Themes wie Dawn)

In vielen modernen Themes kannst du kleine Anpassungen direkt im Editor vornehmen, ohne die Code-Dateien zu öffnen.

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
  2. Klicke neben deinem aktuellen Theme auf Anpassen (Customize).
  3. Navigiere oben im Dropdown-Menü zu Produkte > Standardprodukt.
  4. Klicke in der linken Seitenleiste auf den Block Preis.
  5. Suche in den Einstellungen auf der rechten Seite nach einem Feld namens Custom CSS (Eigener CSS-Code).
  6. Gib dort folgenden Code ein:
    .price {
  font-size: 24px !important;
}

    (Du kannst die Zahl 24 durch deine gewünschte Pixelgröße ersetzen.)

  7. Klicke auf Speichern.

Methode 2: Global über die CSS-Datei (Empfohlen)

Wenn Methode 1 nicht funktioniert oder du die Änderung global für alle Preisanzeigen (auch in Kollektionen) festlegen möchtest, nutze diesen Weg:

  1. Gehe zu Onlineshop > Themes.

  2. Klicke auf die drei Punkte (...) neben "Anpassen" und wähle Code bearbeiten.

  3. Suche im Ordner Assets nach einer Datei namens base.css, theme.css oder global.css.

  4. Scrolle ganz nach unten und füge diesen Code ein:

    /* Schriftgröße des Preises auf der Produktseite ändern */
.product__info-container .price-item--regular {
  font-size: 28px;
  font-weight: bold; /* Optional: Macht den Preis fett */
}

/* Optional: Farbe des Preises anpassen */
.product__info-container .price-item--sale {
  font-size: 28px;
  color: #ff0000; /* Rot für Sale-Preise */
}

  5. Klicke auf Speichern.

Methode 3: Spezifische Anpassung für Mobile & Desktop

Oft sieht ein großer Preis auf dem Desktop gut aus, ist auf dem Smartphone aber zu wuchtig. So steuerst du beides getrennt:

  1. Nutze denselben Weg wie in Methode 2 (Code bearbeiten > base.css).

  2. Füge diesen Code am Ende ein:

    /* Desktop-Größe */
@media screen and (min-width: 750px) {
  .price-item--regular {
    font-size: 32px;
  }
}

/* Mobile-Größe */
@media screen and (max-width: 749px) {
  .price-item--regular {
    font-size: 20px;
  }
}

Tipps zur Fehlerbehebung

  • Cache leeren: Falls du die Änderungen nicht sofort siehst, lade deine Produktseite im Browser neu (Strg + F5 oder Cmd + Shift + R).
  • Klassennamen prüfen: Jedes Theme ist anders. Wenn der Code oben nicht greift, rechtsklicke im Browser auf deinen Preis, wähle "Untersuchen" (Inspect) und schaue, wie die CSS-Klasse heißt (z. B. .product-price oder .price-text). Ersetze .price-item--regular im Code einfach durch diese Klasse.
  • Backup: Erstelle immer eine Kopie deines Themes, bevor du Änderungen am Code vornimmst!

Geschafft! Dein Preis sollte nun genau so groß sein, wie du es dir für dein Branding vorgestellt hast.

0