Comment ajouter des curseurs à votre boutique Shopify et en tirer le meilleur parti (+ idées des propriétaires d'entreprise)

Plus c'est plus . Du moins en ce qui concerne les acheteurs de commerce électronique.

Les clients veulent lire les avis, voir les produits sous tous les angles imaginables et explorer de nouvelles remises et offres avant même de penser à cliquer sur le bouton "Ajouter au panier".

Mais si vous deviez entasser toutes ces informations sur votre site Web, vous risqueriez de les submerger. C'est pourquoi les curseurs sont si pratiques - vous pouvez exploiter les déclencheurs de conversion sans créer une longue page noyée dans les images et la copie.

Que sont les Sliders sur Shopify ?

Un curseur est essentiellement un diaporama sur votre boutique Shopify. Il peut être automatisé (il commence à jouer automatiquement en fonction d'un ensemble de règles) ou manuel (se déplace uniquement lorsque les utilisateurs cliquent dessus).

Voici quelques-uns des types de curseurs les plus populaires avec des exemples :

• Curseur de témoignage - Un carrousel d'avis et d'images de clients constitue une excellente preuve sociale

QuadLock utilise un curseur de témoignage comme celui-ci sur toutes ses pages de produits. Les utilisateurs peuvent parcourir les avis sur les produits en cliquant sur la flèche gauche ou droite.

Laird Superfood utilise également un curseur de témoignage sur la page d'accueil pour afficher les meilleurs avis clients.

• Curseur de logo - Pour les entreprises B2B, montrer les entreprises avec lesquelles elles travaillent envoie tous les bons signaux aux acheteurs potentiels.

Beauty Solutions utilise un curseur de logo manuel au bas de sa page d'accueil pour partager les noms des clients qu'ils fournissent.

• Curseur d'images de produits - Affichez vos produits sous tous les angles et écrivez les meilleurs attributs de produit sous forme de légendes pour ces images.

Les boardshorts de CriticalSlide ont un curseur d'image de produit manuel sur la page du produit. Les troncs sont représentés de face, de côté et de dos. Il y a aussi quelques photos en gros plan du matériau et du design et une image du modèle qui le porte.

• Curseur de produits populaires – Trop de choix peuvent submerger les clients. Montrez-leur ce qui est populaire parmi les autres clients et vous faciliterez la décision.

Proper présente ses produits les plus populaires dans ce carrousel manuel "Achetez nos looks Instagram". Chaque diapositive montre le produit avec des informations sur le prix et un lien vers celui-ci sur le site.

eFashion Paris utilise un curseur manuel pour afficher les nouveautés et les meilleures ventes et partage un lien vers ces catégories respectives.

• Curseur de bannière - Partagez des remises, des offres ou de nouveaux produits en magasin dans ces bannières.

49th Parallel utilise ce curseur de bannière manuel à 2 diapositives sur sa page d'accueil pour attirer l'attention sur le

• les cafés filtres les plus vendus et
• l'histoire des fèves d'origine durable.

Le curseur de bannière manuel de Beard & Blade renvoie aux produits les plus vendus et encourage les visiteurs à lire le blog.

Comment ajouter des sliders à votre boutique Shopify

Selon l'application Shopify que vous souhaitez installer, les étapes exactes pour ajouter des sliders à votre boutique peuvent différer, mais voici un tutoriel rapide et basique :

Étape 1 : dupliquer votre thème en direct

Connectez-vous à votre boutique Shopify. Accédez à la boutique en ligne -> Thèmes.

À côté du thème Live, cliquez sur le bouton "Actions" et choisissez "Dupliquer". Cela créera une sauvegarde de votre thème Shopify au cas où vous commettriez une erreur qui pourrait avoir un impact négatif sur votre boutique.

Étape 2 : Ajoutez une section de curseur personnalisée à la boutique Shopify

L'application de curseur Shopify que vous installez peut nécessiter de coller du code personnalisé sur votre site. Pour ce faire, à côté du thème Live, cliquez sur le bouton "Actions" et choisissez "Modifier le code".

Ensuite, développez la catégorie "Sections" et cliquez sur "Ajouter une nouvelle section"

Donnez un nom à votre curseur et cliquez sur "Créer une section" et vous pourrez coller le code personnalisé.

Étape 3 : Accédez à theme.liquid

Faites défiler vers le haut pour cliquer sur theme.liquid. Vous devrez peut-être coller du code supplémentaire ici.

Étape 4 : Personnalisez vos curseurs

Revenez aux thèmes et cliquez sur "Personnaliser" à côté du thème en direct.

Trouvez la section que vous avez créée et vous pouvez maintenant personnaliser les curseurs de votre boutique Shopify. Si vous avez installé une application de curseur d'image, tout ce que vous avez à faire dans cette étape est de choisir la collection que vous souhaitez présenter.

Si vous préférez les didacticiels vidéo, regardez cette vidéo d'EcomExperts où ils expliquent comment ajouter un curseur de produit en vedette à votre boutique Shopify.

Meilleures applications Shopify Slider en 2022 : fonctionnalités clés, avis d'utilisateurs

#1. Carrousel de curseur d'image de produit par POWR.io

Prix ​​: Gratuit-$89.99/mois

Note : 4.2/5 (243 avis)

Cette application vous permet de créer des curseurs et des carrousels de produits avec des légendes, du texte, des boutons, des vidéos, des bordures et une protection contre la copie.

Principales caractéristiques:

• Différents styles de transition de curseur au choix
• Choisissez entre curseur ou carrousel
• Conception hautement personnalisable
• Réactif mobile sur n'importe quel appareil
• Prend en charge le texte dans toutes les langues

Avis positif

Revue critique

#2. Curseur de bannière par Secomapp

Prix ​​: Gratuit-$39.99/mois

Note : 4.5/5 (152 avis)

Bien que l'application s'appelle un curseur de bannière, vous pouvez créer différents types de curseurs hautement personnalisables avec du code. Banner Slider est facile à installer et à configurer et offre une gestion back-end conviviale.

Principales caractéristiques:

• Créez plus de 40 types de curseurs différents
• Ajouter des vidéos au slider
• Code intégré pour afficher le curseur sur le front-end
• Prévisualiser le slider avant la publication
• Fonction de téléchargement en masse
• Définir la date de début et de fin de la bannière
• Prend en charge le mode pleine largeur

Avis positif

Revue critique

#3. Curseur d'image Enorm

Prix ​​: Gratuit-$16.99/mois

Note : 4.9/5 (116 avis)

Cette application vous permet de créer des curseurs de bannière, des curseurs d'image, des carrousels et des logos avec du texte et des commentaires sur vos images, et d'ajouter un lien vers chaque image sur le curseur.

Principales caractéristiques:

• Mobile réactif
• Contrôlez la vitesse du curseur
• Télécharger plusieurs photos à la fois
• Ajouter du texte et des liens

Avis positif

Revue critique

#4. Curseur principal - Curseur d'image

Tarif : Gratuit

Note : 3.8/5 (73 avis)

Cette application gratuite vous permet de créer un nombre illimité de curseurs personnalisés sans aucune connaissance en codage requise. Vous pouvez soit utiliser l'un des 5 modèles, soit repartir de zéro.

Principales caractéristiques:

• Prend en charge le texte alternatif de l'image
• Couches illimitées
• Curseur réactif pour tout appareil
• Ajouter des boutons de superposition, du code HTML personnalisé et du texte
• Planifiez la date de début et de fin de votre slider
• Choisissez entre curseur ou carrousel

Avis positif

Revue critique

#5. Diaporama de témoignages de clients par POWR.io

Prix ​​: Gratuit-$89.99/mois

Note : 2.7/5 (35 avis)

Cette application facile à utiliser vous permet de présenter des témoignages de clients, des avis, des photos, des descriptions et des vidéos.

Principales caractéristiques:

• Témoignages vidéo en lecture automatique
• Mettez en avant vos meilleurs avis produits
• Contrôlez la boucle, la transition de diapositive, la vitesse et la diapositive automatique
• Conception hautement personnalisable
• Réactif mobile sur n'importe quel appareil
• Prend en charge le texte dans toutes les langues

Avis positif

Revue critique

#6. Ada IQ : galerie de curseurs d'images

Prix ​​: 2,99/mois (essai gratuit de 10 jours)

Note : 5/5 (23 avis)

Cette application de curseur d'image Shopify sans code vous permet de créer des curseurs et des diaporamas illimités pour présenter vos produits les plus vendus.

Principales caractéristiques:

• Personnalisation facile
• Ajouter le même diaporama sur plusieurs pages de destination
• Mises à jour futures et nouvelles fonctionnalités
• Liez des images à n'importe quelle page de votre boutique

Avis positif

Revue critique

Il n'y a actuellement aucun avis critique sur l'application. Les utilisateurs mentionnent avoir rencontré des problèmes avec l'application qui sont résolus par le support dans tous les cas.

#sept. Curseur réactif multi-pages

Prix ​​: 4,99/mois (essai gratuit de 7 jours)

Note : 4.2/5 (8 avis)

Cette application facile à utiliser vous permet de créer des curseurs horizontaux ou verticaux dans différents modèles et d'en ajouter plusieurs sur une seule page.

Principales caractéristiques:

• Réactif mobile sur n'importe quel appareil
• Génère automatiquement des shortcodes à coller sur n'importe quelle page
• Recherche et filtrage faciles des catégories et des éléments
• Créez des curseurs avec des boutons, des chiffres et des vignettes

Avis positif

Revue critique

Il n'y a pas encore d'avis critiques sur l'application.

#8. Révolution du curseur

Prix : 6,99 $ à 89 $/mois (essai gratuit de 7 jours)

Note : 4.9/5 (44 avis)

Cette application vous permet de créer toutes sortes de curseurs et de diffuser du contenu de médias sociaux entièrement réactif et personnalisable.

Principales caractéristiques:

• Diffusez du contenu social à partir de Facebook, Twitter, Flickr et Instagram
• Télécharger une vidéo depuis YouTube ou Vimeo
• Contrôle total sur les styles, les transitions et les animations
• Optimisé pour tous les appareils
• Pleine largeur, Plein écran, Tailles des curseurs réactifs automatiques
• Éditeur glisser-déposer WYSIWYG

Avis positif

Revue critique

Curseurs vs carrousels : que devez-vous savoir ?

Les curseurs et les carrousels sont essentiellement la même chose, à une différence près : les carrousels affichent plusieurs diapositives à la fois.

Vous pouvez utiliser des carrousels pour montrer aux clients des logos, des témoignages ou des produits à succès.

Quand utiliser les carrousels

Utilisez des carrousels lorsque vous souhaitez que plus de contenu visible occupe le même espace sur votre page, ce qui augmente la probabilité que les acheteurs le voient.

Voici quelques choses à faire et à ne pas faire :

A ne pas faire

• N'utilisez pas de carrousel dans la section héros de la page d'accueil, car cela peut dérouter les visiteurs.
• Ne communiquez pas d'informations aux utilisateurs qui ne profitent pas à eux, uniquement à l'entreprise.
• Ne le laissez pas devenir un lieu de vidage de contenu. Si vous ne pouvez pas justifier son utilisation, n'en avez pas.

À faire :

• Utilisez un carrousel lorsque les gens s'y attendent. Par exemple, pour afficher les avis des clients, les produits les plus vendus ou les nouveautés.
• Utilisez un carrousel lorsqu'il permet aux utilisateurs d'économiser du temps, des efforts et des clics.
• Utilisez-le pour comparer deux produits différents.

Bonnes pratiques d'utilisation des carrousels

• Utilisez un carrousel manuel pour que les utilisateurs aient le contrôle
• Utilisez les flèches ou la navigation par points pour permettre aux utilisateurs de naviguer
• Gardez le texte de ces carrousels court et clair
• Assurez-vous que le carrousel peut être balayé de la même manière sur les appareils mobiles

Optimisation des curseurs sur votre boutique Shopify : (+ avantages, inconvénients et idées des propriétaires d'entreprise

Nous avons demandé à plusieurs propriétaires d'entreprise de partager leur expérience de première main avec les curseurs et s'ils sont utiles ou non.

Les curseurs fonctionnent-ils ?

Examinons d'abord les curseurs sous deux angles : la performance et la force de persuasion.

• Performance : les bots peuvent-ils explorer les curseurs et les comprendre ? Est-ce qu'ils ralentissent vraiment les sites ?
  
  Oui et non. Les robots peuvent explorer les curseurs, il est donc important de les rendre compatibles avec le référencement et toutes les applications de curseur que vous installez n'ont pas un impact énorme sur la vitesse du site.
• Persuasion : les curseurs font-ils un excellent travail pour inciter les gens à faire un achat ?
  
  La meilleure façon de savoir avec certitude si elles fonctionnent pour vous est de les tester A/B. Tout d'abord, testez deux versions, une avec un curseur et une sans.

Le remplacement d'un curseur par une image promotionnelle statique du produit le plus vendu et des boutons avec des états de survol a amélioré les conversions de 30 % (avec une signification statistique de 98 %).

Ce test a fait ce que je pensais qu'il ferait, mais la clé ici est d'avoir des preuves plus directes pour aider à éloigner ce client et d'autres des curseurs sur leur page d'accueil. Je ne suis pas le seul à avoir vécu cette expérience, et j'ai lu de nombreuses études de cas avec des résultats similaires.

Le problème est que les gens perçoivent les sliders comme s'ils étaient des publicités, donc ils n'interagissent pas avec eux, surtout s'il n'y a pas de moyen de naviguer facilement sur le slider ou si la navigation est cachée.

À emporter : Supprimez les curseurs dans la zone de promotion de la page d'accueil clé et encouragez les clients à l'utiliser pour raconter leur histoire ou promouvoir à la place des produits ou des services clés très vendus. Une autre grande leçon de cette expérience est que tester quelque chose d'A/B est beaucoup plus convaincant pour les clients que de parler de «meilleures pratiques» ou d'encourager des idées basées sur d'autres choses que j'ai lues.

Tim Brown, 5 tests A/B qui ont changé ma façon de concevoir des sites Web

Qu'est-ce que les propriétaires d'entreprise ont à dire sur les curseurs ?

J'ai récemment ajouté un curseur d'image à ma boutique Shopify et j'ai été très satisfait des résultats. Les curseurs d'image sont un excellent moyen de présenter des produits, de mettre en évidence des offres spéciales et d'ajouter un intérêt visuel à votre magasin.

  Luke Lee, co-fondateur, everwallpaper.co.uk

Pour moi, les curseurs d'image peuvent être efficaces sur les magasins Shopify. Lorsqu'ils sont utilisés correctement, ils peuvent aider à mettre en évidence certains produits ou fonctionnalités, et permettre aux clients d'en savoir plus sur ce que le magasin a à offrir.

Burak Ozdemir, Fondateur, setalarmonline.com

Oui, les curseurs d'image fonctionnent, dans une certaine mesure. Les curseurs d'image fonctionnent mieux lorsqu'il existe un grand catalogue de produits et que vous affichez plusieurs variantes du même modèle sur la page.

Theola Tinny, co-fondatrice de VinPit

J'ai testé différents types de curseurs sur mes clients Shopify au fil des ans. Nous constatons que les curseurs les plus performants donnent une sorte d'indice qu'il y a plus à regarder. Un client en particulier a très bien réussi en mettant "Deal #1 of 3" dans son premier Slider, puis bien sûr avait Slider #2 et Slider #3 avec encore plus de deals.

Jeff Moriarty, ninja du marketing numérique chez JMoriarty Marketing

Les curseurs peuvent-ils se retourner contre vous ?

Oui, les curseurs peuvent se retourner contre vous et voici ce que les propriétaires d'entreprise veulent que vous sachiez :

Je ne recommande pas d'utiliser toute forme de curseurs d'image ou de carrousels sur votre boutique Shopify. Ils sèment la confusion et peuvent submerger les visiteurs qui viennent dans votre magasin. Au moment où ils ont enregistré une image, elle est déjà passée à la suivante. De plus, donner trop d'options à vos clients peut les distraire de la raison principale pour laquelle ils sont venus dans votre magasin en premier lieu. Donnez à vos visiteurs un chemin direct pour s'y rendre, sans distractions. Les options sont généralement le sous-produit d'une mauvaise stratégie.

Une pratique plus conviviale consiste à utiliser une image accrocheuse qui leur rappelle qu'ils ont atterri au bon endroit. Les plugins Slider peuvent également ralentir considérablement le temps de chargement de votre page et créer une mauvaise expérience utilisateur. Ils sont difficiles à concevoir et ont plus de chances de ne pas bien répondre sur différents appareils et navigateurs.

Emily Amor, responsable SEO, fléchettes numériques

Les utilisateurs ont tendance à ne pas interagir avec les images coulissantes et les ignorent souvent car ils supposent qu'il s'agit de publicités. Les curseurs semblent offrir la promesse de pouvoir diffuser plusieurs messages sur la même page, mais j'ai presque toujours trouvé que se concentrer sur un seul message et appel à l'action (CTA) est beaucoup plus efficace.

Dean Kaplan, https://www.kaplancollectionagency.com

Le pire problème de curseur que j'ai rencontré avec l'un de mes clients est lorsqu'il n'a pas compressé les images et téléchargé des curseurs de plus de 50 Mo chacun. Presque personne ne les a vus, car ils ne se sont pas chargés au moment où le visiteur a fait défiler vers le bas ou est allé sur une autre page Web. Pouah!

Jeff Moriarty, ninja du marketing numérique chez JMoriarty Marketing

Meilleures pratiques à suivre lors de l'optimisation des curseurs

Voici ce que vous devez savoir lorsque vous utilisez des curseurs :

• Assurez-vous que votre curseur se charge rapidement
  
  Les images de haute qualité ont également tendance à être des fichiers volumineux qui peuvent ralentir votre curseur. Assurez-vous de choisir la bonne taille des images en fonction de la taille de votre curseur.
  
  Au-delà d'un certain point, les utilisateurs ne peuvent pas faire la différence de qualité d'image, alors n'ayez pas peur de compresser vos fichiers. Vous pouvez également charger votre curseur paresseusement et réduire le nombre de styles et de polices afin de ne pas ralentir le temps de chargement.
• Afficher la diapositive la plus importante en premier
  
  Quelle est la principale raison pour laquelle les gens devraient acheter chez vous ? Utilisez votre USP pour attirer les visiteurs vers le curseur afin qu'ils soient plus enclins à faire défiler le contenu.
• Utilisez une copie attrayante sur toutes les diapositives
  
  Toutes vos diapositives sont des opportunités pour vous d'engager les visiteurs et d'utiliser différents angles de vente pour les convertir. Ajoutez des titres qui traitent des avantages et des points faibles et des CTA basés sur l'action.
• Avoir moins de 5 diapositives
  
  Mais n'exagérez pas avec les diapositives. Vous ne voulez pas submerger les visiteurs avec trop de choix et ne pas effectuer d'achat en raison d'une paralysie de l'analyse. Soyez intentionnel avec votre slider et ayez un bon POURQUOI vous l'avez inclus en premier lieu.
• Définir un temps de rotation lent
  
  Donnez suffisamment de temps aux clients potentiels pour digérer votre contenu. Trop vite, ils rateront le contenu et devront attendre que la diapositive réapparaisse. Trop lent et ils seront à l'agonie en attendant que la prochaine diapositive apparaisse. Rich Page suggère de définir un temps de rotation de 3 secondes.
• Faire pivoter automatiquement vos diapositives
  
  Même si vous utilisez un curseur automatique, vous ne pouvez pas être sûr que les visiteurs attendront patiemment que le diaporama entier se déroule. Donnez aux visiteurs la possibilité de naviguer dans le curseur soit par des flèches, soit par une navigation par points.
• Utiliser une disposition asymétrique pour les carrousels
  
  Si vous envisagez un carrousel, essayez d'utiliser une mise en page asymétrique pour vos images. Airbnb et Booking.com ont tous deux utilisé des tests A/B et sont arrivés à des mises en page d'images presque similaires : une grande image « caractéristique » avec des images plus petites (presque comme des vignettes) autour d'elles.

Comment les propriétaires d'entreprise utilisent-ils les curseurs de manière optimale ?

Tout d'abord, assurez-vous que les images que vous utilisez sont de haute qualité et correctement dimensionnées. Les images floues ou pixélisées nuiront à l'apparence professionnelle de votre magasin. Deuxièmement, évitez d'utiliser trop de diapositives - trois ou quatre suffisent généralement. Trop de diapositives peuvent être accablantes pour les visiteurs et les empêcher de trouver les informations qu'ils recherchent. Enfin, assurez-vous que le curseur est placé dans une zone facilement visible de la page - de préférence près du haut.

Luke Lee, co-fondateur, everwallpaper.co.uk

Il est également important de mettre régulièrement à jour les images de votre curseur, car les images périmées peuvent rapidement devenir obsolètes et moins efficaces pour remplir leur objectif d'attirer l'attention.

De plus, vous devez vous assurer que votre curseur est facile à naviguer, avec des boutons Suivant et Précédent clairs afin que les utilisateurs puissent facilement se déplacer dans vos offres. Enfin, il peut être utile d'inclure un texte pertinent avec chaque image pour aider les lecteurs à comprendre de quoi parle chaque image.

Burak Ozdemir, Fondateur, setalarmonline.com

Si des curseurs sont utilisés, ils doivent être statiques. Les curseurs automatiques qui changent d'image toutes les quelques secondes se déplacent souvent trop rapidement pour certains utilisateurs et trop lentement pour d'autres. Il est bien préférable d'avoir des curseurs statiques avec des boutons de navigation clairs pour s'assurer que l'utilisateur garde toujours le contrôle.

Dean Kaplan, https://www.kaplancollectionagency.com

Les clients préfèrent regarder des images plutôt que lire des textes. Rendez votre slider attrayant pour le public en leur fournissant des images attrayantes plutôt que de longs textes.

Will Cannon, fondateur de Signaturely

Faites glisser votre chemin vers les gains : testez vos curseurs A/B

Les curseurs sont une idée controversée pour une bonne raison. Émuler aveuglément les meilleures pratiques de vos concurrents ou de votre industrie peut avoir l'effet inverse. Les visiteurs peuvent être ennuyés, rebondir sur la page et votre taux de conversion peut chuter.

A/B testez vos curseurs afin d'avoir des données pour étayer vos décisions et un cadre pour tester de nouveaux changements afin d'augmenter la conversion.

Rich Page, expert en conversion, partage quelques idées A/B que vous pouvez utiliser :

• Testez une seule image par rapport à des diapositives rotatives
• Testez en utilisant une vidéo explicative par rapport à des diapositives
• Testez la hauteur et la largeur de votre slider
• Afficher les curseurs au bon public cible
• Essayez d'ajouter des preuves sociales de différentes manières

Quel que soit le type d'hypothèses que vous souhaitez tester, la plate-forme de test A/B facile à utiliser de Convert est là pour vous. Essayez-le gratuitement pendant 15 jours.