In der Standardeinstellung ist unser Upsell-Layout sehr übersichtlich und nicht aggressiv. Das liegt daran, dass wir der Meinung sind, dass ein klares und einfaches Design am besten für die Konversion ist.
Du kannst es jedoch jederzeit verbessern, indem du die Anpassungsoptionen in der App nutzt, z. B. die Pop-up-Anpassungseinstellungen, die Produktseiten-App-Block-Anpassungseinstellungen, oder indem du erweiterte Stilanpassungen vornimmst.
Pop-up-Anpassung
Mit benutzerdefiniertem CSS kannst du praktisch jedes Element im Pop-up ändern. Dafür sind jedoch einige Grundkenntnisse über CSS erforderlich. Für den Einstieg in CSS empfehlen wir die Lektüre des W3Schools CSS-Tutorials.
Um den CSS-Code anzupassen, gehst du im App-Menü auf Anpassung und suchst den Abschnitt Erweiterte Anpassung. Füge dort deinen benutzerdefinierten CSS-Code ein.
Liste der Selektoren
Im Folgenden findest du eine Liste der verfügbaren Selektoren, die du für die Gestaltung des Candy Rack Pop-ups verwenden kannst.
Element
|
Klassenselektor
|
Schaltfläche hinzufügen
|
für Rasterlayout:
|
Continue button
|
|
No, thank you button
|
|
Parent product line
|
|
Pop-up title
|
|
Parent product
|
|
Upsell product
|
|
Parent product price
|
|
Upsell-Angebotspreis
|
|
Ursprünglicher Upsell-Angebotspreis
|
|
Beschreibungstext
|
|
Pop-up Anpassungsbeispiele
Hier sind einige Beispiele für Anpassungen mit CSS-Codes, um das Upselling-Erlebnis deines Shops zu verbessern und mit dem Branding deines Shops in Einklang zu bringen.
Anpassen der Schaltflächen "Hinzufügen", "Weiter" und "Nein, danke"
Mit diesem Code kannst du die Hintergrundfarbe, die Schriftfarbe, die Rahmenfarbe und die Schriftgröße ändern. Ändere außerdem die Hintergrundfarbe bei Hover für die Schaltfläche Hinzufügen:
.Button-Add { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 16px !important; /* font size */}.Button-Add:hover { background-color: #059e36 !important; /* button color on hover */}
Wenn du denselben Stil auf alle Schaltflächen anwenden möchtest, kannst du sie in Gruppen zusammenfassen und die einzelnen Klassen durch Kommas trennen.
.Button-Add, .Button-Primary, .Button-Reject { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 16px !important; /* font size */}.Button-Add:hover, .Button-Primary:hover, .Button-Reject:hover { background-color: #059e36 !important; /* button color on hover */}
Anpassen der übergeordneten Produktlinie
Anpassen der Hintergrundfarbe des Hauptproduktabschnitts.
.Product-Line { background-color: #D9FED9 !important; /* background color */}
Anpassen der Schriftgröße
Anpassen der Schriftgröße für den Pop-up-Titel, das übergeordnete Produkt und das Upsell-Produkt.
.Title { font-size: 30px !important; /* font size of the headline */}.Product-Name { font-size: 16px !important; /* font size of the parent product */}.Offer-Title { font-size: 16px !important; /* font size of the upsell product */}
Ändern der im Pop-up verwendeten Schriftart
Du kannst das Pop-up weiter personalisieren, indem du eine benutzerdefinierte Schriftart importierst und sie auf bestimmte Elemente anwendest.
Zuerst importierst du die Schriftart entweder mit der Regel @import (um ein externes CSS zu laden, das die Schriftart enthält) oder du definierst sie direkt mit der Regel @font-face. Dann wendest du die Schriftart mit der Eigenschaft font-family auf bestimmte Elemente an.
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* Zuweisung einer neuen Schriftart für das Candy Rack Pop-up */.frame-content { font-family: Comfortaa, sans-serif !important;}
Pop-up Class Selectors Overview
Hier findest du alle verfügbaren Klassen-Selektoren, mit denen du das Candy Rack Pop-up anpassen kannst. Mit diesen Selektoren kannst du verschiedene Elemente wie Schaltflächen und Text gestalten und hast so mehr Kontrolle über das Aussehen des Pop-ups.
Eingebettete Angebote anpassen
Um den CSS-Code deiner Upsells, die in deine Produktseite eingebettet sind, anzupassen, gehst du zu deinem Theme-Editor, rufst eine Produktseite auf, navigierst zu Vorlage, öffnest die Produktseite App-Block-Einstellungen von Candy Rack und scrollst bis zum Ende der Seite, um den CSS-Code hinzuzufügen.
Um mehr darüber zu erfahren, wie du App-Blöcke für Candy Rack aktivierst, lies den Artikel Hinzufügen und Anpassen von App-Blöcken für die Platzierung der Produktseite .
Liste der Selektoren
Nachfolgend findest du eine Liste der verfügbaren Selektoren, die du verwenden kannst, um mit der Gestaltung des Candy Rack App-Blocks zu beginnen.
Element
|
Klassenselektor
|
Angebotstitel
|
|
Produktname
|
|
Originalpreis
|
|
Rabattierter Preis
|
|
Beschreibungstext
|
|
Platzhaltertext
|
|
Beispiele für die Anpassung des App-Blocks
Hier sind einige Beispiele für die Anpassung des App-Blocks mit CSS-Code, um das Upselling-Erlebnis deines Shops zu verbessern und an das Branding deines Shops anzupassen.
Anpassung der Schriftgröße
Ändere die Schriftgröße des Angebotstitels und des Upsell-Namens.
.candyrack-ppp-checkbox-layout__offers--title { font-size: 30px !important; /* font size of the offer title */}.candyrack-ppp-checkbox-layout__info--product-name { font-size: 15px !important; /* font size of the upsell name */}
Passe die Produktpreise an
Ändere die Schriftfarbe des ursprünglichen Produktpreises und des rabattierten Preises, damit der Rabatt für die Kunden besser erkennbar ist.
.candyrack-ppp-checkbox-layout__info--product-price { color: grey !important; /* font color of the offer original price */}.candyrack-ppp-checkbox-layout__info--product-discount-price { color: green !important; /* font color of the sale price */}
Textinhalte anpassen
Ändere die Schriftarten für die Beschreibung und den Platzhaltertext. Hier sind die verwendeten Selektoren:
.candyrack-ppp-checkbox-layout__info--angebotsbeschreibung { font-weight: 700 !important; /* font weight of the description text */}.candyrack-ppp-text-input { font-style: italic !important; /* font style of the placeholder text if custom note is enabled */}
Übersicht über die Klassen-Selektoren des App-Blocks
Hier ist eine Übersicht über die verfügbaren Klassen-Selektoren, die du verwenden kannst, um den Candy Rack App-Block anzupassen.
Wenn du dich für weitere Optionen für Entwickler und die öffentliche API von Candy Rack interessierst, kannst du mehr im Artikel Candy Rack public API & options for developers erfahren.
Brauchst du Hilfe? Zögere nicht, uns per Chat oder E-Mail zu erreichen: [email protected]
Viel Spaß beim Upselling,
Das Candy Rack Team