Couleurs et modèles
Personnalisez les couleurs, les boutons et les modèles d'un verrou, et visualisez le résultat en direct avant d'enregistrer.
Chaque verrou de Sami B2B Lock, Password Protect conserve ses propres paramètres de design (couleurs, style des boutons et quelques options d’affichage), totalement indépendants de ceux des autres verrous. Votre catalogue de gros protégé par un code d’accès peut donc avoir un aspect très différent de votre message « connectez-vous pour voir cette collection », même si les deux sont créés avec la même application. Rien de ce que vous faites sur cette page n’affecte un autre verrou.
Ouvrir le panneau de design d’un verrou
Section intitulée « Ouvrir le panneau de design d’un verrou »- Ouvrez l’application et accédez à Locks, puis ouvrez le verrou à restyliser (ou créez-en un nouveau).
- Dans l’onglet Lock setup, repérez la carte Preview à droite et cliquez sur Customize templates.
Cliquez sur Customize templates dans la carte Preview de l’éditeur de verrou.
- Le panneau plein écran Customize templates s’ouvre. La barre latérale gauche liste les écrans que ce verrou peut afficher : Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link et Country Restriction, ainsi qu’une commande Collapse sidebar en bas. Cliquez sur un écran pour charger ses paramètres Translation et Design dans la colonne centrale, avec un aperçu en direct à droite.
Le panneau Customize templates : choisissez un écran à gauche, personnalisez-le au centre et vérifiez le résultat à droite.
- Dans la colonne centrale, faites défiler au-delà de la section Translation (décrite dans Traduire les messages de verrouillage) jusqu’à la section Design située en dessous. Tout ce guide concerne cette section Design.
Couleurs
Section intitulée « Couleurs »Chaque couleur est un échantillon accompagné de sa valeur hexadécimale. Cliquez sur l’échantillon (ou sur l’icône de crayon) pour ouvrir le sélecteur, choisissez ou saisissez une couleur, et l’aperçu en direct à droite se met à jour immédiatement.
Pour l’écran Passcode, par exemple, vous disposez de :
| Champ | Style appliqué à |
|---|---|
| Color button text | Le libellé du bouton Submit |
| Color text | Le texte du message de verrouillage |
| Color input passcode | Le texte saisi par la personne dans le champ du code d’accès |
| Box shadow color | L’ombre portée de la carte, lorsque Box shadow est activé |
| Background button | Le fond du bouton Submit |
| Background notification | Le fond de la carte de verrouillage |
| Background input passcode | Le fond du champ du code d’accès |
Chaque couleur affiche un échantillon et sa valeur hexadécimale ; cliquez pour ouvrir le sélecteur.
Options Box shadow et image du logo
Section intitulée « Options Box shadow et image du logo »Deux interrupteurs se trouvent tout en haut de la section Design, au-dessus des sélecteurs de couleur :
- Box shadow : ajoute une ombre portée autour de la carte de verrouillage (sa couleur est définie par Box shadow color ci-dessous).
- Use image : affiche l’illustration du verrou sur la carte. Désactivez-le pour obtenir une carte uniquement textuelle.
Activez Box shadow ou Use image pour modifier la présentation de la carte de notification.
Placeholder card
Section intitulée « Placeholder card »Sélectionnez Placeholder card dans la barre latérale pour personnaliser ce que voient les personnes à la place d’un produit verrouillé lorsqu’il apparaît dans une liste, par exemple sur une page de collection.
L’écran Placeholder card contrôle l’apparence des articles verrouillés dans les listes de produits.
CSS personnalisé par verrou
Section intitulée « CSS personnalisé par verrou »En bas de la section Design, un éditeur Custom css est disponible. Tout ce que vous y saisissez s’applique uniquement aux widgets de ce verrou : c’est un bon endroit pour un petit ajustement dont votre thème a besoin (une taille de police, une marge) sans toucher à la feuille de style de votre thème.
Chaque verrou a son propre éditeur Custom css pour des ajustements ponctuels.
Le panneau d’aperçu en direct
Section intitulée « Le panneau d’aperçu en direct »La colonne de droite du panneau Customize templates affiche toujours un aperçu en direct, au style de la vitrine, de l’écran sélectionné : vos modifications de couleur et de style apparaissent instantanément, sans enregistrement. En haut du panneau, un sélecteur Desktop preview / Mobile preview vous permet de vérifier le rendu du même écran à chaque taille.
Passez de l’aperçu ordinateur à l’aperçu mobile pour vérifier les deux mises en page avant d’enregistrer.
Comme ce panneau se trouve dans l’éditeur d’un verrou précis, l’aperçu reflète toujours les paramètres propres à ce verrou (contenu, règles et design), et non un exemple générique.