Points clés à retenir
- La plupart des blocs d’images de l’éditeur de thème possèdent un champ Lien intégré — la méthode la plus rapide pour les images de section.
- Dans l’éditeur de page Shopify, insérez votre image puis passez en vue HTML pour l’envelopper dans une balise d’ancrage.
- Les images des fiches produits renvoient automatiquement à leur page produit — aucune configuration n’est nécessaire.
- Fudge peut rendre n’importe quelle image cliquable avec une destination personnalisée, y compris celles situées dans des sections dépourvues de champ de lien natif.
Rendre une image cliquable est une demande fréquente — pour les bannières promotionnelles, les logos de marque et les blocs de contenu servant également de navigation. La méthode dépend de l’endroit où se trouve l’image dans votre boutique.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques en ligne Shopify. Nous avons également créé Fudge — un éditeur de boutique en ligne par IA avec une note de 5.0 sur le Shopify App Store.
Méthode 1 — utiliser le champ Lien dans l’éditeur de thème
C’est la méthode la plus rapide et elle fonctionne pour la plupart des images de section.
Étape 1. Accédez à Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Cliquez sur la section ou le bloc contenant votre image.
Étape 3. Dans le panneau de configuration, recherchez un champ Lien ou URL. Les blocs d’images dans des sections telles que « Image avec texte », « Bannière d’image » et « Collection en vedette » en comportent presque toujours un.
Étape 4. Saisissez l’URL de destination. Utilisez un chemin relatif pour les liens internes (/products/my-product) ou l’URL complète pour les liens externes.
Étape 5. Enregistrez.
L’image est maintenant cliquable et redirige vers l’URL que vous avez définie.
Article connexe : Fudge Store Editor.
Article connexe : Ajouter un lien à du texte dans Shopify.
S’il n’y a pas de champ Lien dans les paramètres du bloc, la section de votre thème ne le prend pas en charge nativement pour cette image. Utilisez la méthode 2 ou 3.
Comment insérer un lien cliquable dans une image ?
Si vous ajoutez des images à l’intérieur d’une page Shopify (Boutique en ligne → Pages), l’éditeur de page par défaut n’a pas de bouton « lien sur image ». Vous devez utiliser la vue HTML :
Étape 1. Insérez votre image via l’icône d’image dans la barre d’outils de l’éditeur.
Étape 2. Cliquez sur le bouton < > ou « Afficher le code HTML » pour passer en vue source.
Étape 3. Trouvez votre balise d’image — elle ressemble à <img src="..." alt="...">.
Étape 4. Enveloppez-la dans une balise d’ancrage :
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner">
</a>Étape 5. Revenez à la vue de texte enrichi et enregistrez.
L’image fonctionne désormais comme un lien cliquable. Pendant que la vue HTML est ouverte, il est également utile d’ajouter un texte alternatif (alt text) à votre image pour le SEO.
Comment ajouter un lien à une image dans une section personnalisée
Les images à l’intérieur de sections personnalisées ou de fichiers modèles utilisent la syntaxe Liquid. Une image cliquable en Liquid ressemble à ceci :
<a href="{{ section.settings.image_link }}">
{{ section.settings.image | image_url: width: 1200 | image_tag }}
</a>Cela nécessite de modifier le fichier Liquid de la section (Boutique en ligne → Thèmes → Actions → Modifier le code) et son schéma pour y ajouter le paramètre image_link. Il s’agit d’un travail au niveau du code.
Article connexe : Changer la couleur des liens dans Shopify.
Les images de produits renvoient-elles automatiquement au produit ?
Oui. Les images de fiches produits sur les pages de collection, les grilles de produits en vedette et les sections de produits liés renvoient directement à leurs pages produits par défaut. Vous n’avez pas besoin d’ajouter un lien manuellement.
Si une image de produit s’affiche mais n’est pas cliquable, elle se trouve peut-être dans une section personnalisée ou un bloc d’image statique plutôt que dans le composant d’une fiche produit.
Article connexe : Changer la Hero Image dans Shopify.
Comment faire en sorte qu’un logo renvoie vers la page d’accueil
La plupart des thèmes Shopify lient automatiquement le logo du header à la page d’accueil. Si ce n’est pas le cas pour le vôtre, ou si vous utilisez une image de logo en dehors du header :
Dans l’éditeur de thème → cliquez sur la section Header → recherchez les paramètres du bloc de logo. Il s’y trouve peut-être un champ Lien du logo. Si le thème lie le logo automatiquement, ce champ ne s’affichera pas comme configurable — la liaison est codée en dur.
Pour une image de logo placée ailleurs sur la page, enveloppez-la dans une balise d’ancrage pointant vers / :
<a href="/">
<img src="{{ 'logo.png' | asset_url }}" alt="Brand logo">
</a>Utiliser Fudge pour ajouter des images cliquables
Si l’image que vous souhaitez lier se trouve dans une section qui ne possède pas de champ de lien, décrivez-la à Fudge:
« Faire en sorte que l’image de la bannière promotionnelle dans la section image hero de la page d’accueil renvoie vers /collections/new-arrivals. »
Fudge modifie le code de la section pour ajouter le lien et crée un champ de paramètres afin que vous puissiez mettre à jour la destination vous-même depuis l’éditeur de thème à l’avenir. La modification est créée sous forme de brouillon pour être examinée avant d’être publiée en ligne.
