Comment ajouter un curseur avant-après dans Shopify

Imaginez que vous vendez un kit de blanchiment des dents, un service de rénovation esthétique automobile ou une collection de préréglages Lightroom. Qu’est-ce qui pousse un client potentiel à passer à l’achat ? Avec des produits comme ceux-ci, les gens veulent plus que vos promesses. Ils veulent voir les résultats.

Un curseur avant/après permet aux acheteurs de visualiser exactement ce pour quoi ils paient. Faites glisser la poignée, observez la transformation, et la valeur se vend d’elle-même. C’est l’un des moyens les plus rapides d’instaurer la confiance et de démarquer votre produit sur un marché saturé.

Si vous vendez sur Shopify, il y a un hic : ses thèmes par défaut n’incluent pas de bloc avant/après prêt à l’emploi. Pour en ajouter un, vous avez trois options : installer une application depuis le Shopify App Store, intégrer un widget gratuit sans code, ou coder vous-même un curseur dans les fichiers de votre thème. Ce guide passe en revue ces trois méthodes afin que vous puissiez commencer à transformer les visiteurs en acheteurs.

Option 1 : Installer une extension du Shopify App Store

Pour la plupart des marchands, le premier réflexe est d’ouvrir le Shopify App Store et de rechercher « curseur avant/après ». Vous trouverez de nombreuses options, et la plupart s’installent sous la forme d’un bloc d’application natif. Une fois l’application ajoutée, le curseur apparaît directement dans votre éditeur de thème sous forme de section ou de bloc que vous pouvez déposer sur une page produit. C’est cette commodité qui fait tout son attrait.

Cela comporte toutefois deux coûts.

Le premier est ce que les propriétaires de boutiques appellent la « taxe sur les applications ». Presque toutes les applications de curseur dédiées fonctionnent sur la base d’un abonnement mensuel — généralement entre 1 et 10 $ par mois pour une seule fonctionnalité interactive. Un curseur ici, un compte à rebours là, et un an plus tard, vous payez une vraie somme pour des fonctionnalités qui étaient autrefois des ajouts à paiement unique. 

Le second coût est la vitesse. Les applications visuelles front-end injectent souvent leur propre JavaScript tiers dans chaque page qu’elles touchent. Installez-en quelques-unes, et vos pages produit se chargent d’une multitude de scripts externes, ce qui peut ralentir la vitesse de la page — affectant directement à la fois votre taux de conversion et votre référencement.

Si vous avez pesé ces compromis et que vous souhaitez tout de même opter pour l’application native, voici la configuration :

1. Accédez au Shopify App Store en vous assurant d’être connecté à votre compte Shopify. Recherchez « curseur avant/après ».

2. Sélectionnez une application et cliquez sur Installer pour l’ajouter à votre boutique.

3. Suivez les instructions de l’application pour la configurer. La plupart des applications exigent que vous configuriez le paiement avant de les utiliser, vous devrez donc le faire avant de les ajouter à votre thème.

Option 2 : Utiliser un widget de curseur gratuit et sans code (recommandé)

Si vous souhaitez un curseur de comparaison personnalisable et réactif sans abonnement mensuel, la meilleure solution est un widget intégré gratuit. Le curseur avant/après de Jotform est conçu précisément pour cela. Vous le configurez visuellement, copiez un seul code d’intégration et le déposez dans votre page Shopify. Il n’y a aucune application à installer ni aucun frais récurrent.

Comme le widget se charge depuis les serveurs de Jotform au lieu d’injecter des scripts dans votre thème, il garde le code de votre boutique léger, ce qui contribue à préserver la vitesse des pages. Vous pouvez définir une révélation horizontale ou verticale ; choisir une interaction par glissement, clic ou survol ; ajouter des étiquettes et des légendes ; et même empiler jusqu’à trois paires de comparaison dans un carrousel compact.

Voici comment l’ajouter :

1. Sur la page du curseur avant/après de Jotform, ajoutez vos images avant et après, puis rédigez une étiquette et une légende pour chaque paire. Jotform récupère les images par URL, donc si vos photos ne sont pas encore en ligne, téléchargez-les d’abord sur Shopify sous Paramètres > Fichiers et copiez l’URL de chaque image. Vous pouvez également choisir l’option de téléchargement d’image si vous préférez ajouter les images directement sur Jotform.

2. Personnalisez le sens de la révélation, la position du séparateur, les couleurs et la taille pour qu’ils correspondent à votre boutique.

3. Copiez le code d’intégration généré par Jotform. Pour ce faire, cliquez sur le bouton Copier le code dans l’onglet Publier.

4. Dans votre éditeur de thème Shopify, ouvrez le modèle de produit ou de page où vous souhaitez placer le curseur, cliquez sur Ajouter une section (ou Ajouter un bloc) et choisissez Liquid personnalisé. Collez le code d’intégration, puis cliquez sur Enregistrer.

Option 3 : Modifier le code de votre thème Shopify

Si vous préférez ne pas toucher du tout à une application externe ou à une intégration, vous pouvez créer un curseur de comparaison directement dans votre thème. C’est l’option qui offre le plus de contrôle et le moins de surcharge, mais c’est aussi la plus facile à casser.

La construction comporte trois parties : le HTML pour contenir les deux images, le CSS pour les superposer et les rogner, et le JavaScript pour déplacer le séparateur lorsque le visiteur fait glisser. L’endroit le plus simple pour tout placer est un seul bloc Liquid personnalisé, afin de ne pas avoir à modifier directement vos fichiers de modèle.

Voici ce qu’il faut faire :

1. Ajoutez le balisage avec vos deux URL d’images. L’image « avant » se place au-dessus et est rognée ; l’image « après » se place en dessous.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

2. Ajoutez le CSS. Le positionnement absolu superpose les images, clip-path révèle la moitié de l’image « avant » au départ, et touch-action: none empêche la page de défiler lorsqu’une personne fait glisser sur un téléphone.

html<style>  .ba-slider { position: relative; width: 100%; max-width: 600px;    aspect-ratio: 3 / 2; overflow: hidden; touch-action: none; user-select: none; }  .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  .ba-before { clip-path: inset(0 50% 0 0); }  .ba-handle { position: absolute; top: 0; left: 50%; width: 2px; height: 100%;background: #fff; transform: translateX(-50%); cursor: ew-resize; }  .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%;    width: 36px; height: 36px; border-radius: 50%; background: #fff;    transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba(0,0,0,.4); }</style>

3. Ajoutez le JavaScript. Les événements de pointeur couvrent la souris et le tactile en un seul chemin, de sorte que la poignée suit le glissement d’un curseur ou le balayage d’un doigt. Enregistrez, puis testez sur un vrai téléphone.

html<script>  const s = document.getElementById('baSlider');  const before = document.getElementById('baBefore');  const handle = document.getElementById('baHandle');  let dragging = false;  function setPos(x) {    const r = s.getBoundingClientRect();    let pct = Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100));    before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;    handle.style.left = pct + '%';  }  s.addEventListener('pointerdown', e => { dragging = true; setPos(e.clientX); });  window.addEventListener('pointermove', e => { if (dragging) setPos(e.clientX); });  window.addEventListener('pointerup', () => { dragging = false; });</script>

Avertissement : c’est l’option qui mord. Un crochet oublié ou un style qui déborde sur le reste de votre thème peut casser votre mise en page mobile ou, pire, perturber le processus de paiement. Le comportement tactile doit être testé sur de vrais appareils, pas seulement sur le navigateur de votre ordinateur, et vous êtes responsable de chaque bug et de chaque correctif futur. Si ce compromis vous semble pire qu’un widget, nous vous recommandons l’option 2.

Améliorez votre boutique Shopify avec des widgets intelligents et sans code

Un curseur avant/après vaut la peine d’être ajouté, mais c’est rarement le seul élément interactif dont une boutique a besoin. Shopify mérite sa place parmi les meilleurs créateurs de sites e-commerce en partie parce qu’il est très facile à étendre, et ce sont les bons modules complémentaires qui transforment une boutique fonctionnelle en une boutique soignée. Le piège, c’est de payer un abonnement mensuel distinct pour chacun d’eux, car ces frais grignotent discrètement les marges que vous cherchez à protéger.

C’est pourquoi il vaut mieux opter pour des widgets gratuits et hébergés. Des outils comme le Jotform Before and After Slider préservent vos bénéfices, maintiennent le chargement rapide de vos pages et gardent vos acheteurs engagés. Et le même répertoire couvre bien plus que les comparaisons d’images.

Voici quelques autres widgets Jotform qui méritent d’être explorés pour une boutique Shopify :

• Un compte à rebours pour ajouter de l’urgence à une vente flash ou à un lancement de produit
• Un widget FAQ pour répondre aux questions courantes sur les produits directement sur la page
• La vérification d’âge pour les produits soumis à une restriction d’âge
• Un bouton de retour en haut pour faciliter la navigation sur les longues pages produit

Parcourez l’intégralité du répertoire des widgets de site web Jotform pour voir ce qui convient à votre boutique. Vous pouvez également connecter vos formulaires et vos données directement grâce à l’intégration Jotform-Shopify. Essayez votre premier widget sans code gratuitement et configurez-le en quelques minutes seulement.