Points clés
- Les couleurs de la marque se trouvent dans l’éditeur de thème sous Paramètres du thème → Couleurs. Les modifications effectuées ici s’appliquent de manière globale à toute votre boutique.
- Les thèmes Shopify modernes (Dawn, Horizon) utilisent des jeux de couleurs (color schemes) : des palettes spécifiques que vous attribuez par section pour plus de flexibilité.
- Pour les couleurs que votre thème ne permet pas de modifier dans les paramètres, il faudra utiliser des propriétés personnalisées CSS ou modifier le code directement.
- Fudge peut appliquer une palette de couleurs personnalisée sur l’ensemble de votre thème sans que vous ayez à écrire la moindre ligne de CSS.
Que vous souhaitiez moderniser votre marque ou la lancer pour la première fois, la mise à jour des couleurs dans Shopify est une tâche principalement no-code. Voici où trouver ces paramètres et comment en tirer le meilleur parti.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience dans le développement sur Shopify. Nous avons conçu Fudge — un éditeur de boutique IA utilisé par des centaines de boutiques Shopify et noté 5,0 sur le Shopify App Store.
Où mettre à jour les couleurs de sa marque dans Shopify
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Dans la barre latérale de gauche, descendez tout en bas et cliquez sur Paramètres du thème (Theme settings).
Étape 3. Cliquez sur Couleurs (certains thèmes utilisent le terme « Jeux de couleurs » ou « Palette »).
Étape 4. Vous verrez des sélecteurs pour gérer des éléments tels que :
- L’arrière-plan
- Le texte
- Les boutons et le texte des boutons
- Les bordures
- Les liens
- Les badges de promotion
Étape 5. Cliquez sur n’importe quelle pastille de couleur pour ouvrir le sélecteur. Entrez directement un code couleur (par ex. #E63946) ou utilisez le sélecteur visuel.
Étape 6. Cliquez sur Enregistrer une fois que vous avez terminé. Les modifications s’appliquent immédiatement sur toutes vos pages.
Comment modifier les couleurs d’une marque sur Shopify ?
Saisissez les codes de couleurs exacts de votre marque dans le sélecteur de couleurs. Cet outil Shopify accepte :
- Les codes hexadécimaux (Hex) -
#FF5733 - Les valeurs RGB -
rgb(255, 87, 51) - Les valeurs HSL - via le curseur visuel
Utilisez des codes hex pour plus de précision. La charte graphique de votre marque devrait stipuler les valeurs exactes des couleurs utilisées en principal, en secondaire et en accentuation.
Sur le même sujet : Mettre à jour les couleurs et les polices dans Shopify.
Comment fonctionnent les jeux de couleurs dans les thèmes Shopify modernes
Certains thèmes comme Dawn ou Horizon utilisent un système de jeux de couleurs plutôt que des valeurs globales uniques.
Un jeu de couleurs est un petit ensemble regroupant les configurations d’arrière-plan, de texte et de boutons. Ex : « Jeu 1 = fond blanc avec un texte sombre », « Jeu 2 = fond sombre avec un texte clair ».
Vous pouvez attribuer un jeu de couleurs différent pour chaque section. Cela permet de varier l’impact visuel dans votre page sans paramétrer les couleurs une à une.
Pour modifier un jeu de couleurs : Paramètres du thème → Jeux de couleurs → cliquez sur le jeu à modifier → mettez à jour les valeurs des couleurs.
Pour assigner un ce jeu sur une section : cliquez sur la section dans l’Éditeur de thème → cherchez l’option Jeu de couleurs dans les réglages (via la liste déroulante).
Comment naviguer dans Shopify pour mettre à jour les couleurs d’une marque ?
Le chemin d’accès complet : Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Couleurs.
Certains thèmes proposent également un paramétrage de couleurs au niveau de la section. Cliquez sur n’importe quelle section → cherchez une option « Jeu de couleurs » ou « Couleur l’arrière-plan » dans la palette de cette section. Les couleurs ajoutées sur une section remplacent les paramètres par défaut, mais ce de façon limitée pour cette section seulement.
Comment forcer les couleurs avec du CSS
Si une couleur n’est pas modifiable depuis les paramètres de votre thème - comme la couleur ou un survol (hover state) d’une icône spécifique, ou encore dans un élément d’une application tierce - vous pouvez forcer ce changement avec du CSS personnalisé.
Allez dans vos Paramètres de thèmes → descendez à la section CSS personnalisé (Custom CSS) → ajoutez votre code CSS :
.your-element-class {
color: #E63946;
background-color: #FFFFFF;
}Pour trouver la bonne classe : faites un clic droit sur l’élément dans la boutique en ligne publique → Inspecter → vérifiez les attributs de classe de votre élément.
Sur le même sujet : Modifier la couleur des liens dans Shopify.
Comment appliquer une palette de couleurs complète avec Fudge
Si vous rafraîchissez l’image de votre marque et que vous souhaitez appliquer votre nouvelle charte de façon homogène aux boutons, titres, bannières, badges de notification ou dans les interactions avec la souris - et non seulement au sein des paramètres exposés dans votre thème - demandez donc à Fudge:
“Mets à jour la boutique aux couleurs de notre marque : la couleur primaire est le #1a1a2e, l’accentuation le #e63946, et l’arrière-plan le #fafafa. Le texte des boutons doit être blanc. Applique ces couleurs de manière homogène partout sur le site.”
Fudge effectuera alors les remplacements en tant que brouillons, à valider avant la mise en ligne.
Nos astuces pour bien parier sur les couleurs de marque avec Shopify !
- Faites simple. Il vous suffit de définir entre deux et trois couleurs pour structurer et encadrer votre projet. Optez pour une principale pour vos messages et vos titres (CTA), une autre pour surligner ou créer le focus sur l’accent et un fond par défaut plus discret.
- Jouez avec les contrastes. Le texte requiert un contraste suffisant par rapport à son propre décor. Si ce n’est pas clair, vérifiez par WebAIM Contrast Checker.
- Vérifiez la version mobile. Des décisions esthétiques sur vos écrans desktop plus espacés se font parfois plus agressives sur vos écrans mobile. Gardez-y un œil.
