Liquid, JavaScript, Themes
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.
Gelöst! Zur Lösung
Erfolg.
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,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
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.
product-template.liquid
oder wo dein Produkt Page Code lebt, und suche nach einem Code ähnlich wie der folgende:
<h1 class="product__title">{{ product.title }}</h1>
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:
<h1 class="product__title">Oversized Sweatshirt<br>{{ product.title | remove_first: "Oversized Sweatshirt " }}</h1>
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! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
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
Erfolg.
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,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
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
Klasse freut mich! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024