Points à retenir
- De nombreux thèmes ont une couleur “Accent” ou “Lien” dans l’Éditeur de thème > Paramètres du thème > Couleurs.
- Si ton thème n’a pas de paramètre dédié à la couleur des liens, cible le sélecteur
aen CSS.- Tu peux styliser les états de survol (hover) des liens séparément en utilisant
a:hoveren CSS.- Fudge peut modifier la couleur des liens à partir d’une simple description si tu ne veux pas écrire de CSS.
Pour changer la couleur d’un lien dans Shopify, va dans Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Couleurs et modifie la pastille Lien ou Accent. Si ton thème n’en a pas, ou si l’accent colore aussi tes boutons, ajoute a { color: #tacouleur; } dans Paramètres du thème → CSS personnalisé.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons aussi Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store.
Méthode 1 - Vérifiez d’abord Paramètres du thème > Couleurs
De nombreux thèmes Shopify modernes intègrent un paramètre de couleur exclusivement dédié aux liens.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Cliquez sur Paramètres du thème dans la barre latérale gauche.
Étape 3. Ouvrez la section Couleurs.
Étape 4. Cherchez une pastille nommée Lien, Accentuation ou Accentuation principale. Si elle existe, cliquez dessus pour modifier la couleur.
Étape 5. Cliquez sur Enregistrer.
Ce que contrôle généralement la couleur d‘“accentuation”
Dans les thèmes qui utilisent une couleur d’accentuation plutôt qu’une couleur de lien spécifique, la couleur d’accentuation affecte généralement :
- Le texte des liens hypertextes
- L’arrière-plan des boutons (boutons principaux)
- La mise en évidence des icônes
- Les éléments de navigation actifs
Changer la couleur d’accentuation modifie tout cela en même temps. Si tu veux uniquement changer les liens — et non les boutons — tu auras besoin de CSS.
Pour modifier l’ensemble de la palette de ta marque, consulte Mettre à jour les couleurs de la marque dans Shopify.
Méthode 2 - Modifier la couleur des liens en CSS
Si ton thème n’a pas de couleur de lien dédiée dans l’Éditeur de thème, ou si tu veux une couleur de lien distincte de celle des boutons, le CSS est la meilleure solution.
Étape 1. Va dans Boutique en ligne > Thèmes > Personnaliser > Paramètres du thème > CSS personnalisé.
Étape 2. Colle les règles ci-dessous et clique sur Enregistrer :
/* Couleur de lien par défaut */
a {
color: #1a4b8c;
}
/* Couleur de lien au survol */
a:hover {
color: #0d2e5e;
}
/* Liens dans une zone spécifique uniquement */
.rte a {
color: #1a4b8c;
}Si ton thème n’a pas de paramètre CSS personnalisé, modifie la feuille de style sur une copie. Duplique ton thème (le menu à trois points (…) à côté de ton thème, puis Dupliquer). Sur la copie, ouvre le menu à trois points (…), puis Modifier le code, ouvre Assets > base.css (ou la feuille de style principale de ton thème — cherche le plus gros fichier .css dans le dossier Assets), ajoute les mêmes règles tout en bas et clique sur Enregistrer. Prévisualise la copie, puis publie-la.
La classe .rte
Dans de nombreux thèmes Shopify, le contenu de l’éditeur de pages et des descriptions de produits est enveloppé dans une classe appelée .rte (rich text editor). Utiliser .rte a comme sélecteur cible uniquement les liens dans ces zones de contenu, sans affecter les liens de navigation ou le texte des boutons.
Pour les couleurs et les polices à l’échelle du thème, consulte Mettre à jour les couleurs et les polices dans Shopify.
Styliser les liens soulignés
Par défaut, les liens dans la plupart des thèmes sont soit toujours soulignés, soit jamais soulignés. Tu peux contrôler cela avec du CSS :
/* Supprimer le soulignement de tous les liens */
a {
text-decoration: none;
}
/* Ajouter un soulignement uniquement au survol */
a:hover {
text-decoration: underline;
}
/* Souligner uniquement les liens dans le corps du texte */
.rte a {
text-decoration: underline;
}Pour commencer par ajouter de nouveaux liens, consulte Ajouter un lien sur du texte dans Shopify.
Modifier la couleur des liens de navigation
Les liens de navigation sont stylisés séparément des liens de contenu dans la plupart des thèmes.
Dans l’Éditeur de thème, vérifiez Paramètres du thème > Couleurs pour une option de couleur de Navigation ou d’En-tête (Header).
Si elle n’existe pas, ciblez les liens de navigation en CSS. Faites un clic droit sur un lien de navigation dans votre navigateur, choisissez Inspecter et notez les noms des classes CSS. Ensuite, ajoutez une règle comme :
.header__menu-item a {
color: #333333;
}Le nom exact de la classe varie selon le thème.
L’utilisation de Fudge pour modifier la couleur des liens
Si tu préfères ne pas écrire de CSS, l’éditeur de boutique de Fudge gère très bien cela. Décris ce que tu veux :
“Change toutes les couleurs des liens hypertextes en #1a4b8c. Au survol, assombris en #0d2e5e.”
“Rends les liens dans les descriptions de produits soulignés et bleus.”
Fudge écrit le CSS et l’applique en tant que brouillon. Tu peux vérifier avant la mise en ligne, et si la nouvelle couleur ne te plaît pas, tu peux annuler la modification en un clic.
Pour la couleur du texte en dehors des liens, consulte Changer la couleur de police dans Shopify.
Aide-mémoire
| Objectif | Méthode |
|---|---|
| Modifier toutes les couleurs de liens | Paramètres du thème > Couleurs > Accentuation/Lien, ou CSS a {} |
| Modifier la couleur du lien au survol | CSS a:hover {} |
| Modifier les liens dans le contenu de la page uniquement | CSS .rte a {} |
| Modifier la couleur des liens de navigation | Paramètres du thème > Couleurs > En-tête, ou CSS sur le sélecteur de navigation |
Comment modifier l’image qui s’affiche lorsqu’on partage un lien Shopify sur les réseaux sociaux ?
C’est un paramètre différent de la couleur du lien : il s’agit de ton image Open Graph (OG). Pour modifier l’image qui apparaît lorsque l’URL de ta boutique est partagée sur Facebook, Twitter ou iMessage, va dans Boutique en ligne → Préférences → Image de partage social et téléverse l’image de ton choix. Les pages de produits et de collections individuelles utilisent leur image mise en avant par défaut. La section de référencement pour les moteurs de recherche de Shopify n’a pas de champ image, donc une image OG personnalisée pour une page unique nécessite un champ méta (metafield) plus une modification du thème. Cela n’a rien à voir avec la couleur des liens hypertextes sur ta boutique.
FAQ
Quelle est la différence entre la couleur d'accentuation et la couleur de lien dans Shopify ?
La couleur d'accentuation est une couleur plus globale du thème qui contrôle plusieurs éléments : les liens, les arrière-plans des boutons principaux, la mise en évidence des icônes, les états de focus. La couleur de lien (lorsqu'elle est définie séparément) ne contrôle que les balises <a>. Si ton thème propose les deux, la couleur de lien l'emporte sur l'accentuation pour les liens. Si seule l'accentuation est disponible, tous ces éléments partagent la même couleur.
Les liens doivent-ils être soulignés dans Shopify ?
Dans le corps du texte (descriptions de produits, articles de blog, texte de page) : oui. Le soulignement est le signal universel "ceci est un lien" et aide l'accessibilité. Dans la navigation : non — le contexte (état au survol, position) signale la possibilité de cliquer. Certaines marques modernes utilisent le soulignement au survol uniquement pour les liens dans le corps du texte — ça fonctionne mais ça nuit un peu à la lisibilité rapide.
Changer la couleur des liens affectera-t-il mon SEO Shopify ?
Pas directement. Google ne classe pas les sites en fonction de la couleur des liens. Pour l'accessibilité, garde un contraste de 4.5:1 pour le texte du lien par rapport à l'arrière-plan, et d'au moins 3:1 par rapport au texte environnant si les liens ne sont pas soulignés.
Comment ne pas modifier les boutons en changeant la couleur des liens ?
Dans les thèmes Shopify qui partagent une couleur "d'accentuation" entre les liens et les boutons, tu as besoin de CSS pour les séparer : cible a:not(.btn):not(.button) pour les liens uniquement. Solution plus simple : décris ce que tu veux à Fudge ("changer toutes les couleurs des liens du texte en bleu marine sans affecter les couleurs des boutons") et il écrira le bon CSS ciblé sans que tu aies à chercher les sélecteurs. Certains thèmes offrent également des contrôles de couleur séparés pour les boutons — vérifie d'abord Paramètres du thème → Couleurs.
Puis-je avoir différentes couleurs de liens dans différentes sections de ma boutique Shopify ?
Oui, via les jeux de couleurs de section (color schemes dans les thèmes modernes) ou le ciblage CSS. Chaque jeu de couleurs peut définir sa propre couleur de lien. Ou bien, cible le CSS comme .section-blog a { color: ... } pour remplacer la couleur des liens uniquement dans des sections spécifiques. Très pratique pour différencier les articles de blog des pages produits où le contexte est différent.
