Nous allons voir dans ce tutoriel comment créer un bouton lire la suite sur Shopify
Nous avons parfois des descriptions trop longues et d’un point de vue ergonomique ce n’est pas toujours très sexy…
L’idée de ce tutoriel shopify est de vous proposer un bouton lire la suite qui affichera le reste de votre description de vos fiches produits, pages ou collections.
Vous pouvez voir le résultat sur cette page: voir la démo de ce tutoriel.
Vous allez surement vous poser la question suivante… Et côté SEO ce n’est pas pénalisant ?
Et bien non étant donné que l’affichage ou non-affichage est géré en Javascript, les moteurs de recherche liront le contenu complet 😉
Passons maintenant dans le fil du sujet !
Côté tutoriel – code shopify
Vous allez dans un premier temps devoir trouver votre fichier Css ou Scss selon le thème.
Rendez-vous dans les fichiers de votre thème (Personnaliser – Modifier code) – Assets et trouvez un des fichiers suivants:
- theme.scss.liquid
- timber.sccs.liquid
- style.sccs.liquid
- bref un xxx.scss.liquid :p
Déroulez le fichier et mettez vous tout en bas pour coller le code suivant:
Dans un deuxième temps trouvez dans le même dossier (Assets) un fichier .js généralement:
- theme.js.liquid
- timber.js.liquid
- style.js.liquid
- bref un xxx.js.liquid :p
Déroulez le fichier et mettez vous tout en bas pour coller le code suivant:
Nous avons donc à ce stade le système pour créer un bouton lire la suite dynamique qui permettra d’afficher une description complète.
Côté Shopify – Éditeur
Ouvrez une fiche produit ou autres contenus avec un éditeur de texte et cliquez sur le <> (show html) afin de passer en mode code.
Copiez/collez le code suivant et passons à l’explication !
Écrivez votre texte normalement, à l’endroit ou vous souhaitez couper votre texte mettez la balise suivante:
Ensuite englobez le reste de la description dans la balise div suivante (n’oubliez pas la fermeture </div> !!!):
Il nous reste plus qu’à ajouter le bouton « En savoir plus » en collant la balise suivante tout en bas de votre description:
Si vous souhaitez changer les intitulés, il faudra le faire sur le bouton ci-dessus mais également dans le fichier .js.liquid.
Attention à bien respecter les ouvertures et fermetures des bouts de codes afin d’éviter de casser votre mise en page !!!
Le <span id= »dg-rm-dots-1″></span> doit idéalement être avant une fermeture de paragraphe de ce genre </p> pour que les 3 petits points soient bien collé au texte 😉
Et pour en mettre plusieurs sur une même page ?
Le code n’est pas fait pour cela mais vous pouvez vous en sortir en suivant ces étapes:
Si vous avez une 2ème zone dupliquez la partie html et remplacer les : id="dg-rm-btn-1"
, id="dg-rm-dots-1"
, id="dg-rm-more-1"
par id="dg-rm-btn-2"
, id="dg-rm-dots-2"
, id="dg-rm-more-2"
et remplacez onclick="dgReadMore()"
par onclick="dgReadMore()"
Vous avez compris le principe 😉 etc pour 3, 4 etc…
Ce tutoriel existe aussi en vidéo
Bon courage pour ce tutoriel souvent demandé mais assez complexe à mettre en place efficacement !
Andriano
2 Oct 2019Merci pour ce tutoriel.
Je l’ai codé en jquery pour faire simple.
Damien
16 Oct 2019Salut et merci pour tes tutos !
J’aimerai ajouter une fonction pour que le navigateur remonte à une ancre lorsque l’on clique sur le « lire moins ».
Tu pourrais m’aiguiller ?
Dgeo Dev
17 Oct 2019Hello, merci pour le message.
Hum c’est assez complexe car c’est le même bouton, donc si on met une ancre au clic sur voir plus on ira aussi à l’ancre… Ca demande un dev sur mesure pour le coup 🙂
Damien
17 Oct 2019Hmm oui pas si simple 🙂 Malheureusement mon budget ne me permet pas de me payer les talents d’un développeur pour le moment 🙁 Peut être bientôt ? 😉 Je penserais à te faire un don à l’occase en tous cas, tu le mérite bien !
Dgeo Dev
18 Oct 2019Ok 🙂 merci c’est sympa 😉
Adam
24 Oct 2019Salut Dgeo !
Merci pour ce super tuto (bien pratique pour ne pas afficher la description des collections pour coupler SEO et UX).
Petite question, est-ce possible d’afficher le « En savoir plus » non pas comme un bouton mais comme un lien hypertexte bleu ?
Dgeo Dev
26 Oct 2019Salut, merci pour le message 🙂 Oui c’est possible en remplacement button par a pour donner un truc sur genre < a ... > < /a ><
Samuel Ridal Cene Delva
26 Oct 2019Salut! Dev, j’espère que vous allez bien!
J’ai vraiment besoin de vous, Pouvez-vous me contacter par email, je ne connais pas votre adresse email.
Dgeo Dev
26 Oct 2019Hello, vous pouvez me contacter sur Facebook 🙂 https://www.facebook.com/dgeodev
Chek
26 Oct 2019Salut Dgeo Dev et merci pour ce tuto !
Dommage que je ne l’ai pas vu avant, je viens d’ajouter le bouton « lire la suite » grâce à un codeur 5euros.
Mais du coup je ne sais pas si mon bouton a été correctement ajouté pour le SEO.
Je te laisse une capture d’écran de mon code, peut-être que t’y verras plus clair 😉
Screen : https://imgur.com/a/rPIpOKS
Dgeo Dev
26 Oct 2019Hello, oui il faut tjs venir ici avant pour regarder si c’est dispo en Gratuit car bcp de personnes sur 5euro revendent mes codes Gratuits… c’est pénible mais bon triste monde… Bref… ca me semble correct même si je trouve qu’il y a un peu trop d’h3 à mon goût 😉 Bon WE
Chek
26 Oct 2019Merci pour le retour rapide
Et honte à ceux qui revendent ton travail !
Cyril Drou'
8 Nov 2019Salut Dgeo Dev !
Merci pour ces tutos très utiles. C’est vraiment très intéressant, tu fais du bon boulot !
J’ai une petite question, j’ai utilisé ton codage pour mon site il fonctionne parfaitement, mais j’ai un problème, j’ai deux textes différents ( du coup deux boutons » lire la suite » ) et lorsque je clique sur le bouton du deuxième texte ça déclenche le bouton du premier texte ( comme un raccourci ) que faut-il faire pour que les deux boutons soient actifs chacun pour leurs propres textes ?
Passe un bon weekend !
Amicalement
Cyril
Dgeo Dev
12 Nov 2019Hello, merci pour le com. Oui je vois en fait il faudrait adapter le code au niveau des identifiants, le 2eme ne doit pas avoir le même. Ca reste tout de même assez technique à faire :(. Bonne journée.
fabien
27 Nov 2019Bonsoir DGeo,
merci pour tes tutos très utiles, quand tu parles de modifier le code dans la fiche produit, est il possible de le modifier pour toutes les fiches produits. Bonne soirées 🙂
Dgeo Dev
30 Nov 2019Hello merci pour le message. Je ne comprends pas la question… d’un point de vue visuel ?
Peter
3 Déc 2019Bonjour, lorsque j’affiche les codes html du produit il y a déjà un code, je colle celui du tuto avant ou après ?
Dgeo Dev
4 Déc 2019Hello, merci pour le message, ca je peux pas vous dire 🙂 je ne sais pas ce que vos codes font 😉 testez les 2 !
fabien
23 Déc 2019Bonjour Dgeo,
merci pour tes tutos,
pour ma part cette fonctionne ne convient pas au theme Jumstart
je ne trouve pas le fichier ds ASSET
theme.js.liquid
timber.js.liquid
style.sccs.liquid
bref un xxx.js.liquid :p
j’ai uniquement trouvé le theme.js
Dgeo Dev
24 Déc 2019Hello, oui le theme.js devrait être le bon 🙂 à tester. Bonne soirée.
Flavien
10 Mar 2020Bonjour, est-il possible de ne pas avoir un bouton mais simplement un texte pour le « lire la suite » ?
Dgeo Dev
13 Mar 2020Hello, oui c’est possible dans ce cas remplacer dans la partie html le button et /button par span et /span 🙂
John
16 Mar 2020Hello, est-ce normal que le titre H2 n’apparaisse pas ? Y’a t-il un moyen pour qu’il soit dans le texte ?
Dgeo Dev
19 Mar 2020Hello, comment ça n’apparaisse pas ? le H2 est dans l’éditeur, le code ne joue pas la dessus 🙂
Rémi RODRIGUES
28 Avr 2020Bonsoir,
Lorsque je fais tout correctement , le bouton « en savoir plus » apparait en effet mais quand je veux réduire un bouton « en savoir moins » devrait apparaitre, cependant il y a écrit « undefined », je comprends pas pourquoi … si tu pouvais m’aider ce serait cool
Dgeo Dev
29 Avr 2020Hello, étrange me MP au besoin pour voir ensemble
Sam
3 Mai 2020Salut Dgeo Dev
Merci pour ce bout de code, c’est top.
J’aimerai avoir « lire la suite » en bas de page sous la collection, c’est possible ?
abderrahim ZEDIOUI
13 Mai 2020salut dgeodev!
merci beaucoup pour tes conseils j’ai vraiment apprécier ta façon de simplifier les choses,
j’ai une question si vous voulez:
est ce qu’on peux crée une balise spécifique pour chaque collection de produits?
comme exemple: pour une boutique en ligne des produits alimentaire et boissons
– balise pour la collection des produits alimentaires (conservé, bio, conditionné, frac, 1 kg, 500 g…… etc)
– balise pour la collection des boissons (1 litre, 2 litres…., Boissons gazeuses, Jus, orange… eaux minéraux…)
– balise pour les produits laitiers…….
et je veux que la balise n’apparaître que dans la collection concerné !
j’aimerais bien si vous pouvez me répondre
merci beaucoup
cordialement
Dgeo Dev
13 Mai 2020Hello, si la question est: puis-je appliquer ce tuto sur chaque collection ? la réponse est oui étant donné que le code est individuel et propre à chaque page 🙂
Kev
2 Juil 2020Bonjour,
Merci pour ce tuto
Cependant avec le thème narrative, tout est correct le bouton « en savoir plus » apparaît mais il ne se passe rien quand je clique, il n’affiche pas la suite du lorem ipsum.
une piste pour m’aider ?
Dgeo Dev
2 Juil 2020Hello, c’est compatible tout thème donc il faut persévérer ou me MP le lien du site pour voir
Kev
26 Juil 2020J’ai finalement trouvé , il fallait utiliser custom.js pour le thème narrative et non theme.js.
Dgeo Dev
29 Juil 2020Hello 🙂 ok cool bravo ! le commentaire aidera pour les personnes dans le même cas de figure 🙂
Lenit
22 Oct 2020Merci Kev pour la précision
Chris
31 Juil 2020Bonjour,
Je voudrais placer ce code sur ma page d’accueil pour réduire l’espace de mon texte enrichi SEO. A quel endroit faut-il le coller ?
Dgeo Dev
3 Août 2020Hello, généralement dans Sections – Featured-product.liquid 🙂
Venom
31 Juil 2020Et un grand merci pour tes tuto gratuit en français pour optimiser les thèmes shopify !
David
18 Août 2020Bonjour j’ai suivi votre tuto super merci le souci ces que j’ai beaucoup de texte et quand ont click sur le bouton sa amène directement en bas de page donc direct a la fin de l’article comment déplier mais que la lecture du texte reste en haut pour le lecteur ?
Dgeo Dev
21 Août 2020Bonjour, effectivement vous pouvez remplacer le code js par celui ci :
function dgReadMore() {
var dots = document.getElementById("dg-rm-dots");
var moreText = document.getElementById("dg-rm-more");
var btnText = document.getElementById("dg-rm-btn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = dgReadMoreText1;
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = dgReadMoreText2;
moreText.style.display = "inline";
}
window.scrollTo(0, 0);
}
cedric
29 Août 2020Bonjour Dgeo et merci pour ce tuto que j’ai installé depuis quelques mois maintenant…. Je rencontre un soucis sur la version Speedfly-2-09-5-2 même en remettant correctement les 2 codes dans le thème, cela ne fonctionne pas, peux tu m’aiguiller ?
Merci d ‘avance
Dgeo Dev
31 Août 2020Hello, étrange par contre si vous avez speedfly il suffit de contacter le support qui pourra mieux vous aider sur ce point car le sav est gratuit 😉 speedecom.freshdesk.com
Gabriel
1 Sep 2020bonjour,
merci pour votre tuto.
J’aimerais mettre ce code sur chacune de mes pages de collection et je rencontre un problème.
lorsque j’ai mis votre code sur ma première page de collection tout marche parfaitement, mais dès que j’essaie de le mettre sur les autres rien a faire il ne marche pas. Je ne peux que voir le texte en entier aucune action de faite.
Comment faire pour que cela marche sur toutes les pages de collections !
Merci
DLR
30 Oct 2020Bonjour,
Encore merci pour votre tuto qui marche presque très bien, c’est pour sa que j’ai une petite question :
– J’ai appliquer ce bouton pour mon texte sous ma collection mais a chaque fois que j’appuie sur le bouton « en savoir plus » la page remonte tout en haut, ce qui est problématique pour l’UX. Et c’est la même chose pour le bouton « en savoir moins ».
J’attend votre réponse , merci . : )
Dgeo Dev
31 Oct 2020Hello et merci pour le retour 🙂 c’est en effet un problème et le tuto est désormais modifié en conséquence 😉
Mathieu
6 Jan 2021hello, déjà merci énormément pour ce tuto !!
je voudrais savoir s’il serait possible de placer la description tout en bas de page, juste en dessous des produits ?
un développeur me propose 25€ pour faire àça (sur 5euros) mais si je dois payer 25€ pour chacune de mes collections j’ai pas d’abord fini… Merci d’avance ! 🙂
Dgeo Dev
7 Jan 2021Hello, ne payez pas cette somme c’est de l’arnaque… il suffit de trouver dans le fichier – Sections – collection-template.liquid le
{{ collection.description }}
et de le déplacer plus bas et le tour est joué 😉 bon courage.Mathieu
8 Jan 2021merci beaucoup pour votre réponse Dgeo Dev, vous me redonnez foi en l’humanité, quand je vois certains ce qui peuvent faire pour quelques euros…. merci encore 🙂
Louis
12 Jan 2021Bonjour, déja un grand merci pour votre tuto il m’a été d’une grande aide ! Petite question : savez si il est possible de modifier la taille du bouton et si oui comment ?
Dgeo Dev
13 Jan 2021Hello, et merci pour le com 🙂 oui c’est possible en modifiant le font-size