Liquid, JavaScript, Themes
Hi @Christian93 - das ist relativ easy umzusetzen, für die Lösung benötige ich aber Kenntnis über dein Theme; ideal wär ein link zu deinem Store bzw. einer Beispielseite, auf der die Bulletpoints ersetzt werden sollen.
LG, Mario
Hey,
ich hätte die gleiche Frage. Habe allerdings noch keine Antwort gefunden leider 🙂
Habe folgendes Liquid mit diesem Code erstellt:
<ul>
<li>Einzigartige Erinnerung</li>
<li>Kein Kontakt mit Tinte</li>
<li>Verschiedene Farben</li>
</ul>
Habe jetzt auch Punkte davor, hätte aber lieber andere Symbole, wenn möglich sogar Emojis? Würde mich sehr über eine Antwort freuen.
LG, Maurice
Hey @MauriceWebSales
Das geht relativ schnell mit unseren CSS Tool und einen Code wie den folgenden:
ul {
list-style-type: none; /* Entfernt die Standard-Bulletpoints */
}
ul li {
position: relative; /* Ermöglicht das Hinzufügen des Symbols innerhalb der Liste */
padding-left: 20px; /* Platz für das Symbol */
}
ul li:before {
content: ""; /* Hier kannst du das Symbol oder Emoji einfügen, das du möchtest */
position: absolute;
left: 0;
color: green; /* Farbe des Symbols */
font-size: 16px; /* Größe des Symbols */
}
✔️
-Symbol durch jedes andere Symbol oder Emoji ersetzen, das du möchtest. Zum Beispiel:
content: "⭐";
für einen Stern.content: "🔥";
für ein Feuer-Emoji.color
und font-size
an, um die Farbe und Größe des Symbols oder Emojis anzupassen.Angenommen, du möchtest in deiner Produktbeschreibung folgende Liste haben:
<ul>
<li>Einzigartige Erinnerung</li>
<li>Kein Kontakt mit Tinte</li>
<li>Verschiedene Farben</li>
</ul>
Mit dem oben genannten CSS wird die Liste stattdessen so aussehen:
Falls du das Styling nur auf bestimmte Listen anwenden möchtest (z. B. nur innerhalb der Produktbeschreibung), kannst du den CSS-Selektor spezifischer gestalten:
.product-description ul li:before {
content: "";
color: green;
font-size: 16px;
}
Hier wird das Styling nur auf Listen innerhalb eines Elements mit der Klasse .product-description
angewendet.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
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
Hey Gabe,
vielen Dank für deine schnelle Hilfe. Im Prinzip habe ich es verstanden wie du das meinst. Könntest du an Hand meiner Bulletpoints eventuell einen Quellcode erstellen, der so fertig rüberkopiert werden kann? Sagen wir einfach mal mit Häkchen statt Punkten?
Ich bekomme kein vernünftiges Ergebnis wenn ich die Codes selber einfüge😁 Bin damit noch nicht so sicher
Vielen Dank!
Ach bevor ich es vergesse, ich nutze den Code aber unter Themes "Benutzerdefiniertes Liquid" oder?
Hey Gabe ich habe es gefunden und umsetzen können 🙏
Aber ein anderer Fehler hat sich eingeschlichen, ich lasse dir einen Screenshot zukommen.
Leider sind die Bulletpoints nun an jeder Schrift, kannst du mir sagen was ich falsch gemacht habe? 😄
Viele Grüße
Hey @MauriceWebSales
Poste nochmal den Code den du dafür verwendest hier sowie einen Link zu einem Beispiel.
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
kann jemand sagen, AN WELCHER STELLE der Code eingefügt werden muss, damit die Bullet-Points nur auf der Produkt Seite in der Beschreibung geändert werden? Im styles.css macht er ganz komisch sachen danach - die richtige Stelle konnte ich bisher leider nicht finden.
Eine Möglichkeit wäre:
Du gehst auf Onlineshop -> Themes -> anpassen
Dann klickst du links auf das kleine Rädchen für "Theme Einstellungen" und dann findest du etwas weiter unten die Option "Benutzerdefiniertes CSS"
Wichtig du musst auch dein verwendetes Produktemplate auswählen.
PS: Manchmal führt deine Theme Version zu Problemen, d. H. du hast zwar einen richtigen CSS Code aber es lässt sich nicht speichern. Dafür hab ich aber leider selbst noch keine Lösung gefunden...
Hey Kurbsn,
erst mal Danke für den Hinweis! Mit deinem ChatGPT-Code und dem benutzerdefinierten CSS auf der Product-Page hat es grundsätzlich funktioniert. Zwei Erkenntnisse: wenn man in der Produktbeschreibung (auf Produkt-Ebene) schon andere Symbole eingefügt hatte, überschreibt es diese nicht (was nicht so schlimm ist), allerdings lässt es sich nicht speichern, wie du geschrieben hattest....
Ich würde dann eh gerne noch ein eigenes Symbol (URL) als "Content" einfügen, aber das sollte nicht so schwierig sein. Aber das mit dem Speichern ist seltsam, falls da jemand eine Lösung hat, gerne Info.
Update: ich habe den Code nun im Editor auf der Product Seite.liquid eingefügt und die Symbole etwas angepasst (SVG). Jetzt funktioniert es, so wie ich wollte, danke!
Hab mit chatGPT folgenden Custom CSS Schnipsel mir machen lassen:
.product-single__description ul,
.rte ul {
list-style: none;
padding-left: 0;
}
.product-single__description ul li,
.rte ul li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
}
.product-single__description ul li:before,
.rte ul li:before {
content: "\2714"; /* Unicode für grünen Haken */
color: green; /* Farbe des Hakens */
font-size: 20px; /* Größe des Hakens */
position: absolute;
left: 0;
top: 0;
}
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024