Standardmäßig ist unser Upsell-Pop-up sehr schlicht und nicht aggressiv. Das liegt daran, dass wir der Meinung sind, dass ein sauberes und einfaches Design am besten zur Konversion beiträgt.
Sie können es jedoch jederzeit verbessern, indem Sie die Anpassungsoptionen in der App nutzen oder noch weitergehende Stilanpassungen vornehmen.
So passen Sie das Pop-up mithilfe von CSS an
Mit benutzerdefiniertem CSS können Sie praktisch jedes Element im Pop-up ändern. Dazu ist jedoch ein gewisses Grundverständnis von CSS erforderlich. Für den Einstieg in CSS empfehlen wir die Lektüre des W3Schools CSS-Tutorials.
Um den CSS-Code anzupassen, gehen Sie im oberen Menü auf Pop-up anpassen und suchen den Abschnitt Erweiterte Anpassung. Fügen Sie dort Ihren benutzerdefinierten CSS-Code ein.
Im folgenden Beispiel haben wir die Schriftgröße vergrößert und die Farbe aller Schaltflächen geändert:
Nachfolgend finden Sie einige schnelle benutzerdefinierte CSS-Codes, die Ihnen den Einstieg erleichtern.
Ändern Sie die Hintergrundfarbe, die Schriftfarbe, die Rahmenfarbe und die Schriftgröße der Fügen Sie Schaltflächen hinzu und die Hintergrundfarbe der Fügen Sie Schaltflächen hinzu, wenn Sie die Maus bewegen:
.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:not([disabled]):hover { background-color: #059e36 !important; /* button color when hover over */}Ändern Sie die Hintergrundfarbe, Schriftfarbe, Rahmenfarbe und Schriftgröße des Continue Buttons: und die Hintergrundfarbe des Continue Buttons bei Hover:
.Button-Primary { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 18px !important; /* font size */}.Button-Primary:not([disabled]):hover { background-color: #059e36 !important; /* button color when hover over */}Ändern Sie die Hintergrundfarbe der übergeordneten Produktlinie:
.Product-Line { background-color: #D9FED9 !important; /* background color */}Ändern Sie die Schriftgröße des Pop-up-Titels, des übergeordneten Produkts und des Upsell-Produkts:
.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 Sie die im Pop-up verwendete Schriftart:
/* Die importierte benutzerdefinierte Schriftart muss sich auf der Domain fonts.google.com befinden */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* Zuweisung einer neuen Schriftart zu Candy Rack Pop-up-Elementen */.frame-content { font-family: Comfortaa, sans-serif !important;}Nachfolgend finden Sie einen Überblick über die Klassen, die für die Anpassung zur Verfügung stehen:
Wenn Sie an weiteren Optionen für Entwickler und der öffentlichen API von Candy Rack interessiert sind, erfahren Sie mehr im Artikel Candy Rack public API & options for developers.
Brauchen Sie Hilfe dabei? Zögern Sie nicht, uns per Chat oder E-Mail zu erreichen: [email protected]
Viel Spaß beim Upselling,
Das Candy Rack Team