À retenir
- Les GIF sont l’option la plus simple - importez-les partout où Shopify accepte une image.
- Les animations CSS nécessitent du code, mais sont légères et très flexibles.
- Les animations Lottie (animations vectorielles basées sur JSON) nécessitent une application sur mesure ou du code pour être intégrées.
- Les arrière-plans vidéo peuvent être ajoutés via l’éditeur de thème sur les thèmes compatibles.
- Fudge peut ajouter des effets d’animation CSS à n’importe quelle partie de votre boutique à partir d’une simple description en langage naturel.
Les animations peuvent donner à une boutique Shopify un aspect soigné et moderne - ou la rendre surchargée et lente si elles sont mal réalisées. La bonne approche dépend de ce que vous souhaitez animer et du niveau de contrôle dont vous avez besoin. Voici un aperçu de toutes les options.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de vitrines Shopify. Nous avons également développé Fudge - un éditeur de vitrine IA avec une note de 4.9 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 (fondus, glissements vers le haut), les effets au survol (hover), les mouvements subtils sur les fiches produits ou le texte.
Les animations CSS sont implémentées directement dans le code de votre thème : elles n’ajoutent aucun poids au chargement de la page comparé aux GIFs ou aux vidéos. Elles peuvent être appliquées à n’importe quel élément HTML : images, boutons, texte, bannières.
Les animations CSS courantes et utiles pour les boutiques Shopify :
- Fondu au défilement - les éléments apparaissent au fur et à mesure que les utilisateurs font défiler la page vers le bas
- Pulsation de bouton - léger effet d’agrandissement/brillance sur les CTA pour attirer l’attention
- Zoom d’image au survol - les images des fiches produits s’agrandissent au survol
- Glissement de texte - les titres de la section hero s’animent au chargement de la page
Les animations CSS nécessitent de modifier directement le code de votre thème. Si vous n’êtes pas à l’aise avec ça, décrivez ce que vous voulez à Fudge : “Fais apparaître le texte de la section hero par le bas au chargement de la page. Ajoute un effet subtil de zoom au survol sur les images des fiches produits.” Fudge génère les modifications CSS et Liquid, puis vous montre un brouillon avant de publier.
Sur le même sujet : Ajouter une vidéo à une galerie de produits Shopify.
Pour plus de détails, consultez notre guide sur comment ajouter des gifs 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, les en-têtes de page immersifs.
Beaucoup de thèmes Shopify modernes prennent en charge une vidéo en arrière-plan pour la section hero. Une courte vidéo MP4 en boucle est lue silencieusement derrière votre titre et votre CTA.
Comment vérifier si votre thème le prend en charge :
- Allez dans l’Éditeur de thème > cliquez sur la section hero/bannière
- Cherchez un onglet “Vidéo” ou une option “Vidéo d’arrière-plan” à côté du sélecteur d’image
Si c’est pris en charge, uploadez un fichier MP4 ou collez l’URL d’une vidéo. La vidéo tournera en boucle de manière silencieuse et l’image servira de solution de secours (fallback) sur mobile ou si la vidéo ne se charge pas.
Si votre thème ne prend pas en charge les vidéos d’arrière-plan nativement, vous pouvez l’ajouter via le code. Décrivez-le à Fudge : “Ajoute une vidéo MP4 en boucle en arrière-plan de la section hero sur la page d’accueil. Garde le titre et le bouton par-dessus. Utilise l’image hero existante comme fallback sur mobile.”
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 ne coûtent presque rien (moins de 50 Ko combinés et accélérés par le GPU). Les GIFs et les vidéos d'arrière-plan sont lourds : un GIF de 5 Mo ou une vidéo de 20 Mo dans la section hero impactera visiblement le Largest Contentful Paint. La bonne méthode : utilisez le CSS pour tout mouvement que vous pouvez exprimer avec, et gardez les GIFs/vidéos pour les cas où l'animation est véritablement le contenu.
Une courte vidéo MP4 en boucle (3-8 secondes, moins de 5 Mo, 720p) gagne souvent pour le storytelling. Une animation uniquement en CSS (un zoom lent, un titre en fondu) est une très bonne alternative si la vitesse de chargement est critique. Évitez les GIFs pour les sections hero : la taille du fichier est mauvaise par rapport à la qualité visuelle.
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 de sensibilité aux mouvements qui ont activé cette préférence au niveau de l'OS. Les thèmes Shopify modernes le font ; si vous ajoutez des animations personnalisées, faites-le aussi.
Certains thèmes incluent une option pour activer les "animations d'apparition" qui animent le contenu lorsqu'il entre dans l'écran (Dawn en a une dans ses versions récentes). Pour tout le reste — animations par élément, timing personnalisé, 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 écrit l'Intersection Observer et le CSS directement dans la section. Alternative : une application d'animation depuis l'App Store.
C'est souvent délibéré : beaucoup de thèmes et d'applications désactivent les vidéos d'arrière-plan sur mobile pour préserver la data et les performances, se rabattant sur une image statique. iOS bloque aussi la lecture automatique des vidéos avec le son ; mettez la vidéo en sourdine (attribut muted) pour permettre l'autoplay. Vérifiez la section hero de votre thème pour y trouver une option "afficher la vidéo sur mobile".
Sur le même sujet : Accélérer un thème Shopify.