Points clés à retenir
- Dans l’éditeur de page Shopify, sélectionnez du texte et cliquez sur l’icône de lien dans la barre d’outils pour ajouter un hyperlien.
- Dans les blocs de texte de l’éditeur de thème, certains disposent d’un champ dédié aux liens — aucune sélection de texte n’est nécessaire.
- Pour un contrôle total sur le style et l’emplacement des liens, utilisez des balises d’ancrage HTML dans l’éditeur de code ou via Fudge.
- Vous pouvez créer des liens vers des pages internes, des produits, des collections ou des URL externes.
Ajouter un lien cliquable à un texte dans Shopify dépend de l’endroit où se trouve ce texte. La méthode diffère pour le contenu des pages, les sections de l’éditeur de thème et le code. Ce guide couvre les trois.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge — un éditeur de boutique par IA avec une note de 5.0 sur le Shopify App Store.
Comment ajouter un lien à un texte dans l’éditeur de page Shopify
Cela s’applique au texte dans Boutique en ligne → Pages ou Boutique en ligne → Articles de blog.
Étape 1. Allez dans Boutique en ligne → Pages (ou Articles de blog) et ouvrez la page que vous souhaitez modifier.
Étape 2. Dans la zone de contenu, sélectionnez le texte que vous souhaitez transformer en lien. Mettez-le en surbrillance avec votre curseur.
Étape 3. Cliquez sur l’icône de lien dans la barre d’outils de l’éditeur (elle ressemble à un maillon de chaîne). Une fenêtre contextuelle apparaît vous demandant l’URL.
Étape 4. Entrez l’URL. Pour les liens internes, utilisez le chemin relatif : /products/mon-produit, /collections/soldes, /pages/a-propos. Pour les liens externes, utilisez l’URL complète incluant https://.
Étape 5. Cliquez sur Appliquer ou Insérer, puis enregistrez la page.
Le texte sélectionné est maintenant un lien hypertexte cliquable, mis en forme avec les styles de lien par défaut de votre thème.
Sur le même sujet : Modifier les menus de navigation dans Shopify.
Sur le même sujet : Changer la couleur des liens dans Shopify.
Sur le même sujet : Créer une nouvelle page dans Shopify.
Sur le même sujet : Ajouter un lien à une image dans Shopify.
Comment insérer un lien cliquable dans du texte ?
Si vous souhaitez que le lien s’ouvre dans un nouvel onglet, cliquez sur l’icône de lien dans la barre d’outils, entrez l’URL, et cherchez la case à cocher “Ouvrir dans un nouvel onglet” avant de confirmer. Il est généralement préférable que les liens externes s’ouvrent dans un nouvel onglet ; ce n’est pas nécessaire pour les liens internes.
Comment ajouter un lien à un texte dans l’éditeur de thème Shopify
Les blocs de texte à l’intérieur des sections de l’éditeur de thème fonctionnent différemment du contenu de la page.
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Cliquez sur la section ou le bloc contenant votre texte.
Étape 3. Dans le panneau de configuration à gauche, cherchez un champ Lien ou URL sous le champ de saisie de texte. Certains blocs de texte l’incluent ; d’autres non.
Étape 4. Saisissez la destination du lien et enregistrez.
Si un bloc de texte ne comporte pas de champ de lien, vous ne pouvez pas transformer ce texte en lien hypertexte uniquement via l’éditeur de thème. Vous devrez l’ajouter via le code ou Fudge.
Remarque : Les blocs de texte enrichi dans l’éditeur de thème (sections avec un éditeur WYSIWYG) prennent en charge les liens contextuels — sélectionnez le texte dans le champ de texte enrichi et cherchez l’icône de lien dans cette mini barre d’outils.
Comment ajouter un lien à un texte en utilisant le HTML
Pour un contrôle plus précis, vous pouvez utiliser une balise d’ancrage HTML directement dans le contenu de votre page Shopify ou dans les fichiers du thème.
Syntaxe de base :
<a href="/products/mon-produit">Acheter la collection</a>Ouvrir dans un nouvel onglet :
<a href="https://example.com" target="_blank" rel="noopener">Visiter le site</a>Où l’utiliser :
- Dans l’éditeur de page Shopify, passez en vue HTML (cherchez
< >ou “Afficher le HTML” dans la barre d’outils) et insérez la balise directement. - Dans les fichiers du thème (sections, snippets, modèles), modifiez-les via Boutique en ligne → Thèmes → Actions → Modifier le code.
Utilisez toujours rel="noopener" lors de la création de liens vers des URL externes avec target="_blank".
Comment lier du texte à un produit, une collection ou une page dans Shopify
Les URL de Shopify suivent un modèle cohérent :
| Destination | Format de l’URL |
|---|---|
| Produit | /products/handle-du-produit |
| Collection | /collections/handle-de-la-collection |
| Page | /pages/slug-de-la-page |
| Blog | /blogs/news |
| Article de blog | /blogs/news/slug-de-l-article |
| Panier | /cart |
| Externe | https://url-complete.com |
Le “handle” ou “slug” est la version du nom adaptée aux URL - en minuscules, avec des traits d’union à la place des espaces. Vous pouvez trouver le handle d’un produit dans l’interface d’administration Shopify → Produits → cliquez sur le produit → regardez l’URL ou la section SEO en bas de la page.
Comment ajouter un lien à un texte dans Shopify en utilisant Fudge
Si vous avez besoin de liens à des endroits que l’Éditeur de thème ne prend pas en charge nativement - dans une section personnalisée, un tableau, ou avec un style différent des liens par défaut - décrivez-le à Fudge:
“Ajoute un lien ‘En savoir plus’ au deuxième paragraphe de la section des fonctionnalités du produit sur ma page d’accueil, pointant vers /pages/how-it-works.”
Fudge prépare la modification de code sous forme de brouillon pour que vous puissiez la vérifier avant la mise en ligne.
FAQ
Le plus souvent, le lien n'a pas été appliqué au texte sélectionné - l'icône de lien de la barre d'outils nécessite de surligner le texte avant de s'activer. Autres causes : une règle CSS du thème qui désactive les pointer-events sur le conteneur parent, ou le lien a été inséré puis enveloppé dans un autre élément via la vue HTML, ce qui a cassé la balise d'ancrage.
Dans l'éditeur de page, sélectionnez le texte lié et cliquez à nouveau sur l'icône de lien - il y a généralement une option "Dissocier" ou "Supprimer le lien" dans la popup. Alternativement, passez en vue HTML et supprimez les balises <a href="..."> autour du texte.
Une URL relative comme /products/my-product fonctionne sur n'importe quelle vitrine et suit le domaine sur lequel vous êtes (idéal pour les liens internes - ils continuent de fonctionner si votre domaine change). Une URL absolue inclut le chemin complet : https://yourstore.com/products/my-product - utilisez cela pour les liens externes et tout endroit en dehors de votre boutique (e-mails, posts sur les réseaux sociaux).
L'interface de l'éditeur de page ne propose pas d'option nofollow. Pour l'ajouter, passez à la vue HTML et modifiez directement la balise d'ancrage : <a href="..." rel="nofollow">. Pour les liens sponsorisés, utilisez rel="sponsored". Pour les zones riches en UGC (contenu généré par les utilisateurs) comme les commentaires, utilisez rel="ugc".
Votre thème applique probablement la même couleur au texte et aux liens, ou retire les soulignements de manière globale. Vérifiez dans l'Éditeur de thème → Paramètres du thème → Couleurs → Liens, ou surchargez cela via CSS. Pour éviter la chasse aux classes, décrivez ce que vous souhaitez à Fudge ("mettre les liens du corps de texte en bleu avec soulignement au survol, laisser la navigation et les boutons tels quels") et il écrira le CSS scopé pour vous. Consultez modifier la couleur des liens dans Shopify pour le guide étape par étape.
