Produkt Titel in zwei Zeilen

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

Ein Nutzer möchte den Produkttitel auf der Produktseite in zwei Zeilen aufteilen, da der aktuelle Titel (z.B. “Oversized Sweatshirt Twenty Two”) zu lang erscheint.

Vorgeschlagene Lösungen:

  • HTML <br> Tag: Manuelles Einfügen eines Zeilenumbruchs im Code (z.B. nach “Oversized Sweatshirt”), entweder direkt im Produkttitel oder durch Code-Anpassung in der product-template.liquid mit dem remove_first Filter
  • Schriftgröße reduzieren: Anpassung der Titelschrift in den Theme-Typografie-Einstellungen

Wichtige Hinweise:

  • Code-Änderungen sollten zuerst in einer Theme-Kopie getestet werden
  • Solche Anpassungen können Theme-Updates ausschließen und die Ladegeschwindigkeit beeinflussen
  • Für produktspezifische Änderungen wird eine separate Produktvorlage empfohlen

Ergebnis:
Das Problem wurde durch Verkleinerung der Schriftgröße von 140% auf 100% in den Theme-Einstellungen gelöst, ohne Code-Anpassungen vornehmen zu müssen.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hallo

Ist es möglich den Produkt Titel in 2 Zeilen einzustellen?

Wie man auf dem Screenshot sieht ist in meinen Augen der Titel zu lang bzw. zu groß.

Ich hätte es gerne so, dass ich z.B. “Oversized Sweatshirt” in der oberen Zeile hätte

und dadrunter etwas kleiner “Twenty Two”.

Das obere ist halt die Art des Artikel und darunter wird der Modellname angegeben.

Screen.JPG
Screen.JPG1371×478 47.1 KB

2

Hey @Joschi

Danke für das Bild und hier haben wir es mit mehren Faktoren zu tun wie z. B. die Größe deines Titels (Quickfix: Schriftgröße könnte man etwas verkleinern?) und die Pixelgröße des Bildschirms (<750px oder >750px usw.)

Aber du möchtest einen Line Break nach “Oversized Sweatshirt”? Dafür kannst du im Code den HTML <br> tag verwenden, wie z. B. <br> tag → “Oversized Sweatshirt<br>Twenty Two”.

Das folgende ist ohne Gewähr und so etwas immer zuerst in einer Theme Kopie testen (mit einem Programmierer). Es wirkt sich auch auf alle Produkte aus und wenn du es nur mit einem Produkt machen möchtest dann musst du für dieses Produkt eine separate Vorlage erstellen.

Siehe unsere Anleitung dafür hier.

  • In der neuen Produktvorlage gehe in die product-template.liquid oder wo dein Produkt Page Code lebt, und suche nach einem Code ähnlich wie der folgende:
# {{ product.title }}

Um das<br>-Tag nach einem bestimmten Wort im Produkttitel einzufügen, ersetze das Leerzeichen zwischen diesem Wort und dem nächsten Wort durch das<br>-Tag. Das könnte wie folgt aussehen:

# Oversized Sweatshirt
{{ product.title | remove_first: "Oversized Sweatshirt " }}

Hier wird der <br> tag nach “Oversized Sweatshirt” hinzugefügt und der remove_first Filter dazu verwendet “Oversized Sweatshirt” vom Rest des Produktitels zu entfernen.

Beachte auch, dass Codeänderungen zu langsameren Page Loading Speeds führen können und auch dein Theme aus den Theme Updates ausschließen kann. Somit ist es immer ratsam zuerst zu schauen, ob es nicht im Theme Editor lösbar ist.

Hoffe das hilft! :wink:

3

Hallo @Gabe

Vielen Dank für deine ausführliche Antwort.

Ich würde glaube ich dann nur den br Code verwenden und die Schrift etwas verkleinern.

Wie wäre der Code mit br und einer etwas kleineren Schrift? Und wo genau muss ich ihn einsetzen?

Vielen Dank schonmal

4

Hey @Joschi

Probiere doch mal zuerst die Titelschrift der Produkte in den Theme Typografie Einstellungen zu verkleinern. Ggf. kann das ein Eingreifen in den Code vermeiden, was dein Theme aus den Theme Updates ja ausschließen würde.

VG,

5

Du hattest recht das hat schon gereicht, da war die Einstellung auf 140% und ich habe es jetzt auf 100% runter gestuft.

Vielen Dank @Gabe

6

Klasse freut mich! :wink: