Liquid, JavaScript, Themes
Hi zusammen,
hatte jemand schon mal das Problem, dass die Titel Länge, die Preise bei der Kategorie verschiebt und somit die Titel nicht mehr bündig sind:
Ich bedanke mich im voraus für jede Unterstützung!
(Shopify Theme - Dawn)
Liebe Grüße
Luc
Gelöst! Zur Lösung
Erfolg.
Hey Luc! @Luc10
Danke für das Bild und das Thema "Silbentrennung / Automatische Absätze Deaktivieren" haben wir sogar letzte Woche besprochen - TL;DR: es handelt sich um ein Responsive UI Problem das schwer lösbar ist bei Produkten mit langen Titel wie es bei dir der Fall ist.
Der Titel wird ja in einem Grid Container eingequetscht mit beschränkten Pixel Raum und mit wenn eine bestimmte Titel-Pixelbreite und Länge überschritten wird gibt es eine Silbentrennung, Zeilenumbruch, oder automatischen Absatz.
Du kannst das an uns senden als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme wie Dawn Theme bekommst, aber viel werden wir hier nicht machen können diesbzgl. Ansonsten wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte.
Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
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
Erfolg.
Hey Luc! @Luc10
Danke für das Bild und das Thema "Silbentrennung / Automatische Absätze Deaktivieren" haben wir sogar letzte Woche besprochen - TL;DR: es handelt sich um ein Responsive UI Problem das schwer lösbar ist bei Produkten mit langen Titel wie es bei dir der Fall ist.
Der Titel wird ja in einem Grid Container eingequetscht mit beschränkten Pixel Raum und mit wenn eine bestimmte Titel-Pixelbreite und Länge überschritten wird gibt es eine Silbentrennung, Zeilenumbruch, oder automatischen Absatz.
Du kannst das an uns senden als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme wie Dawn Theme bekommst, aber viel werden wir hier nicht machen können diesbzgl. Ansonsten wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte.
Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
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
Hi @Gabe ,
erstmal vielen Dank für die schnelle Rückmeldung!
Das habe ich mir gedacht, dass es sich um UI Problem handelt.
Des Weiteren finde ich sehr interessant, dass Code-Änderungen zum Ausschließen weiterer Updates führen kann - vielen Dank hier nochmal an der Stelle.
Ich werde versuchen die Titel-Länge zu kürzen, das wird wohl die schnellste (nicht beste) Lösung sein!
Liebe Grüße
Luc
Ja das ist das beste. Ich habe jetzt mit einer CSS Code Lösung rumgebastelt aber es ist nicht ganz einfach, wie unten beschrieben:
Um die Produkt-Titel im HTML-Code, den du bereitgestellt hast, zu bearbeiten, so dass sie konsistent angezeigt werden und die Preise nicht verschieben, kannst du mehrere CSS-Techniken anwenden. Hier ist ein Ansatz, den du verwenden könntest:
Definieren der maximalen Höhe für den Titelcontainer: Damit alle Titelblöcke gleich hoch sind, unabhängig von der Länge des Inhalts, kannst du eine maximale Höhe festlegen. Wenn ein Titel zu lang ist, wird er mit Auslassungspunkten (...) abgeschnitten.
Verwendung von Flexbox oder Grid: Um sicherzustellen, dass die Preise immer an der gleichen Stelle sind, könntest du die Karten mit Flexbox oder Grid so anordnen, dass der Titelbereich und der Preisbereich immer den gleichen Platz einnehmen.
Hier ist ein Beispiel für CSS, das du in deinem Stylesheet hinzufügen könntest:
.card__information {
display: flex;
flex-direction: column;
justify-content: space-between; /* Stellt sicher, dass der Titel oben und der Preis unten ist */
height: 150px; /* Setze eine feste Höhe oder eine Höhe, die für dein Design passt */
}
.card__heading {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-height: 3.6em; /* Pass diese Höhe an, um zwei Zeilen von Text zu erlauben */
display: -webkit-box;
-webkit-line-clamp: 2; /* Begrenzt den Text auf zwei Zeilen */
-webkit-box-orient: vertical;
}
Diese CSS-Regeln sorgen dafür, dass die .card__heading
nur zwei Zeilen Text anzeigt und alles darüber hinaus mit Auslassungspunkten versehen wird. Der .card__information
-Container wird so eingestellt, dass die Inhalte (Titel und Preis) den verfügbaren Platz innerhalb des Containers aufteilen.
Beachte, dass -webkit-line-clamp
eine nicht standardisierte, webkit-spezifische Eigenschaft ist, die in den meisten modernen Browsern funktioniert, aber möglicherweise nicht in allen. Wenn du eine breitere Kompatibilität benötigst, kannst du die Höhe des Titelcontainers anpassen und overflow: hidden;
verwenden, um den Inhalt zu beschränken.
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
Siehe meinen Video dazu hier.
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
Hi @Gabe ,
technisch gesehen, sollte das Problem ja behoben sein.
Wenn es jetzt noch möglich wäre den Code so anzupassen, dass der Titel nicht dupliziert wird, hätten wir eine saubere und nachhaltige Lösung gefunden.
Ich möchte aber auch nicht, dass wir uns es jetzt zu kompliziert machen. Titel kürzen oder ggf. auch länger machen sollte hier vollkommen ausreichend sein.
Vielen Dank für die Bemühungen!
Liebe Grüße
Luc
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