Ist eine Änderung der Textfarbe bei dem benutzerdefiniertes Liquid möglich?

[Horsly]

Hallo,
ist es möglich die Textfarbe eines benutzerdefinierten Liquids zu ändern?

Ich möchte auf der Produktseite oberhalb des Buy-Buttons einen Text hinzufügen. Diesen und zwar nur diesen, möchte ich gerne farblich anpassen. Ist dies über ein benutzerdefiniertes Liquid möglich oder gibt es eine bessere Möglichkeit?

Vielen Dank im Voraus.

[Gabe]

Hey @Horsly

Danke für die Frage und vieles ist jetzt in unseren neuen 2.0 Themes möglich vor allem mit dem neuen CSS Editor:

Um welches Theme handelt es sich hier wenn ich fragen darf? Bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Du kannst beispielsweise den Text oberhalb des „Buy“-Buttons durch eine Anpassung des Produkt-Templates des Themes hinzufügen. Du findest die entsprechende Datei im Bereich „Themes“ unter „Code bearbeiten“. Die Datei könnte zum Beispiel product-template.liquid oder product.liquid heißen und hier ein Beispiel, wie man einen Textabschnitt mit Liquid hinzufügen könnte:

{% comment %}
  Hier ist der neue Textabschnitt
{% endcomment %}

  Hier ist mein zusätzlicher Text oberhalb des Buy-Buttons.

{% comment %}
  Nachfolgend der Code für den Buy-Button. Dieser kann im Theme anders aussehen!
{% endcomment %}
{{ product.price | money_without_currency }}

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!

Hier wird ein einfacher Textabschnitt in roter Farbe direkt oberhalb des Kaufen-Buttons platziert. Der tatsächliche Code für den Kaufen-Button kann in deinem speziellen Theme aber auch abweichen. Die direkte Angabe des Styles im HTML (inline) ist eine schnelle Methode, aber nicht die sauberste oder beste Lösung für den Produktionsbetrieb. Eine bessere Methode ist das Hinzufügen einer CSS-Klasse und das Definieren der Stile im CSS-Teil des Themes:

  Hier ist mein zusätzlicher Text oberhalb des Buy-Buttons.

Füge den CSS-Code in den CSS-Editor ein, wie z. B.:

.custom-text {
  color: #ff0000; /* Oder jede andere Farbe, die du moechtest */
}

Stelle sicher, dass du alle Änderungen testest, um sicherzustellen, dass sie wie gewünscht funktionieren und dass es keine unbeabsichtigten Auswirkungen auf andere Bereiche des Shops gibt. Wenn du dir immer noch unsicher oder Unterstützung benötigst, ziehen einfach einen unserer Shopify-Experten oder -Entwickler hinzu.