FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Betreff: Ändern der Bulletpoints durch andere Symbole

Ändern der Bulletpoints durch andere Symbole

Christian93
Besucher
3 0 0
Hey Leute,
 
wie kann man in shopify im debut theme in der produktbeschreibung die bulletpoints bei der Aufzählung durch andere Symbole ersetzen kann? (z.B. durch einen Haken)
Hat da jemand zufällig einen Code schnipsel? Und falls es sowas gibt, wo kann man diesen einfügen, dass aus den Bulletpoints dann z.B. so ein Haken wird?
 
Danke euch schon mal und einen schönes Wochenende! 🙂
11 ANTWORTEN 11

r8r
Shopify Partner
2555 327 943

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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
MauriceWebSales
Tourist
7 0 1

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

Gabe
Shopify Staff (Retired)
19233 3006 4441

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 */
}

 

  • Ersetze das Symbol: Du kannst das ✔️-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.
  • Farbe und Größe ändern: Passe die CSS-Eigenschaften 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:

  • ✔️ Einzigartige Erinnerung
  • ✔️ Kein Kontakt mit Tinte
  • ✔️ Verschiedene Farben

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

MauriceWebSales
Tourist
7 0 1

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!

MauriceWebSales
Tourist
7 0 1

Ach bevor ich es vergesse, ich nutze den Code aber unter Themes "Benutzerdefiniertes Liquid" oder?

MauriceWebSales
Tourist
7 0 1

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üßeGAbe.PNG

 

Gabe
Shopify Staff (Retired)
19233 3006 4441

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

NIHA1502
Tourist
5 0 1

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.

kurbsn
Besucher
2 0 1

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... 

Bildschirm­foto 2024-10-11 um 16.00.31.png

 

Bildschirm­foto 2024-10-11 um 15.57.29.png

NIHA1502
Tourist
5 0 1

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!

kurbsn
Besucher
2 0 1

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;
}