Points clés
- De nombreux thèmes ont une couleur d‘“Accent” ou de “Lien” dans l’Éditeur de thème > Paramètres du thème > Couleurs.
- Si votre thème n’a pas de paramètre dédié à la couleur des liens, ciblez le sélecteur
aen CSS.- Vous pouvez styliser séparément les états au survol des liens en utilisant
a:hoveren CSS.- Fudge peut modifier la couleur des liens à partir d’une simple description en langage naturel si vous préférez ne pas écrire de CSS.
La couleur des liens est l’un de ces paramètres que certains thèmes affichent clairement, et que d’autres cachent dans le code. Voici où chercher, et comment le modifier dans les deux cas.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également développé Fudge - un éditeur de boutique assisté par IA qui bénéficie d’une note de 5,0 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 (accent) plutôt qu’une couleur de lien spécifique, cette couleur affecte généralement :
- Le texte des hyperliens
- L’arrière-plan des boutons (boutons principaux)
- La mise en valeur des icônes
- Les éléments actifs du menu de navigation
Changer la couleur d’accentuation modifiera tout cela en même temps. Si vous souhaitez uniquement modifier la couleur des liens - et non celle des boutons - vous devrez utiliser le CSS.
Méthode 2 - Modifier la couleur des liens en CSS
Si votre thème n’a pas de couleur de lien dédiée dans l’Éditeur de thème, ou si vous voulez que vos liens aient une couleur différente de celle de vos boutons, le CSS est la meilleure solution.
Étape 1. Dupliquez votre thème. Allez dans Boutique en ligne > Thèmes > Actions > Dupliquer.
Étape 2. Sur votre thème actif, allez dans Actions > Modifier le code.
Étape 3. Ouvrez le dossier Assets > base.css (ou la feuille de style principale de votre thème - cherchez le plus gros fichier .css dans le dossier Assets).
Étape 4. Ajoutez ces règles CSS tout en bas du fichier :
/* Couleur par défaut des liens */
a { color: #1a4b8c; }
/* Couleur des liens au survol (hover) */
a:hover { color: #0d2e5e; }
/* Liens uniquement à l'intérieur d'une zone spécifique */
.rte a { color: #1a4b8c; }Étape 5. Cliquez sur Enregistrer.
La classe .rte
Dans de nombreux thèmes Shopify, le contenu de l’éditeur de Pages et des descriptions de produits est imbriqué dans une classe nommée .rte (rich text editor). L’utilisation de .rte a comme sélecteur permet de cibler uniquement les liens dans ces zones de contenu, sans impacter les liens de la navigation ou le texte des boutons.
Article lié : Mettre à jour les couleurs et les polices sur Shopify.
Styliser les liens soulignés
Par défaut, les liens dans la vaste majorité des thèmes sont soit toujours soulignés, soit jamais soulignés. Vous avez la possibilité de gérer ce comportement avec le CSS :
/* Supprime le soulignement de tous les liens */
a { text-decoration: none; }
/* Ajoute le soulignement uniquement au survol */
a:hover { text-decoration: underline; }
/* Souligne uniquement les liens présents dans le corps du texte */
.rte a { text-decoration: underline; }Modifier la couleur des liens de navigation
Les liens de navigation et ceux du corps de page ont des styles distincts dans la plupart des thèmes.
Dans l’Éditeur de thème, rendez-vous dans la section Paramètres du thème > Couleurs et cherchez une option appelée Navigation ou En-tête.
Si vous ne trouvez rien, ciblez les liens de navigation (nav) en CSS. Faites un clic droit sur un de ces liens dans votre navigateur, choisissez Inspecter, et relevez les noms des classes CSS. Ajoutez ensuite une règle comme celle-ci :
.header__menu-item a { color: #333333; }Le nom exact de la classe varie d’un thème à l’autre.
L’utilisation de Fudge pour modifier la couleur des liens
Si l’idée d’écrire en langage CSS ne vous enthousiasme pas, Fudge s’en occupe parfaitement pour vous. Vous n’avez qu’à décrire ce que vous souhaitez accomplir :
“Bascule la couleur de tous les hyperliens sur la valeur #1a4b8c. Au survol, obscurcis-les en #0d2e5e.”
“Fais que les liens dans les descriptions de produits soient bleus et soulignés.”
Fudge se chargera d’écrire le CSS et de l’appliquer en tant que brouillon. Il ne vous restera plus qu’à vérifier et le publier.
Article lié : Changer la couleur de la police sur Shopify.
Aide-mémoire
| Objectif | Méthode |
|---|---|
| Changer la couleur de tous les liens | Paramètres du thème > Couleurs > Accentuation/Lien, ou CSS a {} |
| Changer la couleur des liens au survol | CSS a:hover {} |
| Changer uniquement les liens dans le contenu des pages | CSS .rte a {} |
| Changer la couleur des liens de la barre de navigation | Paramètres du thème > Couleurs > En-tête, ou en CSS en ciblant un sélecteur de nav |
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 des liens — c’est votre image Open Graph (OG). Pour changer l’image qui s’affiche quand l’URL de votre boutique est partagée sur Facebook, Twitter ou iMessage, allez dans Boutique en ligne → Préférences → Image de partage social et téléversez l’image de votre choix. Par défaut, les pages individuelles de produits et de collections utilisent leur propre première image. Pour personnaliser les images OG par page, modifiez la section SEO de chaque page. Cela n’a rien à voir avec la couleur des liens sur votre boutique.
FAQ
La couleur d'accent est une couleur plus générale du thème qui contrôle plusieurs éléments : les liens, l'arrière-plan des boutons principaux, la surbrillance des icônes, les états de focus. La couleur des liens (lorsqu'elle est distinguée séparément) ne contrôle que les balises <a>. Si votre thème propose les deux, la couleur des liens prime sur celle d'accent pour les liens. Si seule l'accentuation est proposée, tous ces éléments partagent la même couleur.
Dans le contenu principal (descriptions de produits, articles de blog, texte de la page) : oui. Le soulignement est le signal universel signifiant "ceci est un lien" et favorise l'accessibilité. Dans la navigation : non — le contexte (état au survol, position) indique qu'on peut cliquer. Certaines marques modernes ne soulignent les liens du texte qu'au survol — cela fonctionne, mais nuit légèrement à la lecture rapide (skim readability).
Pas directement. Google ne base pas son classement sur la couleur des liens. Toutefois, des couleurs de lien à faible contraste nuisent à l'accessibilité (WCAG), ce qui est un signal de classement indirect. Assurez-vous d'avoir un contraste d'au moins 3:1 par rapport à l'arrière-plan, et que les liens se distinguent visuellement du texte environnant — pas seulement par leur couleur.
Dans les thèmes Shopify qui partagent une couleur "accent" entre les liens et les boutons, vous avez besoin de CSS pour les séparer : ciblez a:not(.btn):not(.button) uniquement pour les liens. Plus simple : décrivez ce que vous voulez à Fudge ("changer tous les liens du texte en bleu marine sans toucher à la couleur des boutons") et l'outil écrit le bon CSS ciblé sans que vous ayez à partir à la chasse aux sélecteurs. Certains thèmes offrent aussi des contrôles séparés pour la couleur des boutons — vérifiez d’abord dans les Paramètres du thème (Theme settings) → Couleurs.
Oui, via les jeux de couleurs des sections (color schemes) sur les thèmes récents ou le ciblage CSS. Chaque jeu de couleurs peut définir sa propre couleur de lien. Sinon, vous pouvez scoper le CSS de cette façon .section-blog a { color: ... } pour écraser la couleur des liens dans des sections spécifiques uniquement. Très utile pour différencier les articles de blog des pages produits où le contexte est différent.
Sur le même sujet : Ajouter un lien sur du texte dans Shopify.
Sur le même sujet : Mettre à jour les couleurs de la marque dans Shopify.