COMMENT AJOUTER un MENU DÉROULANT (ACCORDÉON) sur sa FICHE PRODUIT SHOPIFY
HTML-код
- Опубликовано: 27 июл 2024
- Récupère ton morceau de code juste ici : bit.ly/accordionproduit
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 ▬▬▬▬▬▬▬▬▬▬▬▬
Une fonctionnalité très demandée qui sur mobile offre une superbe expérience...
Je cite : L'accordéon !
Il permet d'avoir beaucoup de contenu sans forcément remplir inutilement l'espace disponible sur la page.
Très utilisé en E-commerce, avoir un accordéon sur sa fiche produit permet plusieurs usages.
Il peut servir pour les caractéristiques du produit, quelques réassurances ou des informations complémentaires.
Aussi appelé menu déroulant ou liste déroulante... Comme son nom l'indique, l'accordéon se déroule avec un superbe effet de fade vers le bas.
Alors si tu souhaites intégrer un accordéon sur ta fiche produit...
Tu es au bon endroit !
On va voir tout ça ensemble, dans cet ordre la :
00:00 - 00:35 : Début de vidéo
00:35 - 00:51 : Introduction
00:51 - 02:05 : Identifier la description produit
02:05 - 03:14 : Intégration du HTML
03:14 - 03:42 : Intégration du CSS
03:42 - 05:35 : Création du Block pour générer des accordéons
05:35 - 07:00 : Intégration du JavaScript
07:00 - 08:43 : Modification du Contenu des accordéons
08:43 - 10:48 : Modification du design global
10:48 - 14:03 : Placer la description dans un accordéon
14:03 - 15:25 : Conclusion et fin de vidéo
#shopify #accordeon #menuderoulant
Tes vidéos on complètement révolutionné ma boutique
Énorme :) C'est le but !! 🔥
salut Thomas ...toujours au top ! merci encore pour tes vidéos de grande valeur , que du contenu de qualité ! best...
Un grand merci à toi !!
Merci pour ton travail 🇺🇸🔥🔥🔥🔥
Tu gères de fou
Vraiment tu m'aides beaucoup avec tes videos bro je m'y retrouve
Top! Merci pour ton retour :)
Top merci 🙂
Avec plaisir 😊
Slt très bonne vidéo tu pourrais nous faire le harder bar avec les logos qui défilant et le text qui clignote stp
C'est noté ;) Merci pour ton retour
merci pour video thomas c'est super pourra tu nous dire comment quel type de display utiliser pour le placer en sous des photo pour résolution en destop ou tablette dans le groupe ?
Hello, tu peux utiliser des images format 1920x1080 ça fera le Taff :)
salut thomas superbe vidéo . juste une petite question pour "preset" je n'arrive pas le trouver, est ce qu' il aurait une autre appellation ?
Super tuto ! Tu gères !
Juste comment fais ton pour changer le style de la croix ?
Hello et merci pour ton retour :) Tu peux l'identifier avec ton inspecteur et modifier son css mais je sais pas si ça répond à ta question ?
Bonjour Thomas, merci pour ce tutoriel c'est exactement ce dont j'avais besoin pour ma boutique. Cependant je souhaiterais le mettre pour les pages produits donc je ne sais pas où je dois coller les éléments pour que ca apparaisse où je veux. Pourrais tu me dire dans quel fichier du thème début je dois aller et quel endroit particulier du code ?
Hello, généralement dans le fichier sections > product-template.liquid :)
Puis tu peux chercher le bouton ATC et le coller en dessous
Merci Thomas pour cette vidéo ! On peut mettre la section image avec Texte à la place de la description produit à la place de l'accordéon ?
Pas grande utilité mais ouais tu peux mettre une image et un texte
hello, merci pour ta vidéo elle est top. seul petit hic maintenant la description produit est la même pour tous les produits. comment faire pour quelle soit propre à chaque produit ? merci à toi !
Il faut utiliser soit des modèles de page différent soit des champs dynamiques (meta données)
@@ThomasGiraudShopify Bonjour,
Et si c'est une boutique de cosmétique en ligne, avec quasiment 200 produits différents, on doit faire 200 modèles de page différent ? 😅
Merci beaucoup pour cette super vidéo, j'ai essayé de reproduire cela dans le product-templete (fiche produit) mais impossible d'insérer le code de fin dans le {% schema %} y à t'il une solution ? Merci
Hmmm... fais bien gaffe aux virgules il faut vraiment faire hyper attention à ce moment là
Bonjour Thomas, très bonne vidéo très utile merci beaucoup !! J'ai implémenter la description que tu nous as montré mais un seul problème c'est que j'ai plusieurs produits et la même description se retrouve pour tous les autres produits, elle est automatiquement ajoutée aux autres produits.
Peux tu stp me dire comment faire pour que la description soit propre à chaque produit ?
Mes remerciements et très bonne continuation !!
Hello et merci pour ton message :) J'ai bien reçu ton email la dernière fois, je reviens dessus asap!!
Salut j'ai le même probleme que toi , il fallait faire comment du coup ? Merci 👍
tu as eu la réponse du coup ? :) j'ai le même problème
salut, j'espère que vous allez bien
j'aimerais savoir comment ajouter des logos de paiement securise sur le thème Dawn dans shopify merci!!!!!!!!
Hey, la vidéo est programmée - reste branché ! (10 décembre, 9h00)
Salut Thomas , comment changer la police d'ecriture des titres des sections ? en gros les sous textes ont la meme police que ma boutiques mais pas les titres
Regarde bien la balise HTML ou la class qu'ils utilisent et applique ta font-family dessus :)
Meme concept que ce que je fais dans la video
Salut ce st super mais tu peux le faire sans code directement dans personnaliser la boutique
💪
Merci champion. Mais pas possible d'obtenir le code
Bonjour, pourquoi ne pas utiliser Page Fly pour les listes accordéons ?
Pour ne pas alourdir ton site web :)
Super vidéo, merci pour le partage !
J'aimerais faire ça pour chaque produit et donc afficher un "détail technique" ainsi qu'un "guide des tailles"
Le problème, c'est que le texte à afficher dans chaque accordéon est différent d'un produit à un autre.
Saurais-tu m'expliquer comment mettre sa en place ou du moins ou je pourrais trouver comment faire ?
Hello yes celui ci sera général sur chaque fiches produit, on l'a fait sur le theme, c'est ce qu'on apprend en formation et c'est assez compliqué a expliquer en un commentaire. Cependant, tu peux checker cette vidéo car j'utilise la même méthode : ruclips.net/video/cKQas5JMcsQ/видео.html
@@ThomasGiraudShopify je viens de regarder la vidéo, elle est juste super ! Merci encore 😁
@@mickael3219 no problem :)
Petite question, lorsque que je clique sur n'importe quelle section, ça ouvre toutes les sections. Peut-on régler ce "problème" pour que quand on clique sur une section elle s'ouvre toute seule ?
Ah oui ?? Je vais checker ça merci !
Salut Thomas :).J'ai un petit probleme dans mode code je ne trouve pas les "presets" , sur ma page produit :"product -template liquid".Est ce que c'est normal ?
Hey oui c'est normal,
en fait les presets sont dispo seulement sur les sections que tu peux trouver dans la page d'accueil. Ton fichier product-template.liquid étant exécuté seulement sur la page produit, il a pas besoin de presets
@@ThomasGiraudShopify oui mais donc comment on fait si on veut mettre cette accordéon uniquement sur les pages produits ? Je comprends pas...
Je n'ai pas le "Ajouter une section" à partir de la page produit sur le thème MOTION ? Ducoup aucune idée.. :/ :(
Personne ne l'a c'est normal, suis bien le tuto et fais le dans le fichier product-template.liquid
Mon dieu que c'est mal expliqué pour un novice c'est un enfer, merci pour la perte de temps !
Ca ne fonctionne pas sur le thème turbo 5.0 quand j'insère le block au dessus de preset j'ai ce message d'erreur Error: Invalid preset "Featured products": invalid block "product": undefined block type. J'ai éssayé 4 fois en regardant attentivement la vidéo et normalement je l'ai bien inséré quelqu'un à une solution ?
Impossible de te répondre spécifiquement pour ton thème et sa version malheureusement ces tutos marchent dans 80% des cas, difficile de faire mieux !
Malheureusement ne fonctionne pas sur le thème debutify j'ai essayé plusieurs fois, le problème surgis après avoir collé le java script. Il y a bien un accordéon mais pas la possibilité d'appuyer dessus (et le bloc ne s'appel pas Accordéon dans ce thème jsp pq ). Bref dommage en tout cas bonne vidéo.
Mince... Jquery est bien appelé sur le theme ?
Tes vidéos sont tops habituellement mais là c'est moyen. Tu expliques pas comment et où on rentre les codes si on veut mettre un menu accordéon dans la fiche produit directement. Tu expliques juste pour la page d'accueil. Si tu peux m'aider à mettre ce menu déroulant dans la page produit, ça serait super sympa ;)
Le problème c’est que tu essaies pas de comprendre ;)
ruclips.net/video/PCCrCy5Ysrk/видео.html
@@ThomasGiraudShopify C'est bon j'ai réussi Thomas. Merci :)
J'ai réussi à le faire pour la page d'accueil mais impossible de reproduire ça pour les pages produits... Tu pourrais faire une vidéo pour faire des accordéons pour les pages produits stp ?
Vraiment toute la journée dessus, c'est terrible, nous avons besoin d'aide Thomas pour ajouter cette option à nos pages produit ! ! !
Finalement j'ai réussi. Pour ceux qui veulent le faire sur leur product-template et pas en page d'accueil, je vous conseille de d'abord suivre le tuto en entier, de le refaire sur product-template et au moment de copier le %SCHEMA%, de prendre le morceau de code du product-featured après le block "SETTINGS" jusqu'à la FIN et de le placer. Normalement vous aurez pris la partie du code nécessaire + les presets jusqu'à le end-shéma. bonne vente
Hello et merci pour ton message !! Sorry je viens de le voir, il faut ajouter le code dans product-template.liquid si tu le veux sur les pages produit
Bravo à toi ! Merci pour ton commentaire
@@UnrankedSoldier Merci pour l'astuce, de mon côté j'ai copié à la partie featured-product à partir du block : "type": "checkbox",
"id": "enable_video_looping" jusqu'à la fin. Bon chiffre à tous
Bonjour Thomas, j'ai tenté à plusieurs reprises mais je suis bloqué au niveau de la description du produit que je n'arrive pas à faire apparaitre dans le premier accordéon. J'ai essayé de mille façons mais rien à faire, pourrais-tu me donner un coup de pouces pour cette petite manip stp.
Hello, je ne pourrais malheureusement pas t'aider dans les commentaires de cette vidéo et à "l'aveugle" désolé !
@@ThomasGiraudShopify merci sincèrement pour ton retour mais depuis j’y suis arrivé. Te remerciant à nouveau pour ton retour et ton aide. Tes vidéos sont d’une grande aide courage à toi.
@@screenantispy3376 Merci beaucoup! Et tant mieux :)
Merci Bcp Thomas ; j ai réussi à ajouter dans mon theme Debutify.
Ca rends mon store "user friendlily" . je suis debutant ; j ai bcp appris avec ta video et l explication de ton code. Merci encore