Par défaut, la présentation de notre upsell est vraiment épurée et non agressive. C'est parce que nous pensons qu'un design simple et épuré est plus efficace en termes de conversion.
Cependant, tu peux toujours l'améliorer en tirant parti des options de personnalisation de l'application, telles que Pop-up Customizations settings, Product Page app block Customization settings, ou en appliquant des ajustements de style plus avancés.
Pop-up customization
En utilisant des feuilles de style CSS personnalisées, tu peux modifier pratiquement n'importe quel élément de la fenêtre contextuelle. Cependant, il est nécessaire d'avoir quelques notions de base en CSS pour y parvenir. Pour commencer à utiliser les CSS, nous te recommandons de lire le W3Schools CSS tutorial.
Pour ajuster le code CSS, va sur Customization dans le menu de l'application et trouve la section Advanced Customization. Insère ton code CSS personnalisé à cet endroit.
Liste des sélecteurs
Voici la liste des sélecteurs disponibles que tu peux utiliser pour commencer à styliser le pop-up Candy Rack.
Élément
|
Sélecteur de classe
|
Ajouter un bouton
|
pour la disposition en grille:
|
Bouton Continue
|
|
Bouton No, thank you
|
|
Ligne de produit parent
|
|
Titre de la pop-up
|
|
Produit parent
|
|
Produit de vente incitative
|
|
Prix du produit parent
|
|
Prix de l'offre de vente incitative
|
|
Prix original de l'offre de vente incitative
|
|
Texte de la description
|
|
Exemples de personnalisation des fenêtres contextuelles
Voici quelques exemples de personnalisation à l'aide de codes CSS pour améliorer l'expérience de vente incitative de ton magasin et l'aligner sur la marque de ton magasin.
Personnalisation des boutons "Ajouter", "Continuer" et "Non, merci"
Ce code permet de modifier la couleur d'arrière-plan, la couleur de la police, la couleur de la bordure et la taille de la police. Il modifie également la couleur d'arrière-plan au survol du bouton Ajouter:
.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:hover { background-color: #059e36 !important; /* button color on hover */}
Si tu souhaites appliquer le même style à tous les boutons, tu peux les regrouper en utilisant des virgules pour séparer chaque classe.
.Button-Add, .Button-Primary, .Button-Reject { 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:hover, .Button-Primary:hover, .Button-Reject:hover { background-color: #059e36 !important; /* button color on hover */}
Personnaliser la ligne du produit parent
Ajuster la couleur d'arrière-plan de la section du produit principal.
.Product-Line { background-color: #D9FED9 !important; /* background color */}
Ajuster la taille des polices
Modifier la taille des polices pour le titre de la fenêtre contextuelle, le produit parent et le 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 */}
Comment changer la police utilisée dans la fenêtre contextuelle
Tu peux personnaliser davantage la fenêtre contextuelle en important une police personnalisée et en l'appliquant à des éléments spécifiques.
Tout d'abord, importe la police à l'aide de la règle @import (pour charger un CSS externe qui inclut la police), ou définis-la directement à l'aide de la règle @font-face. Applique ensuite la police à des éléments spécifiques à l'aide de la propriété font-family.
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* attribution d'une nouvelle police au pop-up de Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}
Pop-up Class Selectors Overview
Voici tous les sélecteurs de classe disponibles que tu peux utiliser pour personnaliser le pop-up de Candy Rack. Ces sélecteurs te permettent de styliser divers éléments, tels que les boutons et le texte, ce qui te donne un plus grand contrôle sur l'apparence de la pop-up.
Personnalisation des offres intégrées
Pour ajuster le code CSS de tes offres intégrées à ta page produit, va dans ton éditeur de thème , accède à une page produit, navigue vers Template, ouvre les paramètres du bloc d'application Product Page de Candy Rack, et fais défiler jusqu'au bas de la page pour ajouter le code CSS.
Pour en savoir plus sur l'activation des blocs d'applications pour Candy Rack, consulte l'article Comment ajouter et personnaliser des blocs d'applications pour le placement de la page Produit .
Liste des sélecteurs
Voici la liste des sélecteurs disponibles que tu peux utiliser pour t'aider à commencer à styliser le bloc d'applications de Candy Rack.
Élément
|
Sélecteur de classe
|
Titre de l'offre
|
|
Nom du produit
|
|
Prix original
|
|
Prix réduit
|
|
Texte de la description
|
|
Texte de l'espace réservé
|
|
Exemples de personnalisation du bloc d'application
Voici quelques exemples de personnalisation du bloc d'application à l'aide du code CSS afin d'améliorer l'expérience de vente incitative de ton magasin et de l'aligner sur l'image de marque de ton magasin.
Ajustements de la taille de la police
Modifier la taille de la police du titre de l'offre et du nom de la vente incitative.
.candyrack-ppp-checkbox-layout__offers--title { font-size: 30px !important; /* font size of the offer title */}.candyrack-ppp-checkbox-layout__info--product-name { font-size: 15px !important; /* font size of the upsell name */}
Personnaliser les prix des produits
Modifier la couleur de la police du prix original du produit et du prix réduit pour rendre la réduction plus visible pour les clients.
.candyrack-ppp-checkbox-layout__info--product-price { color: grey !important; /* font color of the offer original price */}.candyrack-ppp-checkbox-layout__info--product-discount-price { color: green !important; /* font color of the sale price */}
Personnaliser le contenu du texte
Modifier les styles de police de la description et du texte de l'espace réservé. Voici les sélecteurs utilisés :
.candyrack-ppp-checkbox-layout__info--offer-description { font-weight: 700 !important; /* font weight of the description text */}.candyrack-ppp-text-input { font-style: italic !important; /* font style of the placeholder text if custom note is enabled */}
App Block Class Selectors Overview
Voici un aperçu des sélecteurs de classe disponibles que tu peux utiliser pour personnaliser le bloc d'application Candy Rack.
Si tu es intéressé par d'autres options pour les développeurs et par l'API publique de Candy Rack, tu peux en savoir plus dans l'article Candy Rack public API & options for developers.
Tu as besoin d'un coup de main ? N'hésite pas à nous contacter par chat ou par e-mail à [email protected]
Happy upselling,
L'équipe de Candy Rack