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 tirant parti des options de personnalisation dans l'application ou en procédant à des ajustements de style encore plus avancés.
Comment personnaliser la fenêtre contextuelle à l'aide de CSS
En utilisant des CSS personnalisés, vous pouvez modifier pratiquement n'importe quel élément de la fenêtre contextuelle. Pour ce faire, il est nécessaire d'avoir quelques connaissances de base en matière de CSS. 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 modifié la couleur de tous les boutons :
Voici quelques codes CSS personnalisés rapides pour vous aider à démarrer.
Modifiez 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 parente :
.Product-Line { background-color: #D9FED9 !important; /* background color */}Modifier la taille de la police du titre de la fenêtre contextuelle, du produit parent 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 */}Modifier la police utilisée dans la fenêtre contextuelle :
/* la police personnalisée importée doit se trouver sur le domaine fonts.google.com */@import url('https://fonts.googleapis.com/css ?family=Comfortaa&display=swap');/* assigner une nouvelle police aux éléments de la pop-up de Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}Voici un aperçu des classes disponibles pour la personnalisation :
Si vous êtes intéressé par d'autres options pour les développeurs et l'API publique de Candy Rack, vous pouvez en savoir plus dans l'article Candy Rack public API & options pour les développeurs.
Vous avez besoin d'un coup de main pour cela ? N'hésitez pas à nous contacter par chat ou par e-mail à l'adresse [email protected]
Happy upselling,
L'équipe Candy Rack