À retenir

Shopify prend en charge le téléchargement de GIF dans les médias de produits, le contenu des pages et les blocs d’images de l’éditeur de thème (Theme Editor).

Les GIF se lisent automatiquement (autoplay) partout où ils sont intégrés.

Compressez les GIF avant de les télécharger - les GIF non compressés peuvent être très lourds. Utilisez ezgif.com.

Pour les sections hero et les grands affichages, une vidéo MP4 est généralement un meilleur choix pour les performances.

Les GIF sont un moyen rapide de montrer un produit en mouvement, de démontrer une fonctionnalité ou d’ajouter une touche d’animation subtile à votre boutique. Shopify les prend en charge nativement - voici où et comment les utiliser.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques en ligne Shopify. Nous avons également créé Fudge - un éditeur de boutique IA noté 5.0 sur le Shopify App Store.

Comment ajouter un GIF sur une page produit

Étape 1. Allez dans Produits > sélectionnez votre produit > faites défiler jusqu’à la section Multimédia.

Étape 2. Cliquez sur Ajouter un fichier multimédia et téléchargez votre fichier GIF.

Étape 3. Le GIF apparaît dans la galerie du produit aux côtés de vos images statiques. Lorsque les clients cliquent dessus, il se lance en mode plein écran (lightbox).

Étape 4. Faites un glisser-déposer pour réorganiser si nécessaire. Enregistrez.

Le GIF se lira en boucle automatiquement (autoplay) dans la miniature de la galerie et en plein écran. Il n’y a pas de bouton lecture ou pause - il tourne en boucle continue.

À lire aussi : Accélérer un thème Shopify.

Comment ajouter un GIF sur une page ou un article de blog Shopify

Étape 1. Allez dans Boutique en ligne > Pages (ou Articles de blog) et ouvrez la page que vous souhaitez éditer.

Étape 2. Dans l’éditeur de texte enrichi, cliquez sur le bouton Insérer une image (l’icône photo dans la barre d’outils).

Étape 3. Téléchargez votre GIF ou sélectionnez-le dans la bibliothèque de fichiers.

Étape 4. Le GIF s’insère directement dans le texte et se lancera automatiquement au chargement de la page.

Comment ajouter un GIF via l’éditeur de thème

Dans l’éditeur de thème (Theme Editor), partout où vous voyez un bloc ou une section Image, vous pouvez télécharger un GIF comme vous le feriez pour une image statique.

Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.

Étape 2. Cliquez sur la section ou le bloc où vous voulez mettre le GIF.

Étape 3. Dans le sélecteur d’image, téléchargez votre GIF ou choisissez-le dans vos fichiers.

Étape 4. Enregistrez.

Le GIF se lira automatiquement à cet emplacement sur votre boutique.

Vous voulez une section animée personnalisée pour votre boutique ? Décrivez-la à Fudge.

Try Fudge for Free

Poids du fichier GIF - pourquoi c’est important

Les GIF sont réputés pour être des fichiers très lourds. Une animation de 5 secondes à 800px de large peut facilement dépasser 10 Mo si elle n’est pas compressée. Des GIF trop lourds entraînent :

Des temps de chargement de page lents
De mauvais scores Core Web Vitals
Une forte consommation de données mobiles pour vos clients

Compressez toujours vos GIF avant de les télécharger. Utilisez ezgif.com - c’est gratuit, sans inscription, et vous permet de réduire les couleurs, recadrer et couper des frames pour réduire considérablement le poids du fichier. Visez moins de 2 Mo pour tout GIF utilisé dans une galerie de produits ou le contenu d’une page, et moins de 500 Ko pour des petits GIF intégrés au texte.

GIF vs MP4 pour le contenu animé

Pour les grandes zones animées - arrières-plans hero, animations de bannières en pleine largeur, démos de produits qui durent plus de 3 secondes - la vidéo MP4 est presque toujours le meilleur choix.

Un clip vidéo en boucle de 5 secondes au format MP4 est généralement 80 à 90 % plus léger que le GIF équivalent, se charge plus vite et offre une image plus nette. Le format MP4 prend également en charge le son et tourne de manière plus fluide sur mobile.

Utilisez les GIF quand :

Vous avez besoin d’une petite icône animée simple ou d’un badge
Vous ajoutez une animation dans une zone de texte enrichi (pas d’option vidéo)
L’animation est assez simple pour que la compression GIF fonctionne bien (2 couleurs, mouvements limités)

Utilisez le MP4 quand :

À lire aussi : Lazy Load des vidéos sur Shopify.

À lire aussi : Ajouter du contenu animé sur Shopify.

L’animation dure plus de 2 à 3 secondes
Vous en avez besoin pour une section hero, une bannière ou une section pleine largeur
Le poids du fichier ou le temps de chargement est un problème

Héberger des GIF en externe

L’espace de stockage de fichiers de Shopify est généreux mais pas illimité. Si vous utilisez beaucoup de GIF, vous pouvez les héberger en externe (par ex., sur Giphy, Cloudinary ou votre propre CDN) et les intégrer en utilisant leur URL.

Dans les blocs d’images de l’éditeur de thème, cela nécessite généralement du code pour intégrer une image basée sur une URL plutôt que d’utiliser le sélecteur de fichiers habituel. Décrivez ça à Fudge si vous en avez besoin.