Points clés à retenir
- Les couleurs et les polices sont contrôlées dans l’Éditeur de thème sous Paramètres du thème - aucun code n’est requis pour les modifications standard.
- Les couleurs se trouvent sous Paramètres du thème → Couleurs. Les polices se trouvent sous Paramètres du thème → Typographie.
- Les thèmes modernes utilisent des schémas de couleurs que vous pouvez attribuer par section, vous donnant plus de contrôle sur le rythme visuel.
- Pour les couleurs et les polices qui ne sont pas exposées dans les paramètres du thème, le CSS personnalisé ou Fudge gère la modification.
La mise à jour des couleurs et des polices de la marque est l’une des premières choses que font la plupart des marchands lors de la configuration ou de la refonte d’une boutique Shopify. Les deux se trouvent au même endroit : le panneau Paramètres du thème de l’Éditeur de thème.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de vitrine IA utilisé par des centaines de boutiques Shopify, avec une note de 4.9 sur le Shopify App Store.
Où trouver les paramètres de couleurs et de polices sur Shopify
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Dans la barre latérale gauche, faites défiler vers le bas et cliquez sur Paramètres du thème.
Étape 3. Vous verrez les paramètres regroupés par catégorie. Cherchez :
- Couleurs (ou “Jeux de couleurs”) - pour les paramètres de la palette de votre marque
- Typographie (ou “Polices”) - pour les paramètres de la famille et de la taille de la police
Ces deux sections contrôlent l’apparence globale de toute votre boutique.
Comment changer les couleurs sur Shopify
Cliquez sur Couleurs dans les Paramètres du thème. Vous y trouverez des sélecteurs de couleurs pour :
- Couleurs d’arrière-plan - fonds des pages et des sections
- Couleurs de texte - titres et corps de texte
- Couleurs des boutons - remplissage et texte des boutons primaires et secondaires
- Couleurs de bordure et accents - séparateurs, contours des champs, badges
Cliquez sur n’importe quel échantillon de couleur et entrez votre code hex (ex : #1A1A2E). Les modifications s’appliquent globalement à toute votre boutique.
Jeux de couleurs (thèmes modernes). Les thèmes comme Dawn et Horizon utilisent des jeux de couleurs plutôt que de simples couleurs globales. Chaque jeu est un ensemble coordonné de couleurs de fond, de texte et de boutons. Vous définissez les jeux dans les Paramètres du thème, puis vous les attribuez à des sections individuelles. Cela vous permet d’alterner les sections claires et sombres sans régler les couleurs élément par élément.
Comment changer les polices sur Shopify
Cliquez sur Typographie dans les Paramètres du thème. Vous verrez des sélecteurs de polices pour :
- Titres (Headings) - de H1 à H3 pour toute votre boutique
- Corps de texte (Body text) - paragraphes, labels, descriptions de produits
Cliquez sur Modifier à côté de l’une ou l’autre des catégories. La bibliothèque de polices de Shopify s’ouvre, affichant les Google Fonts, les polices système et une sélection de la part de Shopify.
Parcourez ou cherchez par nom, cliquez pour un aperçu, puis cliquez sur Sélectionner. N’oubliez pas d’enregistrer.
À lire aussi : Changer la taille de police des titres sur Shopify.
Comment changer la couleur des polices sur Shopify
Les couleurs des polices font partie des paramètres de Couleurs, et non de la Typographie.
Dans Paramètres du thème → Couleurs, cherchez le champ de couleur du Texte. Cela contrôle globalement la couleur du corps de texte. La couleur du texte des titres peut se trouver dans un champ distinct : cherchez “Couleur des titres” ou “Texte des titres” dans le même panneau.
Pour surcharger (override) une section spécifique, cliquez sur la section dans l’Éditeur de thème → cherchez un sélecteur de Jeux de couleurs dans les paramètres de la section. Le fait de passer la section sur un jeu de couleurs différent modifie à la fois son fond et les couleurs de son texte.
Comment surcharger des couleurs et polices spécifiques avec du CSS
Si une couleur ou une police n’est pas exposée dans les Paramètres du thème, utilisez le CSS personnalisé.
Allez dans Paramètres du thème → faites défiler jusqu’à CSS personnalisé (Custom CSS). Ajoutez vos modifications :
/* Couleur de police personnalisée pour les titres */
h1,
h2,
h3 {
color: #1a1a2e;
}
/* Couleur personnalisée pour les liens */
a {
color: #e63946;
}
/* Fond personnalisé pour les boutons */
.btn-primary,
.button--primary {
background-color: #e63946;
color: #ffffff;
}Trouvez la bonne classe CSS en faisant un clic droit sur un élément de votre boutique en ligne → Inspecter.
Article lié : Modifier les polices sur Shopify.
Pour plus de détails, consultez notre guide sur la modification des couleurs de votre marque sur Shopify.
Comment appliquer des polices personnalisées non incluses dans Shopify
Pour les polices achetées ou propres à votre marque, le processus implique de télécharger (uploader) vos fichiers de police dans les assets de votre thème :
- Uploadez les fichiers
.woff2et.woffvia Boutique en ligne → Thèmes → Actions → Modifier le code → dossier Assets - Ajoutez une règle
@font-facedans votre CSS - Appliquez la police aux titres et au corps de texte
Cela demande des connaissances en CSS. L’alternative consiste à le décrire à Fudge : “Applique notre police de marque [nom de la police] pour les titres et [nom de la police] pour le corps de texte. Les fichiers sont uploadés dans le dossier assets.” Fudge s’occupe de rédiger les déclarations et les applique sous forme de brouillon.
Apporter des modifications de marque de manière cohérente
Lors de la mise à jour des couleurs et des polices, vérifiez ces emplacements pour vous assurer que les modifications sont cohérentes :
- Notifications par e-mail - Admin Shopify → Paramètres → Notifications utilise des paramètres de marque distincts de ceux de votre thème
- Passage en caisse - Admin Shopify → Paramètres → Passage en caisse → Personnaliser la page de paiement possède son propre panneau de marque
- Boutique en ligne → Préférences - contrôle les métadonnées ; il ne s’agit pas de style, mais cela vaut la peine d’y jeter un œil
L’Éditeur de thème contrôle uniquement votre vitrine. L’image de marque du passage en caisse et des e-mails est configurée séparément.
Sur le même sujet : Éditeur de boutique Fudge.
Sur le même sujet : Modifier votre thème Shopify.
Sur le même sujet : Changer la couleur de la police sur Shopify.
Sur le même sujet : Changer la couleur des liens sur Shopify.
Sur le même sujet : Mettre à jour les couleurs de la marque sur Shopify.
Utiliser Fudge pour une refonte complète de la marque
Si vous souhaitez appliquer une nouvelle palette de couleurs et un nouveau système typographique à l’ensemble de votre thème (y compris aux éléments que l’Éditeur de thème n’expose pas), décrivez la modification complète à Fudge:
“Appliquer notre nouvelle image de marque : couleur principale #1A1A2E, accent #E63946, arrière-plan #FAFAFA. Titres en Canela Display, corps de texte en Inter. Appliquer de manière cohérente aux boutons, aux états de survol, aux arrière-plans de section et aux badges.”
Fudge génère les mises à jour CSS complètes sous forme de brouillon. Vous passez tout en revue avant la mise en ligne.
FAQ
Oui, légèrement. Chaque famille de polices personnalisée ajoute un fichier de police à charger. Deux familles (titre + corps) ajoutent généralement entre 60 et 200 Ko au total et un impact sur le LCP d'environ 50 à 200 ms. Les polices système (-apple-system, Arial) se chargent instantanément sans aucune surcharge. Utilisez font-display: swap pour que le texte s'affiche dans une police de secours pendant le chargement de la police personnalisée.
Paramètres → Passage en caisse → Personnaliser possède son propre panneau de marque, distinct du thème. Appliquez les mêmes codes hexadécimaux (arrière-plan, accent, couleur des boutons) que ceux utilisés dans Paramètres du thème → Couleurs. Des couleurs de passage en caisse et de vitrine mal assorties brisent la continuité perçue de la marque au moment le plus crucial.
Oui — téléversez les fichiers .woff2 et .woff dans le dossier assets/ de votre thème, puis ajoutez une déclaration @font-face dans le CSS. Confirmez que votre licence de police autorise l'utilisation sur le web (la plupart des fonderies modernes le font, mais certaines se limitent à des domaines spécifiques). Si vous préférez ne pas écrire le bloc @font-face vous-même, téléversez les fichiers et décrivez ce que vous souhaitez à Fudge ("utiliser GT Walsheim pour les titres et Inter pour le corps") et il rédigera les déclarations et les attributions dans tout votre thème.
Associations courantes à fort taux de conversion : Inter (corps) + Playfair Display (titres) pour les marques éditoriales ; Inter partout pour un style SaaS ; DM Sans + DM Serif Display pour un éditorial moderne ; polices système partout pour des marques rapides/décontractées. Associez des personnalités contrastées (une avec empattement, une sans empattement) pour créer une hiérarchie visuelle.
Cela dépend de votre positionnement. Les titres avec empattement (Playfair, Canela, Tiempos) sont perçus comme éditoriaux, premium, réfléchis — cela fonctionne pour la mode, la beauté, le lifestyle. Le sans empattement (Inter, DM Sans, Söhne) est perçu comme moderne, direct, technique — cela fonctionne pour les produits de type SaaS, l'électronique, les vêtements de sport. Testez les deux avec votre audience.
