Points clés
- Dans l’éditeur de page Shopify, sélectionnez le texte et cliquez sur l’icône de lien dans la barre d’outils pour ajouter un lien hypertexte.
- Dans les blocs de texte de l’éditeur de thème, certains disposent d’un champ dédié au lien — pas besoin de sélectionner le texte.
- 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 lier vers des pages internes, des produits, des collections ou des URL externes.
Ajouter un lien cliquable sur du texte dans Shopify dépend de l’endroit où se trouve ce texte. La méthode est différente pour le contenu d’une page, 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 conçu Fudge — un éditeur de boutique IA avec une note de 4.8 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 Shopify suivent un format régulier :
| Destination | Format de l’URL |
|---|---|
| Produit | /products/product-handle |
| Collection | /collections/collection-handle |
| Page | /pages/page-slug |
| Blog | /blogs/news |
| Article de blog | /blogs/news/post-slug |
| Panier | /cart |
| Externe | https://full-url.com |
Le « handle » ou « slug » est la version du nom adaptée aux URL : en minuscules, avec des tirets au lieu des espaces. Vous pouvez trouver le handle d’un produit dans l’admin Shopify → Produits → cliquez sur le produit → regardez l’URL ou la section SEO tout en bas.
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 que le texte soit surligné pour s'activer. Autres causes : une règle CSS du thème qui désactive les pointer-events sur le conteneur parent, ou bien le lien a été inséré puis enveloppé dans un autre élément via la vue HTML, ce qui a cassé la balise anchor.
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. Sinon, 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-la pour les liens externes et partout 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 en vue HTML et modifiez directement la balise du lien : <a href="..." rel="nofollow">. Pour les liens sponsorisés, utilisez rel="sponsored". Pour les zones riches en contenu généré par les utilisateurs (UGC) comme les commentaires, utilisez rel="ugc".
Votre thème applique probablement la même couleur au texte et aux liens, ou supprime le soulignement de manière globale. Allez dans l'Éditeur de thème → Paramètres du thème → Couleurs → Liens, ou écrasez-le en CSS. Pour éviter de chercher les classes CSS, décrivez ce que vous voulez à Fudge ("rendre les liens du corps en bleu avec un soulignement au survol, sans toucher à la navigation et aux boutons") et il écrira le CSS ciblé pour vous. Consultez comment changer la couleur des liens sur Shopify pour le guide complet.
