À retenir
- Les GIF sont l’option la plus simple - vous pouvez les uploader partout où Shopify accepte une image.
- Les animations CSS nécessitent du code, mais elles sont légères et très flexibles.
- Les animations Lottie (animations vectorielles en JSON) nécessitent une application tierce ou du code pour être intégrées.
- Les vidéos en fond (video backgrounds) peuvent être ajoutées via l’éditeur de thème sur les thèmes compatibles.
- Fudge permet d’ajouter des effets d’animation CSS sur n’importe quelle partie de votre boutique à partir d’une simple description en langage naturel.
Les animations peuvent donner à une boutique Shopify un aspect élégant et moderne - ou surchargé et lent, si elles sont mal réalisées. La bonne approche dépend de ce que vous souhaitez animer et du contrôle dont vous avez besoin. Voici un tour d’horizon de toutes les options.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également conçu Fudge – un éditeur de boutique basé sur l’IA, noté 5.0 sur le Shopify App Store.
Option 1 : Les GIF
Idéal pour : Les petites animations, le contenu « inline », les icônes ou les badges animés.
Les GIF représentent l’option la plus accessible car ils fonctionnent partout où Shopify accepte une image : galeries de produits, éditeurs de texte riche, ou encore dans les blocs image de l’Éditeur de thème.
À lire aussi : Lazy load des vidéos sur Shopify.
Comment les utiliser : Uploadez un GIF exactement de la même manière qu’un JPEG. Shopify l’affichera en autoplay là où il est intégré.
Inconvénients : Les GIF sont des fichiers assez lourds pour une qualité visuelle souvent moyenne. Gardez des fichiers légers (moins de 2 Mo), utilisez-les avec parcimonie et évitez d’en faire de grandes animations dans vos sections hero. S’il ne s’agit pas juste d’un petit élément visuel, la vidéo MP4 reste plus performante.
Option 2 : Les animations CSS
Idéal pour : Les animations d’entrée (fade-in, slide-up), les effets au survol (hover), les petits mouvements sur des fiches produits ou du texte.
Les animations CSS se gèrent directement dans le code de votre thème : elles n’alourdissent pas le temps de chargement de la page si on les compare aux GIF ou à la vidéo. Elles peuvent être appliquées à n’importe quel élément HTML : images, boutons, texte, bannières.
Quelques animations CSS très courantes et utiles pour une boutique Shopify :
- Fade-in au scroll - l’élément apparaît doucement à mesure que l’utilisateur scrolle sur la page.
- Pulse sur un bouton - léger scale/glow des CTA pour capter l’attention.
- Zoom sur les images au hover - l’image de la fiche produit grossit au survol de la souris.
- Slide-in de texte - le titre d’une bannière glisse et apparaît doucement au chargement de la page.
Les animations CSS demandent de toucher au code de votre thème. Si vous n’êtes pas très à l’aise, décrivez votre souhait à Fudge de cette manière : « Fais un fade-in depuis le bas sur le texte de la bannière au chargement de la page. Ajoute un léger zoom au hover sur les images des fiches produits. » Fudge se charge de générer les modifications en CSS et Liquid, puis de vous montrer un aperçu avant publication.
À lire aussi : Ajouter une vidéo à une galerie de produits Shopify.
Pour aller plus loin, consultez notre guide : Comment ajouter des GIF sur Shopify.
Option 3 : Les animations Lottie
Idéal pour : Les animations vectorielles fluides et de haute qualité, les icônes animées, les animations façon « design motion/infographie ».
Lottie est un format développé par Airbnb qui restitue les animations d’Adobe After Effects sous forme de petits fichiers JSON très légers. Ils s’affichent proprement sans pixellisation (peu importe la taille), ils sont moins lourds, et leur rendu est bien plus fluide que celui d’un GIF lorsqu’il s’agit d’animations travaillées.
Comment ajouter Lottie à Shopify : Lottie n’est pas nativement supporté dans l’Éditeur de thème de Shopify. Les solutions :
- Une application Lottie disponible sur le Shopify App Store (cherchez « Lottie animation »).
- En Custom code : il faut inclure la librairie lottie.js et intégrer le fichier JSON en créant un snippet ou une section sur mesure.
Comme cela requiert une intégration spécifique, vous pouvez toujours demander à Fudge : « Ajoute une animation Lottie venant de cette URL dans la section des icônes sur ma page d’accueil. »
Option 4 : Les arrière-plans vidéo (Video backgrounds)
Idéal pour : Les sections hero, les bannières pleine largeur (full-width), les haut de pages immersifs.
De nombreux thèmes Shopify actuels supportent d’office les arrière-plans vidéo (ou vidéos en mode background) pour la section hero. Une petite vidéo en MP4 tourne en boucle, sans le son, juste derrière votre titre et votre CTA.
Comment vérifier si votre thème l’intègre nativement :
- Allez dans l’Éditeur de thème > cliquez sur la section hero / bannière d’accueil.
- Cherchez un onglet « Vidéo » ou une option liée aux vidéos d’arrière-plan près des paramètres d’images.
Si vous l’avez, il suffit d’uploader votre fichier MP4 ou de coller l’URL de la vidéo. Cette dernière se lance en autoplay (en boucle) et l’image paramétrée agira comme « fallback » (un plan B qui s’affiche) sur mobile ou en cas d’erreur de chargement vidéo.
Si votre thème ne le supporte pas, vous pouvez l’ajouter via le code. Et là encore, utilisez Fudge en lui indiquant : « Ajoute une vidéo MP4 en boucle en background du hero de la page d’accueil. Garde bien les titres et les boutons par-dessus, et utilise l’image du hero actuel en guise de fallback pour les vues mobiles. »
Option 5 : Les animations natives du thème
Beaucoup de thèmes modernes sur Shopify (tels que Dawn, Sense, Prestige ou Impulse) incorporent déjà des paramètres d’animation qu’il suffit de cocher. Cherchez dans votre Éditeur de thème des options de type :
- « Animations d’apparition / Reveal animations » - va activer le fondu au scroll sur presque tous les éléments de votre site.
- « Effets au survol sur l’image / Image hover effect » - paramètre automatiquement un zoom ou un pan (décalage) au passage de la souris.
- « Marquee / Bandeau défilant » - permet d’animer horizontalement un bandeau de texte.
C’est la base pour bien débuter. Jetez toujours un œil aux paramètres natifs de votre thème avant de chercher à coder quoi que ce soit.
Impact sur les performances
Chaque animation alourdit la structure perçue de votre page. Le principe de base est simple :
- Ne sacrifiez jamais le chargement initial de la page sur l’autel de l’animation. Les Core Web Vitals priment systématiquement sur de simples petits effets d’entrée.
- Pensez à insérer la mention
prefers-reduced-motiondans votre CSS lors d’animations custom. Cela respecte les réglages de sensibilité visuelle des utilisateurs. - Testez le rendu sur mobile. N’oubliez jamais qu’une animation fluide sur desktop peut saccader ou être très janky sur d’anciens téléphones.
À lire aussi : Accélérer un thème Shopify.
FAQ
Les animations CSS et Lottie n'ont quasiment aucun impact (moins de 50 Ko combinés et accélérées par le GPU). Les GIF et les vidéos en fond sont lourds : un GIF de 5 Mo ou une vidéo hero de 20 Mo impacteront visiblement le Largest Contentful Paint. La bonne décision : utilisez le CSS pour tout ce qui peut être animé de cette façon, et réservez les GIF/vidéos pour les cas où l'animation est le contenu en lui-même.
Un court MP4 en boucle (3 à 8 secondes, moins de 5 Mo, 720p) est souvent le meilleur choix pour le storytelling. Le mouvement 100 % CSS (un zoom lent, un titre avec un effet fade-in) est une excellente alternative si la vitesse de chargement est critique. Évitez les GIF pour les sections hero : le ratio poids de fichier/qualité visuelle est mauvais.
Placez toute animation non essentielle dans un bloc @media (prefers-reduced-motion: no-preference), ou associez-la à @media (prefers-reduced-motion: reduce) { animation: none; }. Cela respecte les utilisateurs souffrant de troubles vestibulaires ou de sensibilité aux mouvements qui ont défini cette préférence au niveau de leur OS. Les thèmes Shopify modernes s'y plient ; si vous ajoutez des animations personnalisées, faites-le aussi.
Certains thèmes intègrent une option « reveal animations » qui anime l'apparition du contenu lors du scroll vers le bas (Dawn en possède une dans ses versions récentes). Pour tout le reste — animations spécifiques par élément, timing personnalisé, parallaxe — décrivez ce que vous voulez à Fudge (« fade in sur les cartes de témoignages avec un décalage de 100 ms quand elles entrent dans le viewport ») et il s'occupera d'écrire l'Intersection Observer + le CSS directement dans votre section. Alternative : une app d'animation sur l'App Store.
C'est le plus souvent volontaire : de nombreux thèmes et applications désactivent les fonds vidéo sur mobile pour préserver la data et les performances, affichant à la place une image statique. iOS bloque également les vidéos en autoplay ayant du son ; mettez la vidéo en sourdine (attribut muted) pour autoriser l'autoplay. Vérifiez si vous n'avez pas une case « afficher la vidéo sur mobile » dans la section hero de votre thème.
À lire aussi : Accélérer un Thème Shopify.