Points clés
- Les couleurs et les polices se gèrent dans l’éditeur de thème, sous Paramètres du thème - aucun code n’est requis pour les modifications classiques.
- Les couleurs se trouvent dans Paramètres du thème → Couleurs. Les polices sont dans Paramètres du thème → Typographie.
- Les thèmes modernes utilisent des jeux de couleurs que vous pouvez attribuer par section, vous donnant ainsi plus de contrôle sur le rythme visuel.
- Pour les couleurs et polices non disponibles dans les paramètres du thème, le CSS personnalisé ou Fudge prennent le relais.
Mettre à jour les couleurs et les polices de la marque est l’une des premières choses que font la plupart des marchands lors de la création ou de la refonte d’une boutique Shopify. Les deux se trouvent au même endroit : dans 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.8 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.
Assurer la cohérence de vos changements de marque
Lors du changement des couleurs et des polices, vérifiez ces emplacements pour vous assurer que les modifications sont cohérentes :
- Notifications par e-mail - L’Admin Shopify → Paramètres → Notifications utilise des paramètres de marque distincts de ceux de votre thème
- Paiement (Checkout) - L’Admin Shopify → Paramètres → Passage à la caisse → Personnaliser la page de paiement a son propre panneau de marque
- Boutique en ligne → Préférences - contrôle les métadonnées ; il ne s’agit pas de style pur, mais ça vaut la peine d’être revu
L’Éditeur de thème contrôle uniquement votre vitrine. Le branding du checkout et des e-mails sont configurés séparément.
À lire aussi : Fudge Store Editor.
À lire aussi : Éditer votre thème Shopify.
À lire aussi : Changer la couleur de police sur Shopify.
À lire aussi : Changer la couleur des liens sur Shopify.
À lire aussi : Mettre à jour les couleurs de marque sur Shopify.
Utiliser Fudge pour refondre complètement votre marque
Si vous souhaitez appliquer une nouvelle palette de couleurs et un nouveau système typographique à l’ensemble de votre thème (y compris sur des éléments inaccessibles depuis l’éditeur de thème), détaillez votre demande à Fudge :
“Appliquez notre nouvelle identité de marque : couleur principale #1A1A2E, accent #E63946, arrière-plan #FAFAFA. Titres en Canela Display, corps de texte en Inter. À appliquer uniformément sur les boutons, les états de survol, les arrière-plans de section et les badges.”
Fudge se chargera de générer toutes les mises à jour CSS sous forme de brouillon. Vous pourrez tout vérifier 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 du texte) ajoutent généralement entre 60 et 200 Ko au total et ont un impact d'environ 50 à 200 ms sur le LCP. Les polices système (-apple-system, Arial) se chargent instantanément sans aucune surcharge. Utilisez font-display: swap pour que le texte s'affiche avec une police de secours pendant le chargement de la police personnalisée.
Paramètres → Checkout → Personnaliser possède son propre panneau de branding, distinct du thème. Appliquez les mêmes codes hexadécimaux (fond, accent, couleur du bouton) que vous avez utilisés dans Paramètres du thème → Couleurs. Des couleurs incohérentes entre la boutique et le checkout 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 en CSS. Vérifiez que la licence de votre police autorise l'utilisation 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 ("utilise GT Walsheim pour les titres et Inter pour le corps") et il s'occupera des déclarations et des affectations dans tout votre thème.
Combinaisons 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 ; des polices système partout pour les marques rapides/décontractées. Associez des personnalités contrastées (une serif, une sans-serif) pour créer une hiérarchie visuelle.
Cela dépend de votre positionnement. Les titres serif (Playfair, Canela, Tiempos) font plus éditorial, premium, réfléchi — idéal pour la mode, la beauté, le lifestyle. Les polices sans-serif (Inter, DM Sans, Söhne) font plus moderne, direct, technique — parfait pour les produits de type SaaS, l'électronique, les vêtements de sport. Testez les deux auprès de votre audience.