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 immer noch besser machen, indem Sie die Anpassungsoptionen in der App nutzen oder noch weitergehende Stilanpassungen vornehmen.

Wie Sie das Pop-up mit CSS anpassen

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 Sie 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 der Schaltfläche Weiter zur Kasse und die Hintergrundfarbe der Schaltfläche Weiter zur Kasse 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 Zeile "Your Cart":

.Product-Line {   background-color: #D9FED9 !important; /* background color */}

Ändern Sie die Schriftgröße des Pop-up-Titels, "Your Cart" (.Product-Name) 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:

/* importierte benutzerdefinierte Schriftart muss auf der fonts.google.com domain */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* Zuweisung einer neuen Schriftart für Candy Rack Pop-up-Elemente */.frame-content {   font-family: Comfortaa, sans-serif !important;}

Nachfolgend finden Sie eine Übersicht der Klassen, die für die Anpassung zur Verfügung stehen:

Brauchen Sie Hilfe dabei? Zögern Sie nicht, uns per Chat oder E-Mail zu erreichen: [email protected]

Viel Spaß beim Upselling,

Digismoothie-Team