Welche Anpassungen sind möglich?
Die folgenden Anpassungen können für die Visualisierungen vorgenommen werden (auf diese beschränkt):
(1) White Labeling
Die Eigenschaft ist
show-retraced-logo
Diese Eigenschaft steuert die Sichtbarkeit des retraced-Logos. Um das Logo auszublenden, setze die Eigenschaft auf
"false"
In diesem Beispiel wird das retraced-Logo ausgeblendet:
<retraced-button-verified show-retraced-logo="false"></retraced-button-verified>
(2) Benutzerdefinierte Schriftart
Die Eigenschaft ist
retraced-elements-font-family
Diese Eigenschaft legt die Schriftfamilie der Karten fest. In diesem Beispiel ist die Schriftart
retraced-cards {
--retraced-elements-font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
}
(3) Benutzerdefinierte Farbe
Die Eigenschaft ist
color
Diese Eigenschaft legt die Farbe der Icons fest. In diesem Beispiel wird die Farbe der Icons auf Rot gesetzt.
<retraced-icons color="#FF0000"></retraced-icons>
Die Eigenschaft ist
retraced-cards-text-color
Diese Eigenschaft legt die Farbe der Karten fest. In diesem Beispiel wird die Farbe der Karten auf Braun gesetzt.
retraced-cards {
--retraced-cards-text-color: brown;
}
(4) Abgerundete Karten
Die Eigenschaft ist
retraced-cards-border-radius
Diese Eigenschaft legt den Radius der Karten-Ecken fest. In diesem Beispiel ist der Radius auf 10px gesetzt.
retraced-cards {
--retraced-cards-border-radius: 10px;
}
Das retraced-cards-Element ist ein benutzerdefiniertes HTML-Element, mit dem du Karten mithilfe von individuellen Eigenschaften gestalten kannst.
Wo kannst du diese CSS-Variablen einfügen?
CSS-Variablen (auch als CSS-Custom Properties bekannt) sind global in deinem gesamten Projekt verfügbar. Du kannst sie in jede beliebige CSS-Datei einfügen, die mit deinem HTML verknüpft ist, und sie stehen dir dann projektweit zur Verfügung.
Um jedoch eine konsistente Struktur zu gewährleisten und Verwirrung zu vermeiden, ist es empfehlenswert, die Variablen in einer zentralen Datei zu definieren, wie z. B. in einem Haupt- oder globalen Stylesheet. So kannst du sie leicht finden und bei Bedarf anpassen.
Für bestimmte Plattformen wie Shopify oder WooCommerce findest du unsere Empfehlung unten.
Shopify
Füge die CSS-Variablen in der Datei retraced.liquid hinzu.
WooCommerce
Füge die CSS-Variablen in das Haupt-Stylesheet deines Themes ein, das üblicherweise style.css heißt. Falls dein Theme eine Option für benutzerdefiniertes CSS bietet, kannst du die Variablen auch dort hinzufügen.
Beachte, dass wir keine direkte WooCommerce-Integration unterstützen. Unsere benutzerdefinierte Integration ist eine generische Lösung, die du für die Integration verwenden kannst.