Comment ajouter des Animations sur une boutique Shopify
HTML-код
- Опубликовано: 27 июл 2024
- Les animations au Scroll c’est l’élément final d’une boutique qui déchire ! C’est comme la petite cerise que tu poses sur le gâteau, une fois qu’il est cuit 🙂
Le code que j'utilise dans la vidéo : bit.ly/aos-shop
La librairie A.O.S : bit.ly/2X1AC1A
Abonne Toi En Cliquant Ici ► bit.ly/RUclipsSubscribeButton
En cliquant sur le lien juste au dessus et sur la petite 🛎 tu seras informé de la sortie des nouvelles vidéos.
▬▬▬▬▬▬▬▬ Thème FullStack - Essai Gratuit ▬▬▬▬▬▬▬▬▬
🏁 Thème FullStack : bit.ly/2zTEZCU
Le meilleur rapport qualité prix pour un Thème Shopify - Lancez une boutique optimisée pour la conversion en un rien de temps.
▬▬▬▬▬▬▬▬▬▬▬▬▬ L'agence Deployer ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🚀 The Deployer : bit.ly/3hrpBjm
L’agence Française CRO concentrée à 100% sur l’amélioration des performances de votre boutique en ligne.
▬▬▬▬▬▬▬▬▬ Apprendre le code Shopify ▬▬▬▬▬▬▬▬▬▬
🎓 Convertify : bit.ly/3AAF6QB
La première formation Francophone pour contrôler à 100% shopify et ne plus jamais avoir peur de toucher à son code.
▬▬▬▬▬▬▬▬ Dans cette vidéo ▬▬▬▬▬▬▬▬
Tu cherches à animer ta boutique shopify ?
Tu veux donner vie à ton nouveau shop pour enchanter l’expérience de tes prospects ?
Dans cette vidéos nous découvrirons à quoi ressemblent les animations on scroll et les différents types d’animations.
Je te montrerais comment les utiliser et comment les insérer dans le code de ta boutique shopify
Et pas n’importe ou !
Au bon endroit :)
Pour finir, je vais aller encore plus loin et te montrer comment les rendre modifiables depuis la sidebar dans la partie “Personnaliser” de ta boutique.
Des questions ? Interrogations ?
Je te laisse les poser dans les commentaires juste en dessous 🙂
Salut, ta vidéo m'a bien aidé. Merci infiniment. ça m'a permis de bien avancer. 🤗
Super tuto!! 🔥🔥
Un GRAND Merci à toi !
Ca m'apprend vraiment pleins de choses de te suivre.
Bravo pour ta chaine et encore merci ton travail et tes partages. 🙌
J'apprécie GRANDEMENT tes commentaires et ton soutien. Merci à toi !
Magnifique , merci pour cette vidéo !
Merci !! Continue t’es bouillant 💪🏼🔥
Super contenu ! :)
Vraiment top tes vidéos !
Merci pour ton retour Maxime :)
Le boss
Salut Thomas, tout d'abord merci pour ta vidéo,
j'ai aussi regardé ton autre vidéo sur comment trouver les sections dans le code.
Cependant, je n'arrive pas à bien placer le
Hey, merci pour ton message :)
Peux-tu être plus précis sur ce dont tu as besoin ?
Bonsoir Thomas je découvre ton tuto aujourd'hui je pense que c'est super utile mais tu devrais refaire une vidéo pour les débutants comme moi car j'ai rien compris des copiés.collés sa va trop vite et ton thème il est offert ?? Si on change de thèmes est-ce que sa a un effet avec dsers
Pas d'effet sur DSERS et oui il y a une version offerte
Salut super vidéo ! +1 Abo.
J’ai une question j’ai le thème début et je souhaiterais faire une animation sur ma page d’accueil car mon mono produit se trouve dessus et je voudrais que mon mono produit du moin la zone qui l’encadre jusqu’à ajouter au panier arrive avec un effet c’est le même principe ? Je trouve la zone qui encadre tout ça et je trouve la class la plus haute contenant le nom de la zone en question ?
Bienvenue à toi !!
Tu as testé de le mettre sur la zone qui encadre ? Sinon avec ton inspecteur tu peux le trouver assez facilement.
Si c'est la page d'accueil ce sera dans le fichier featured-product.liquid
Hello Thomas, merci pour ta vidéo.
J'ai essayer d'ajouter ton code en fin de vidéo pour rajouter les modifs direct dans le theme mais quand je veux enregistrer, ça indique: An error prevented image-bar.liquid from being saved.
Je suis quasi certain d'avoir bien fait la manip.
Thème début.
Merci encore
Hello, merci pour ton retour ! Surement à cause d'une virgule dans le schema... il faut bien placer le morceau de code, le mieux c'est de regarder et comprendre la structure du JSON
Tuto super!!
Merci pour tes vidéos car elles aident beaucoup.
J'avais une question néanmoins, comment faire pour intégrer une vidéo sur la page d'accueille qui n'est pas une vidéo youtube mais bien une vidéo qui est un fichier directement importé de notre ordinateur. On voit 15000 vidéos pour l'intégration d'une vidéo sur la page produit mais pas une pour la page d'accueille.
Hello et merci pour ton retour :)
J'ai créé une section comme ça sur le thème FullStack, j'en ferais peut-être une vidéo à l'avenir c'est assez compliqué (si impossible) à expliquer depuis les commentaires.
fort
salut merci pour ce tuto, est ce que c'est possible d'inisérer un gif en dessous du produit ? dans une section image avec texte par exemple?
Par exemple oui. Sur les themes 2.0 comme le themefullstack.com/ tu peux le faire meme en version gratuite
Salut, j'ai bien tout suivi et les animations fonctionnent bien sur ma home page, mais des lors que je vais sur une fiche produit par exemple et que je veut implémenter une animation, sa va faire disparaître ce que je veut animer à la place... est ce que j'ai mal placé mon code dans theme.liquid ?
Hello même si tu recharges la page ??
salut a toi tu peux faire un tuto
pour le bouton je decouvre?
Pas de soucis, je note :) Merci pour ton retour !
bonjour,
je n'ai pas la section, image-bar.liquide, je trouve que image banner liquid ou image with texte.liquide ? c'est à caude se la version ?
MERCI !
Tu le fais sur la section de ton choix :)
Bonjour, et si on voulait ajouter la libraire GSAP . comment on le fait ? Merci
COmme toutes les librairies. Tu l'appelles dans le fichier principal
Pour le thème début , je prend quelle section, afin d ajouter le code pour les animations on scroll??
Tu peux l'ajouter sur la section de ton choix :)
Bonjour, est-il possible de mettre les animation d'un seul coup sur toute la page d'accueil? Je ne réussie pas à l'insérer sur les autres sections celà me parait compliqué. Pouvez-vous m'aider s'il vous plait
Malheureusement non... il faut les mettre une par une :/
Hello!
Déjà un grand merci c'était méga clair et top!
En revanche j'ai un léger soucis quand j'écris en dur dans le code ca fonctionne sans soucis en revanche quand je mets en place la liste déroulante je la vois le code à l'air bon etc mais je ne vois de modif sur mon site.
As tu déjà été confronté à ceci ?
Merci à toi.
Maïssane
Hello, tu l'as bien mis dans les balises {% schema % } ?
Tu l'as bien mis dans le bon fichier ? Il devrait apparaitre dans la sidebar comme sur la vidéo
@@ThomasGiraudShopify hello my bad j’ai trouvé mon erreur un soucis de nom de variable !
Merci à toi b
salut merci pour ce tuto est ce quelqu'un serait comment insérer un gif dans une section svp ?
Normalement tous les champs image acceptent des gifs
Salut,
Merci pour ta vidéo!
Pour ma part, la premiere étape fonctionne bien. Mais lorsque je colle le code pour la liste des animations dans "schema" je ne peux pas enregistrer, il m'affiche le message "JSON non valide dans la balise « schema »" . J'ai tout essayé ! Saurais-tu pourquoi?
Surement un problème de virgule :) Tu peux copier ton code dans un JSON checker pour qu'il te dise ce qui déconne
Merci pour le tuto, ça m'a bien aidé!
Par contre j'ai certaines sections qui ont pour nom un numéro et qui n'apparaissent donc pas dans Modifier le code > Sections ni en utilisant la barre de recherche. As-tu déjà eu ça et sais-tu où je pourrais les trouver ? :)
Salut, je viens d'avoir le même problème que toi, j'ai passé 2heures dessus et j'ai trouvé la solution et réussi ! Ecrit moi un mail a xavier.valantin67000@gmail.com
Si tu veux que je t'aide.
Surement à cause du {{ section.id }} dans les class, ça arrive souvent.
Merci Xavier !!
meme probleme
Salut Thomas petite question avant que je fasse le tuto, si on a le thème fullstack premium est-ce que c’est déjà intégré ? Merci de ta réponse !
Salut Lucien, malheureusement on a retiré les animations sur le theme car elles ralentissent la vitesse de chargement et peuvent créer des problèmes sur de vieux navigateurs désolé :)
@@ThomasGiraudShopify Ah d’accord très bien tu penses donc que ça ne vaut pas le coup ?
Et si on veut mettre des animations 3D qui bouge sur le site comme un dessin animé ?
Tu peux insérer des objets 3d dans ton carousel d'image produit
Comment je fais si j'ai pas image bar dans ma section ?
La nomenclature des dossiers et similaire d'un theme a l'autre mais pour les fichiers il n'y a pas de règles, c'est normal si leur nom varie
Super Tuto mais en commençant à placer dans theme.liquid j'ai tchecker le code et la j'ai 3 erreurs du type :
Uncaught ReferenceError: onLoadStylesheet is not defined
at HTMLLinkElement.onload
ou
Uncaught ReferenceError: AOS is not defined
peux-tu m'expliquer ? pourtant j'ai bien suivi j'ai regarder plusieurs fois la vidéo
Hello et merci pour ton message :)
Pour AOS il faut bien intégrer les librairies dans theme.liquid c'est ok ?
Bonjour, J'ai pas bien compris est ce que on doit mettre tout les codes donnez dans la vidéo ou est ce que en intégrant seulement le dernier gros code ça fonctionne ?
Hello, normalement il y a des commentaires partout, suis bien la vidéo depuis le début ça devrait le faire
Bonjour Thomas, alors je me suis étonnée moi-même mais j'ai réussi, par contre est-ce qu'il faut recoller le code partout où on veut animer un élément? Je l'ai mis pour ma galerie, ok mais du coup les animations ne sont proposées que pour cette galerie la et rien d'autre.
Merci pour ton retour,
Adélaïde
Oui il faut le refaire partout, sur chaque élément
Salut ! Merci pour tes vidéos, est-ce qu'on peut échanger stp, ça fait 3h que je tente de mettre des animations on scroll, je pense que mon thème m'en empêche, si tu peux me contacter ça m'aiderait beaucoup
Hello, suis bien attentivement la vidéo tout est dedans, il faut bien identifier l'élément sur lequel tu veux appliquer l'animation
Bonjour, on peut plus recevoir le code par email ?
Normalement c'est good no ?
bonjour le lien de la description il ne marche pas
Il devrait
Salut je sais que cette vidéo est ancienne mais j'ai quelque difficulté à réussir avec le code shopify (il a changé)
Yes les nouveaux thèmes n'ont pas la même structure mais le principe reste similaire
Hello Thomas, Merci pour ce tuto !
Mais, j'ai quelque d'étrange qui se passe, l'effet sur mon site marche quand je ne ferme pas la balise comme ceci :
wow aucune idée, check au dessus ou en dessous si il y a pas un autre problème de balisage
@@ThomasGiraudShopify y'avait plusieurs soucis, mais j'ai pu voir avec un codeur qui m'a résolu ce soucis, merci quand même !
Lorsque j’essaie de trouver la liste déroulantes des animations on scroll, je ne la trouve pas. Il y a seulement des écritures bizarres
C'est peut etre ces écritures bizarres ? Tu as pu accéder au code ?
J'ai suivi jusqu'au niveau de la recherche de section puis je n'arrive plus à te suivre tout va trop vite d'un coup!
Hésite pas à voir la vidéo une seconde fois, il manque des ressources dans la descriptions je vais les ajouter d'ici peu :)
Bonsoir,
Merci beaucoup ainsi que pour ta vidéo.
Je suis novice je suis sur le thème Début et rien a faire ca ne marche pas.Pourtant j'ai remis ta vidéo plusieurs fois. Tout marche parfaitement jusqu'au moment de coller le dernier gros code dans image bar liquid. et au moment d'enregistrer apres avoir fait ca
j'ai 2 messages d'erreur
Ce fichier contient les erreurs suivantes :
Error: Invalid JSON in tag 'schema'
et
Ce fichier contient les erreurs suivantes :
Line 14 - Liquid syntax error: Expected id but found end_of_string in "{{ section.settings.aos-content.}}"
et j'ai bien mis le code du haut que tu donnes dans thème liquide :
J'espère que tu pourras m'apporter de l'aide et une réponse car la c'est la cata. Je comprends mieux le chinois pour le coup :-)
Cordialement
Hello,
En fait tu as entouré de guillemets ton data-aos ça peut pas marcher. teste ça :
Avant :
Après :
Est-ce que plusieurs animations (GIF) sur une boutique n'alourdiront pas le temps de chargement des pages ?
Les gifs sont lourds, dans la plupart des cas, utiliser des mp4 en autoloop c'est mieux
@@ThomasGiraudShopify désolé de mon amateurisme mais à partir de quoi peut-on télécharger des vidéos mp4 en autoloop ? Est-ce que c'est spécifique ?
@@jamesburton9472 Tu auras besoin de custom developpement pour le mettre en place pas le choix
super idée les ultrasons en fond (non)
il ya des codes dont je trouve pas sur la description
Hello My bad, je mets ça à jour au plus vite :)
C'est good normalement !
ne fonctionne pas sur le theme venture
Ah oui ? Tu as tout essayé?
Peut etre qu'une autre librairie d'animations prend le dessus
@@ThomasGiraudShopify tout essayé à plusieurs reprises, aucune animation .
Dommage...
@@yoan_e-shad1314 sur certains thèmes il y a 2 thème.liquid, regarde dans asset..
j'ai rien trouver, le code n'a rien à voir avec le tiens
Seulement le nom des fichiers varie
Je reçois litteralement aucun mail pour le code
Hello, tu as bien check tes spams ?
Pour la première fois j'ai rien compris mdr
🤣 Tu as retest ?
@@ThomasGiraudShopify 🤣😅 j'ai regardé la vidéo plus de 3fois mdrr
@@TNCARS974 idem il part de trop loin il réexplique pas , les bases
C'est vidéos sont bien expliqués habituellement mais bon là j'avoue qu'il m'a perdu mdr
si quelqu'un a le temps de m aider je ne dis pas nn merci
De quoi as-tu besoin ?
je fais de base partie de la majorité silencieuse je voualais juste te dire que c'estt dommage que tu saute quelques petits details qui pour toi sont banales mais pour les nouveau incomprehensible comme quand tu colle dans ta ligne de code le premier effet flip ou tu n'explique pas ou le mettre ce n'est pas grave jai trouvé une autre video mais pense un peu au nul mdrr bonne soirée frero
Aha merci bcp pour ton retour! Et bravo a toi