Points clés
- Les GIF sont l’option la plus simple : uploadez-les partout où Shopify accepte une image.
- Les animations CSS nécessitent de coder, mais elles sont très légères et flexibles.
- Les animations Lottie (animations vectorielles basées sur JSON) nécessitent une app tierce ou du code sur mesure pour être intégrées.
- Les vidéos en arrière-plan peuvent être ajoutées via l’Éditeur de thème sur les thèmes compatibles.
- Fudge permet d’ajouter des animations CSS partout sur votre boutique à partir d’une simple description textuelle.
Les animations peuvent donner à une boutique Shopify un aspect très abouti et moderne – ou bien la rendre lourde et surchargée si elles sont mal intégrées. La bonne approche dépend de ce que vous voulez animer et de votre besoin en flexibilité. Voici un aperçu de toutes les options disponibles.
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 vont-elles ralentir mon site Shopify ?
Les animations CSS et Lottie n’impactent pratiquement pas les performances (moins de 50 Ko combinés et accélérées par le GPU). Les GIF et les vidéos en arrière-plan sont lourds - un GIF de 5 Mo ou une vidéo Hero de 20 Mo a un impact notable sur le Largest Contentful Paint. La bonne approche : utilisez le CSS pour tout ce que vous pouvez animer avec, et réservez les GIF/vidéos pour les cas où l’animation constitue réellement le contenu.
Quel est le meilleur type d’animation pour une section Hero sur Shopify ?
Un court MP4 en boucle (3 à 8 secondes, moins de 5 Mo, 720p) est généralement le meilleur choix pour le storytelling. Les animations 100 % CSS (un zoom lent, un titre qui apparaît en fondu) sont une excellente alternative si la vitesse de chargement est critique. Évitez les GIF pour les sections Hero - le poids du fichier est démesuré par rapport à la qualité visuelle.
Comment faire pour que mes animations respectent l’option “réduire les animations” ?
Enveloppez 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 sensibles au mouvement qui ont activé cette préférence au niveau de leur système d’exploitation. Les thèmes Shopify modernes le font ; si vous ajoutez des animations personnalisées, faites-le aussi.
Puis-je ajouter des animations au défilement sans coder ?
Certains thèmes incluent une option “révéler les animations” qui anime le contenu au fur et à mesure qu’il apparaît à l’écran (Dawn en propose une dans ses versions récentes). Pour tout le reste — animations par élément, chronologie personnalisée, parallaxe — décrivez ce que vous voulez à Fudge (“fais apparaître les cartes de témoignages en fondu avec un décalage de 100 ms lorsqu’elles entrent dans le viewport”) et il écrira l’Intersection Observer + le CSS directement dans la section. Alternative : une application d’animation de l’App Store.
Pourquoi ma vidéo en arrière-plan ne se lit-elle pas sur mobile ?
C’est le plus souvent intentionnel : de nombreux thèmes et applications désactivent les vidéos en arrière-plan sur mobile pour préserver les données et les performances, et affichent une image statique à la place. iOS bloque également la lecture automatique des vidéos avec le son : coupez le son de la vidéo (attribut muted) pour permettre l’autoplay. Vérifiez les paramètres de la section Hero de votre thème pour voir s’il existe une option “afficher la vidéo sur mobile”.
À lire aussi : Accélérer un thème Shopify.