Par défaut, notre pop-up de vente incitative est vraiment propre et non agressif. C'est parce que nous pensons qu'un design simple et épuré est le plus efficace en termes de conversion.
Cependant, vous pouvez toujours l'améliorer en utilisant les options de personnalisation dans l'application ou en effectuant des ajustements de style encore plus avancés.
Comment personnaliser la pop-up à l'aide de CSS
En utilisant des CSS personnalisés, vous pouvez modifier pratiquement n'importe quel élément de la pop-up. Cependant, il est nécessaire d'avoir quelques connaissances de base en matière de CSS pour y parvenir. Pour commencer avec CSS, nous vous recommandons de lire le W3Schools CSS tutorial.
Pour ajuster le code CSS, allez sur Customize pop-up dans le menu supérieur et trouvez la section Advanced Customization. Insérez-y votre code CSS personnalisé.
Dans l'exemple ci-dessous, nous avons augmenté la taille de la police et changé la couleur de tous les boutons :
Voici quelques codes CSS personnalisés rapides pour vous aider à démarrer.
Changez la couleur d'arrière-plan, la couleur de la police, la couleur de la bordure et la taille de la police Ajoutez des boutons et la couleur d'arrière-plan des boutons Ajoutez des boutons au survol :
.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 */}Modifiez la couleur d'arrière-plan, la couleur de la police, la couleur de la bordure et la taille de la police du bouton Continue : et la couleur d'arrière-plan du bouton Continue au survol :
.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 */}Modifiez la couleur d'arrière-plan de la ligne de produit parent :
.Product-Line { background-color: #D9FED9 !important; /* background color */}Modifiez la taille de la police du titre de la fenêtre contextuelle, du nom de la commande (.Product-Name) et du produit de vente incitative :
.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 */}Modifiez la police utilisée dans la fenêtre contextuelle :
/* la police personnalisée importée doit se trouver sur le domaine fonts.google.com domain */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* assigner une nouvelle police aux éléments du pop-up de Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}Vous trouverez ci-dessous un aperçu des classes disponibles pour la personnalisation :
Vous avez besoin d'un coup de main ? N'hésitez pas à nous contacter par chat ou par e-mail à [email protected] ;)
Happy upselling,
L'équipe Digismoothie