Ta template nuancier
Tout ce qu'il faut savoir pour personnaliser et utiliser ton nuancier, étape par étape — même sans aucune connaissance technique.
1Récupérer ton fichier
Ta template est un seul fichier : index.html. C'est tout ton nuancier — la page, le design, tes futures couleurs — contenu dans ce fichier unique. Télécharge-le et garde-le précieusement quelque part (par exemple dans un dossier "Mon nuancier").
Il s'appelle déjà index.html exprès : c'est le nom que Netlify, Vercel (et la plupart des hébergeurs) reconnaissent automatiquement comme la page d'accueil d'un site. Garde ce nom tel quel, tu n'as rien à modifier — dépose-le simplement tel qu'il est à l'étape suivante.
Sur ordinateur, tu peux ouvrir ce fichier en double-cliquant dessus : il s'ouvre dans ton navigateur, entièrement fonctionnel. Sur iPhone/iPad, ce n'est pas le cas : appuyer dessus dans l'app Fichiers n'ouvre qu'un aperçu figé, sur lequel rien n'est cliquable. C'est normal, ce n'est pas un bug. La solution : passe directement à l'étape suivante (mettre ton nuancier en ligne) — une fois en ligne, ton nuancier fonctionne normalement sur n'importe quel appareil, et tu peux le personnaliser directement depuis le lien.
2Mettre ton nuancier en ligne
Pour que tes clientes puissent consulter ton nuancier via un lien (et pour pouvoir le personnaliser facilement, y compris depuis ton téléphone), il faut l'héberger quelque part. Quelques options simples et gratuites :
Le plus simple : héberge le fichier sur un service gratuit comme Netlify (leur outil "Netlify Drop" permet de glisser-déposer le fichier, même depuis un téléphone, et génère un lien immédiatement) ou Vercel. Une recherche "héberger un fichier HTML gratuitement" te donnera des tutoriels pas à pas.
Alternative : si tu as déjà un site (Wix, Squarespace...), certains permettent d'intégrer une page HTML personnalisée — vérifie dans les paramètres de ton site.
Une fois en ligne, tu obtiens un lien (ex : https://tonnuancier.netlify.app). C'est ce lien que tu utiliseras pour tout — le partager à tes clientes, et le personnaliser toi-même (étapes suivantes).
3Personnaliser ton lien Netlify (gratuit)
Netlify Drop attribue un nom au hasard à ton lien (par exemple quirky-panda-ab12cd.netlify.app). Tu peux le remplacer gratuitement par un nom à toi, sans acheter de nom de domaine :
- Depuis ton site sur Netlify, va dans "Site configuration" (ou "Site settings").
- Cherche "Change site name" (dans la partie "Site details" / "General").
- Choisis un nom disponible, par exemple tonprenom-nuancier → ton lien devient https://tonprenom-nuancier.netlify.app.
Ce nouveau lien fonctionne exactement comme l'ancien — pense simplement à le repartager à tes clientes s'il a déjà été communiqué.
4Envie d'un nom à toi ? (optionnel)
Le lien fourni par Netlify ou Vercel (ex : tonnuancier.netlify.app) fonctionne très bien et suffit largement pour démarrer. Si tu préfères un lien plus personnalisé à ton nom (ex : www.tonprenom.com), tu peux acheter un nom de domaine — voici comment faire, et un piège à éviter absolument.
Ces plateformes proposent d'acheter un nom de domaine directement chez elles, mais ce qu'elles ne disent pas clairement : le domaine reste leur propriété, pas la tienne. Si tu veux un jour le récupérer, le déplacer ailleurs, ou simplement en changer la configuration, elles demandent des frais de transfert qui peuvent monter jusqu'à 70$. Achète toujours ton nom de domaine directement chez un vrai registrar (voir ci-dessous) : c'est moins cher, et il t'appartient vraiment dès le départ, sans dépendre d'un service tiers.
Où acheter ton nom de domaine : passe par un registrar reconnu, par exemple Vercel Domains, Namecheap, OVH ou Google Domains. Compte entre 10€ et 20€ par an pour un .com.
Comment le relier à ton nuancier :
- Une fois le domaine acheté, va dans les paramètres de ton hébergeur (Netlify ou Vercel) et cherche "Domains" / "Domaines personnalisés".
- Ajoute ton nom de domaine (ex : tonprenom.com).
- Ton hébergeur t'indiquera des informations techniques (des "enregistrements DNS", de type A ou CNAME) à recopier dans les paramètres de ton domaine, chez le registrar où tu l'as acheté.
- Le lien met parfois quelques heures avant de fonctionner partout, c'est normal.
En cas de doute à cette étape, une recherche "connecter un nom de domaine à Netlify" (ou Vercel) te donnera un tutoriel pas à pas avec captures d'écran.
5Débloquer l'espace admin
Trois boutons te permettent de gérer ton nuancier — invisibles pour tes clientes, ils n'apparaissent que pour toi une fois connectée. Trois façons de te connecter :
- Le bouton "🔐 Connexion" (recommandé) : tout en bas de la page, dans le pied de page. Une fenêtre te demande ton code secret.
- Lien direct : ouvre ton nuancier en ajoutant ?admin=1 à la toute fin de l'adresse (par exemple : https://tonnuancier.netlify.app/?admin=1).
- Geste caché : tape 5 fois rapidement sur le pied de page. La même fenêtre apparaît.
Le code de départ est MONCODE2026.
Change ce code tout de suite avant de partager ton nuancier ! Une fois connectée, clique sur "🔑 Changer mon mot de passe" dans le pied de page — pas besoin de toucher au code, ni d'éditeur de texte.
Une fois connectée, ces boutons apparaissent, chacun avec un seul rôle :
- "+" en bas à droite — ajouter et gérer tes couleurs de vernis.
- "🎨 Personnaliser le thème de mon nuancier" (pied de page) — ton nom affiché et les couleurs de ta page.
- "🔑 Changer mon mot de passe" (pied de page).
- "🔒 Déconnexion" (pied de page) — recache tout sur cet appareil (remplace "🔐 Connexion" une fois connectée).
Ton mot de passe n'est jamais stocké en clair — seule son empreinte chiffrée (hachage) est gardée, y compris dans le fichier lui-même. En plus, après 5 codes erronés, l'accès se bloque 60 secondes avant de pouvoir réessayer. Cécile Glow / Ton Nuancier Digital ne te demandera jamais ton mot de passe par email, SMS ou message — ne le communique à personne.
6Personnaliser ton nuancier
Une fois connectée, clique sur "🎨 Personnaliser le thème de mon nuancier" dans le pied de page. Tout se fait sur place, sans toucher au code :
- Nom affiché — remplace "Ton Prénom" par ton nom ou celui de ton activité. Il se met à jour en haut de la page et dans le pied de page.
- Emoji devant les notes — l'emoji (⭐ par défaut) qui accompagne une note sur une couleur (ex : un supplément French). Change-le pour celui que tu préfères.
- Couleurs de ton espace — fond, texte, cartes, titres et accent (boutons/liens). Un aperçu s'affiche en direct pendant que tu choisis, avant même d'enregistrer.
Clique sur "Enregistrer mes réglages" pour sauvegarder. Une erreur de couleur ? "↩️ Revenir aux couleurs et au nom d'origine" remet tout comme au départ.
Pour aller plus loin (optionnel, sur ordinateur uniquement) : si tu es à l'aise avec le code, tu peux aussi ouvrir le fichier avec un éditeur de texte (Bloc-notes, TextEdit, VS Code…), chercher le mot familles et modifier directement les couleurs d'exemple par les tiennes. Ce n'est jamais nécessaire — tout est possible depuis le site.
7Ajouter une couleur
Une fois connectée, clique sur le bouton rond "+" en bas à droite pour ouvrir le formulaire d'ajout :
- Nom de la couleur — obligatoire.
- Famille — choisis une famille existante ou crée-en une nouvelle avec "➕ Nouvelle famille…".
- Sous-catégorie — le type de couleur (Vif, Foncé, Pastel, Pailleté, Cat Eyes, Chrome...). Tu peux aussi en créer une nouvelle.
- Référence — optionnel, le code de ton fournisseur si tu en as un.
- Couleur — choisis une teinte au plus proche avec le sélecteur, ou tape un code couleur si tu le connais.
- Photo — optionnel, ajoute une vraie photo de la couleur posée. Sans photo, c'est la couleur unie qui s'affiche.
- Crédit photo — optionnel, mais recommandé si la photo ne vient pas de toi. Tu peux indiquer la source ici, par exemple un compte Instagram ou un site de marque. Elle s'affiche automatiquement en légende quand la photo est agrandie.
- Version French — optionnel, pour ajouter une photo et une note spécifique si cette couleur est aussi proposée en French (finition avec le bout blanc).
Fais une recherche Google Images avec le nom du vernis + le nom de la marque (ex : "Rose Poudré OPI"). Choisis une image qui représente bien le rendu réel de la couleur, puis indique sa source dans le champ "Crédit photo" — c'est important de toujours créditer une image qui ne vient pas de toi.
Clique sur "Enregistrer la couleur" : elle apparaît immédiatement dans ton nuancier.
8Utiliser l'onglet Inspirations
En haut de ton nuancier, un deuxième onglet "Inspirations" te permet de présenter des réalisations complètes (une pose, un modèle) en plus de ta liste de couleurs.
- Clique sur l'onglet "Inspirations" pour y accéder. Le bouton "+" change de rôle : il ajoute désormais une inspiration au lieu d'une couleur.
- Photo — la photo de la réalisation.
- Titre / description — optionnel, pour donner le contexte (occasion, style...).
- Couleurs utilisées — relie une ou plusieurs couleurs de ton nuancier à cette inspiration. Tes clientes pourront cliquer sur une couleur depuis la fiche inspiration pour retrouver sa fiche complète.
Comme pour tes couleurs, une inspiration ajoutée n'est d'abord visible que sur cet appareil : pense à télécharger et remettre en ligne le fichier à jour (étape 9) pour que tes clientes la voient aussi.
Sans passer par une base de données externe, ton fichier peut contenir confortablement jusqu'à 60 couleurs avec photos + 20 inspirations (ou 80 couleurs si tu n'utilises pas du tout l'onglet Inspirations). Si un ajout ne s'enregistre pas, un message te l'indique clairement — voir la question "Quelle est la capacité de mon nuancier ?" dans la FAQ.
9Gérer tes couleurs
Dans le panneau "+", la section "Toutes les couleurs" liste toutes tes teintes. Tu peux filtrer par nom ou famille avec la barre de recherche. Pour chaque couleur, trois boutons :
- ✏️ Modifier : ouvre le formulaire rempli avec les informations actuelles de la couleur — change ce que tu veux (nom, famille, référence, couleur, photo, crédit, saison, version French) sans avoir à la supprimer et la recréer.
- 🚫 / ✅ Rupture de stock : la couleur reste visible pour tes clientes, mais grisée avec un badge "Rupture de stock". Reclique pour la remettre en stock.
- 🗑 Supprimer : retire définitivement la couleur. Une confirmation te sera demandée avant.
En cliquant sur ✏️, le formulaire se remplit automatiquement avec les informations actuelles et le titre passe à "Modifier la couleur" — modifie ce que tu veux, puis clique sur "Enregistrer les modifications". Tu peux annuler à tout moment sans rien changer avec "Annuler la modification".
10Sauvegarder tes changements
Tes ajouts sont d'abord sauvegardés uniquement sur l'appareil où tu les as faits (ton téléphone, par exemple). Pour qu'ils soient visibles partout et sur tous les appareils, il faut télécharger le fichier à jour et le remettre en ligne.
Dans le panneau "+" ou dans "🎨 Personnaliser le thème", clique sur "⬇️ Télécharger le fichier complet à jour" (le bouton est présent dans les deux). Un nouveau fichier est téléchargé, avec toutes tes couleurs et tes réglages de thème. C'est ce nouveau fichier que tu dois utiliser pour remplacer l'ancien, là où tu l'héberges (étape 2). Partage ton lien à tes clientes (bio Instagram, SMS avant rendez-vous...) — garde le lien avec ?admin=1 pour toi seule.
11Questions fréquentes
Quelle est la capacité de mon nuancier (couleurs + inspirations) ?
Ton nuancier fonctionne sans base de données externe : tout est gardé dans le fichier et sur l'appareil où tu ajoutes du contenu. Ça reste largement confortable jusqu'à 60 couleurs avec photos + 20 inspirations (ou 80 couleurs seules si tu n'utilises pas l'onglet Inspirations). Si tu approches la limite, un message te préviendra clairement au moment de l'enregistrement — dans ce cas, télécharge d'abord le fichier à jour pour ne rien perdre, remets-le en ligne, puis poursuis tes ajouts. Besoin de beaucoup plus de capacité ? Contacte-moi : une version avec une vraie base de données existera pour ce cas-là.
J'ai oublié mon mot de passe admin, que faire ?
Ton mot de passe n'est jamais stocké en clair (même pas dans le fichier), donc impossible de simplement "aller le lire" quelque part. Voici comment le réinitialiser :
- Ouvre le fichier avec un éditeur de texte (Bloc-notes, TextEdit, VS Code…), cherche PARAMETRES tout en haut du <script>.
- Remplace toute la valeur de "codeAdminHache" par : 2133e79e4e4e06092d08b3fc79e0a3b710a4a88d9568839e5a4fda29151884a4 (garde les guillemets autour).
- Sauvegarde, remets le fichier en ligne, puis connecte-toi avec le code de départ MONCODE2026.
- Change immédiatement de mot de passe depuis "🔑 Changer mon mot de passe".
Puis-je changer les couleurs du design (le fond, les boutons...) ?
Oui, directement depuis le site : une fois connectée, clique sur "🎨 Personnaliser le thème de mon nuancier" dans le pied de page — fond, texte, cartes, titres et accent se modifient avec un aperçu en direct, sans toucher au code.
J'ai supprimé une couleur par erreur, comment la récupérer ?
Si tu n'as pas encore téléchargé le fichier à jour après la suppression, recharge simplement la page sans enregistrer : rien n'est perdu. Si tu as déjà téléchargé et remplacé ton fichier, il faut rajouter la couleur manuellement.
Puis-je revendre ou redistribuer ce fichier ?
Non. Ton achat te donne un droit d'usage pour ta propre activité (ton nuancier, tes couleurs, à toi ou à ton entreprise) — pas un droit de revente, de redistribution ou de publication du fichier, modifié ou non, à des tiers.
J'ai un souci technique, qui contacter ?
Réponds directement au message que tu as reçu après ton achat, ou contacte-moi via les coordonnées indiquées sur la page de vente.
Envie d'idées concrètes pour utiliser ton nuancier au quotidien avec tes clientes (messages types, sélection de couleurs...) ? Va voir le guide logistique, accessible depuis ton espace membre.