À retenir
- La plupart des blocs d’images de l’éditeur de thème ont un champ Lien intégré — c’est 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’entourer d’une balise de lien.
- Les images des fiches produits renvoient automatiquement vers leur page produit — aucune configuration n’est requise.
- Fudge permet de rendre n’importe quelle image cliquable vers une destination personnalisée, y compris dans les sections qui n’ont pas de champ de lien natif.
Rendre une image cliquable est une demande courante, que ce soit pour des bannières promotionnelles, des logos de marque ou des blocs de contenu qui servent de navigation. La méthode dépend de l’endroit où se trouve l’image sur votre boutique.
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.
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 d’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 HTML” pour passer à la vue source.
Étape 3. Trouvez la balise de votre image — elle ressemble à <img src="..." alt="...">.
Étape 4. Entourez-la d’une balise de lien (<a>) :
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner" />
</a>Étape 5. Revenez à la vue en 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 à 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 de l’en-tête (header) à la page d’accueil. Si le vôtre ne le fait pas, ou si vous utilisez une image de logo en dehors de l’en-tête :
Dans l’éditeur de thème → cliquez sur la section En-tête → cherchez les paramètres du bloc logo. Il y a peut-être un champ Lien du logo. Si le thème lie le logo automatiquement, vous ne le verrez pas comme un champ configurable - il est codé en dur.
Pour une image de logo placée n’importe où ailleurs sur la page, entourez-la d’une balise de lien 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 n’a pas de champ de lien, décrivez-la à Fudge :
« Fais en sorte que l’image de la bannière promotionnelle dans la section hero de la page d’accueil pointe 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 vérifiée avant sa mise en ligne.
FAQ
Le champ de lien est défini par section dans le code du thème. Si vous modifiez un ancien thème, un thème personnalisé ou une section qui n'a pas été conçue avec des images pouvant être liées, le champ n'existe tout simplement pas. Vos options sont de modifier le Liquid + schema de la section pour ajouter un paramètre de lien, ou d'utiliser Fudge pour l'ajouter à votre place.
Dans les thèmes modernes de l'Online Store 2.0, le bloc de colonne de la section Multicolumn inclut généralement un champ de lien pour chaque colonne. Cliquez sur un bloc de colonne, cherchez "Lien" dans ses paramètres, et saisissez l'URL de destination. Si cette section est absente de votre thème, vous devrez apporter une modification au code de la section.
Le champ de lien natif de l'éditeur de thème n'inclut pas d'option "ouvrir dans un nouvel onglet" - il s'ouvre toujours dans la même fenêtre. Pour un nouvel onglet, vous devez modifier le code de la section et ajouter target="_blank" rel="noopener" à la balise de lien, ou utiliser un outil qui vous permet de définir la cible du lien comme un paramètre de section.
La plupart des sections de diaporama (slideshow) incluent un champ de lien sur chaque bloc de diapositive - cliquez sur la diapositive, cherchez "Lien" dans ses paramètres. Si ce n'est pas le cas, vous devrez modifier le code Liquid de la section pour envelopper l'image de chaque diapositive dans une balise de lien en utilisant un paramètre d'URL par diapositive.
Une image liée rend toute l'image cliquable, aucun bouton visuel n'est requis - c'est épuré et minimaliste, mais moins manifestement interactif. Un bouton ajoute un call-to-action explicite qui signale "cliquez-moi" avec du texte et du style. Pour les bannières promotionnelles, la combinaison d'une image liée ET d'un bouton stylisé est souvent la plus efficace.
