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 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 to Checkout et la couleur d'arrière-plan du bouton Continue to Checkout 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 "Votre panier" :
.Product-Line { background-color: #D9FED9 !important; /* background color */}Modifiez la taille de la police du titre de la fenêtre contextuelle, de "Votre panier" (.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;}Voici 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,
Digismoothie team