Sommaire

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) – Ressources (Assets) et trouvez un des fichiers suivants: base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

Déroulez le fichier et mettez vous tout en bas pour coller le code suivant:

.dg-rm-more {display: none; } 
.dg-rm-more p:last-child { margin-bottom:15px; } 
.dg-rm-dots:after { display:inline-block; content:"..."; }

Dans un deuxième temps trouvez dans le même dossier Ressources (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:

function dgReadMore(id) {
	let dgReadMoreText1 = "+ En savoir plus";
	let dgReadMoreText2 = "- En savoir moins";    
   
	const dots = document.getElementById("dg-rm-dots-"+id);
	const moreText = document.getElementById("dg-rm-more-"+id);
	const btnText = document.getElementById("dg-rm-btn-"+id);   
    const dotsHeightToTop = moreText.getBoundingClientRect().top;   
   
	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, dotsHeightToTop.toFixed());
	}	
  }

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 !

<h2>Zone "En savoir plus" de la description</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae. <span id="dg-rm-dots-1" class="dg-rm-dots"></span></p>
<div id="dg-rm-more-1" class="dg-rm-more">
<p><strong>Zone à afficher au clic sur "En savoir plus"</strong></p>
<p>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
<p>Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
</div>
<a href="#dg-rm-more-1" id="dg-rm-btn-1" class="btn dg-rm-btn" onclick="dgReadMore('1')">+ En savoir plus</a>

Écrivez votre texte normalement, à l’endroit ou vous souhaitez couper votre texte mettez la balise suivante:

<span id="dg-rm-dots-1" class="dg-rm-dots"></span>

Ensuite englobez le reste de la description dans la balise div suivante (n’oubliez pas la fermeture </div> !!!):

<div id="dg-rm-more-1" class="dg-rm-more">
la suite de votre description qui s'affichera au clic sur le bouton "En savoir plus".
</div>

Il nous reste plus qu’à ajouter le bouton « En savoir plus » en collant la balise suivante tout en bas de votre description:

<a  href="#dg-rm-more-1" id="dg-rm-btn-1" class="btn dg-rm-btn" onclick="dgReadMore('1')">+ En savoir plus</a>

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('1')" par onclick="dgReadMore('2')"

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 !

Merci de me laisser une petite note 😉

[Note moyenne de: 4.9 sur 14 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

« Comment éviter le duplicate content sur Shopify ?

Les 5 meilleurs livres SEO à lire en 2024 »

Cet article a 96 commentaires

Andriano
2 Oct 2019 Répondre

Merci pour ce tutoriel.
Je l’ai codé en jquery pour faire simple.
Damien
16 Oct 2019 Répondre

Salut 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 ?
1. Dgeo Dev
  17 Oct 2019 Répondre
  
  Hello, 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 🙂
  1. Damien
    17 Oct 2019 Répondre
    
    Hmm 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 !
    1. Dgeo Dev
      18 Oct 2019 Répondre
      
      Ok 🙂 merci c’est sympa 😉
Adam
24 Oct 2019 Répondre

Salut 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 ?
1. Dgeo Dev
  26 Oct 2019 Répondre
  
  Salut, 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 2019 Répondre

Salut! 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.
1. Dgeo Dev
  26 Oct 2019 Répondre
  
  Hello, vous pouvez me contacter sur Facebook 🙂 https://www.facebook.com/dgeodev
Chek
26 Oct 2019 Répondre

Salut 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
1. Dgeo Dev
  26 Oct 2019 Répondre
  
  Hello, 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
  1. Chek
    26 Oct 2019 Répondre
    
    Merci pour le retour rapide
    Et honte à ceux qui revendent ton travail !
Cyril Drou'
8 Nov 2019 Répondre

Salut 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
1. Dgeo Dev
  12 Nov 2019 Répondre
  
  Hello, 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 2019 Répondre

Bonsoir 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 🙂
1. Dgeo Dev
  30 Nov 2019 Répondre
  
  Hello merci pour le message. Je ne comprends pas la question… d’un point de vue visuel ?
Peter
3 Déc 2019 Répondre

Bonjour, lorsque j’affiche les codes html du produit il y a déjà un code, je colle celui du tuto avant ou après ?
1. Dgeo Dev
  4 Déc 2019 Répondre
  
  Hello, 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 2019 Répondre

Bonjour 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
1. Dgeo Dev
  24 Déc 2019 Répondre
  
  Hello, oui le theme.js devrait être le bon 🙂 à tester. Bonne soirée.
Flavien
10 Mar 2020 Répondre

Bonjour, est-il possible de ne pas avoir un bouton mais simplement un texte pour le « lire la suite » ?
1. Dgeo Dev
  13 Mar 2020 Répondre
  
  Hello, oui c’est possible dans ce cas remplacer dans la partie html le button et /button par span et /span 🙂
John
16 Mar 2020 Répondre

Hello, est-ce normal que le titre H2 n’apparaisse pas ? Y’a t-il un moyen pour qu’il soit dans le texte ?
1. Dgeo Dev
  19 Mar 2020 Répondre
  
  Hello, comment ça n’apparaisse pas ? le H2 est dans l’éditeur, le code ne joue pas la dessus 🙂
Rémi RODRIGUES
28 Avr 2020 Répondre

Bonsoir,
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
1. Dgeo Dev
  29 Avr 2020 Répondre
  
  Hello, étrange me MP au besoin pour voir ensemble
Sam
3 Mai 2020 Répondre

Salut 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 2020 Répondre

salut 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
1. Dgeo Dev
  13 Mai 2020 Répondre
  
  Hello, 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 2020 Répondre

Bonjour,

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 ?
1. Dgeo Dev
  2 Juil 2020 Répondre
  
  Hello, c’est compatible tout thème donc il faut persévérer ou me MP le lien du site pour voir
Kev
26 Juil 2020 Répondre

J’ai finalement trouvé , il fallait utiliser custom.js pour le thème narrative et non theme.js.
1. Dgeo Dev
  29 Juil 2020 Répondre
  
  Hello 🙂 ok cool bravo ! le commentaire aidera pour les personnes dans le même cas de figure 🙂
2. Lenit
  22 Oct 2020 Répondre
  
  Merci Kev pour la précision
Chris
31 Juil 2020 Répondre

Bonjour,

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 ?
1. Dgeo Dev
  3 Août 2020 Répondre
  
  Hello, généralement dans Sections – Featured-product.liquid 🙂
Venom
31 Juil 2020 Répondre

Et un grand merci pour tes tuto gratuit en français pour optimiser les thèmes shopify !
David
18 Août 2020 Répondre

Bonjour 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 ?
1. Dgeo Dev
  21 Août 2020 Répondre
  
  Bonjour, 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); }
  1. Isa
    24 Fév 2021 Répondre
    
    Bonjour,
    Merci pour cette mise à jour de code. De mon côté, quand on clique sur « En savoir plus », il ne se passe rien. Alors même que cela fonctionnait parfaitement avec le tuto d’origine. Ai-je loupé une étape ?
    1. Dgeo Dev
      25 Fév 2021 Répondre
      
      Hello, je ne sais pas trop il faudrait ouvrir la console afin de voir si il y a des erreurs
cedric
29 Août 2020 Répondre

Bonjour 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
1. Dgeo Dev
  31 Août 2020 Répondre
  
  Hello, é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 2020 Répondre

bonjour,
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 2020 Répondre

Bonjour,
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 . : )
1. Dgeo Dev
  31 Oct 2020 Répondre
  
  Hello 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 2021 Répondre

hello, 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 ! 🙂
1. Dgeo Dev
  7 Jan 2021 Répondre
  
  Hello, 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.
  1. Mathieu
    8 Jan 2021 Répondre
    
    merci 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 🙂
  2. Yohan
    18 Nov 2022 Répondre
    
    Je n’arrive pas à faire fonctionner mon bouton en savoir plus, mais cette solution est une bonne alternative en dépanage.
    Le problème est que quand j’appuie sur le bouton, je remonte en haute de page (sans que le texte ne se soit déroulé)
    
    Tu pourras voir ceci sur cette page: https://lescotonsderomane.com/collections/soins-cheveux-naturels
    
    Tu rends le « codage » abordable, merci à toi !
    1. Dgeo Dev
      21 Nov 2022 Répondre
      
      Bonjour et merci pour le commentaire 🙂 je ne vois pas le bouton lire la suite… Je présume que vous l’avez supprimé en attendant ?
Louis
12 Jan 2021 Répondre

Bonjour, 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 ?
1. Dgeo Dev
  13 Jan 2021 Répondre
  
  Hello, et merci pour le com 🙂 oui c’est possible en modifiant le font-size
Caroline Herd
26 Jan 2021 Répondre

Bonjour Dgeo,
Je te contacte parce que j’adore tes vidéos qui sont très bien expliquées.
Mais pour une raison que j’ignore, en suivant exactement tes directives, je n’arrive jamais au même résultat que toi.
J’utilise le thème prestige (liquid) sur shopify. Penses-tu à une raison qui expliquerait pourquoi je n’arrive pas à appliquer tes conseils?
D’avance, je te remercie et te souhaite une belle journée,
Caroline
1. Dgeo Dev
  26 Jan 2021 Répondre
  
  Hello et merci pour le com 😉 je ne connais pas très bien ce thème mais il se peut qu’il y ai un conflit. Le mieux serait de demander à leur support car il me semble que c’est une agence française 🙂
Victor
1 Fév 2021 Répondre

Bonjour Diego,
Cela fait plusieurs fois que j’utilise tes tutoriel afin de coder et rendre mon site plus attirant. Cependant j’essaie d’ouvrir un site avec plusieurs langues, et je m’y connais pas encore trop en codage. Je voulais savoir s’il était possible pour ce bouton En savoir plus, de proposer les traductions pour les autres langues. Je me suis aussi servi de ton tuto pour afficher « Vous économisez X€ (Y%), mais malgré avoir essayé plusieurs choses, je n’arrive pas à trouver comment faire. Merci pour tes tutos encore une fois, ils aident vraiment !
1. Dgeo Dev
  2 Fév 2021 Répondre
  
  Hello, dans ce cas il faut utiliser le système de langages de shopify et de mettre les textes dans les trads. Pour savoir comment faire je t’invite à regarder vers la fin de cette vidéo 🙂 https://youtu.be/Cwlge4n6XjQ
  1. Victor
    5 Fév 2021 Répondre
    
    Merci ! Je m’en suis bien servis !
mireille
15 Fév 2021 Répondre

Bonjour,
Je vous remercie pour les codes, ils fonctionnent très bien, je les ai intégré dans les éditeurs des fiches produits, dommage qu’ on ne puisse pas l’installer d’une façon générale, cependant, je tenais a vous signaler que les codes donnés sur le tuto ne sont pas les même que sur la vidéo, ce qui m’a value des erreurs,

Donc j’ai pris intégralement les codes de la vidéo et tout fonctionne très bien, pour mon thème speedFly
merci a vous pour toute cette aide
1. Julien
  1 Avr 2021 Répondre
  
  Hey Mireille, chapeau!! auriez vous le code en entier?
Benjamin
13 Avr 2021 Répondre

Bonjour,

Tout d’abord génial les tutos, je les adore tous.
J’ai juste tendance à les utiliser un peu différemment de ce que tu proposes à chaque fois et du coup je me retrouve avec des trucs compliqués (mais j’aime ça hein ^^) alors que je suis totalement débutant..

Du coup ma question, j’ai utilisé ton tuto pour faire disparaitre ma description sur la page d’accueil qui prenait trop de place, pour la faire apparaitre grâce au bouton « en savoir plus ». Donc tout fonctionne bien mais je n’arrive pas à faire disparaitre les « … » et comme je n’ai pas de texte, bah ça le fait moyen…

Pourrais-tu m’aider stp?
1. Dgeo Dev
  15 Avr 2021 Répondre
  
  Hello et merci pour le message 😉 c’est dans le css : .dg-rm-dots:after { display:inline-block; content: »… »; } supprimer les …
Elio
10 Mai 2021 Répondre

Bonjour, merci pour ce tuto ! Je voulais savoir si il était possible d’ajouter le bouton lire plus mais sur une page d’accueil, mon texte fait 500 mots et c’est assez gênant d’un point de vu utilisateur et j’en ai besoin pour le seo. Je passe par le thème SpeedFly. Merci pour ta futur aide.
1. Dgeo Dev
  10 Mai 2021 Répondre
  
  Hello, oui c’est possible ca reste le même principe 😉 si besoin d’un peu d’aide avec speedfly c’est par ici 😉 speedecom.freshdesk.com
Elio
25 Mai 2021 Répondre

Bonjour w je voudrais mette le bouton lire + sur un texte de ma.page d’accueil. Mais en mettant ce texte sur une autre page à la base comme vous l’expliquer cela fera du duplicate content au sein du site pour le seo? Avez-vous une solution ? Merci à vous
1. Dgeo Dev
  25 Mai 2021 Répondre
  
  Hello, il suffit de modifier simplement la tournure des phrases ou se renseigner sur le content spinning
Batata Iness
11 Juin 2021 Répondre

Hello,

Tout d’abord, un grand merci pour le temps passé à nous enseigner. C’est vraiment très utile !
Pour ma part, Je rencontre le même soucis remonté plus haut par DLR. « A chaque fois que j’appuie sur le bouton « en savoir moins » la page remonte tout en haut ». Je n’ai pas réussi à régler ce soucis en bidouillant toute seule.

Auriez-vous une solution ? Merci d’avance.
1. Dgeo Dev
  11 Juin 2021 Répondre
  
  Hello, essayez de supprimer la ligne suivant et ca devrait fonctionner 😉 window.scrollTo(0, 0);
Batata Iness
18 Juin 2021 Répondre

Action Faite, Je ne remonte plus en haut de l’écran ce qui est bon point. Par contre maintenant je reste sur le footer de mon site.
Je n’ai pas réussi à revenir sur la section que j’essaie de réduire
1. Dgeo Dev
  19 Juin 2021 Répondre
  
  Oui c’est normal il faudrait un code plus perfectionné…
Spitals
19 Août 2021 Répondre

Une pépite pour tous mes sites ! Merci pour ce tuto !
1. Dgeo Dev
  19 Août 2021 Répondre
  
  Hello, merci pour le com c’est sympa 😉
Gabin dezarnaud
17 Nov 2021 Répondre

Bonjour, je suis entrain de creer ma boutique en ligne et j’ai un petit soucis, quand je clique sur le bouton la page descend toute seule ce qui n’est pas très beau visuellement.
Sinon tes vidéos son super merci beaucoup
1. Dgeo Dev
  18 Nov 2021 Répondre
  
  Bonjour, étrange, pourrais-je avoir le lien svp en me le donnant en MP sur Facebook ? je regarderai ce WE
Gabin dezarnaud
19 Nov 2021 Répondre

merci beaucoup, je vous est envoyé sur messenger
Julien
21 Jan 2022 Répondre

Bonjour,

Tout d’abord merci beaucoup pour vos bouts de code ultra ultra pratiques ! D’une aide précieuse !

J’ai simplement une seule question car personnellement, je veux utiliser ce bouton « en savoir plus » pour des objectifs UX et SEO.

Mais j’aimerais avoir votre avis d’expert: Cela impacte-t-il quand-même négativement le SEO (le fait de cacher du texte, est-il « caché » pour la prise en compte par Google de ce texte caché) OU est-ce neutre par rapport au SEO ?

Merci par avance et bonne journée à vous !
1. Dgeo Dev
  21 Jan 2022 Répondre
  
  Bonsoir et merci pour le commentaire c’est sympa 🙂 – non aucun impact du moins plus depuis quelques années. Un article pour y voir plus clair : https://www.agence90.fr/contenu-cache-seo/ Bonne soirée
Jessy
21 Jan 2022 Répondre

Bonsoir,

Jai tenté via votre tutorial d’ajouter un bouton lire la suite sur une de mes pages de catégories. Cependant, bien que le bouton soit présent je n’ai pas la possibilité de lire la suite lorsque je clique dessus.

Auriez-vous une piste ?

Pour infos je n’avais pas les bon noms de fichiers.
– Pour le scss.liquid j’ai du le mettre dans css.liquid
– Pour le js.liquid j’ai utilisé le js

Merci par avance
1. Dgeo Dev
  21 Jan 2022 Répondre
  
  Bonsoir, généralement c’est que le code js n’est pas calculé. Il faudrait voir si c’est le bon fichier js ou alors essayer de le mettre ailleurs
Maxime
21 Fév 2022 Répondre

Bonjour Dgeo,

Sympa le tuto pour être SEO friendly sans avoir un pavé de description pour les collections.

Je rencontre un souci, j’ai mis la description tout en bas de ma page collection, tout s’affiche correctement mais quand je clique sur « en savoir plus » je suis remonté tout en haut de la page d’un seul coup, ça donne un peu la gerbe .

Une solution ?
1. Dgeo Dev
  21 Fév 2022 Répondre
  
  Hello et merci pour le message ! nativement le code ne fait pas ça, je pense que le thème dont avoir un conflit. Il faudrait approfondir en détail ou demander à leur support si ils peuvent aider 🙂
gaetan
5 Mar 2022 Répondre

Merci beaucoup pour ce tuto qui a marché nickel sur mon thème début shopify par contre dans asset j’ai dû importer dans theme.css et theme.js
gaetan
26 Mai 2022 Répondre

Bonjour j’aurais une question une fois mis en place ce tuto sur mon site lorsque je clique sur en savoir plus, je vois que l’url se modifie en rajoutant #dg-rm-more-1 à la fin.
J’imagine donc que cela crée une nouvelle url? Est-ce dommageable pour le référencement?

Merci
1. Dgeo Dev
  26 Mai 2022 Répondre
  
  Hello, malheureusement on a pas trop le choix 🙁 sinon une seule ancre de ce type n’a pas vraiment d’impact négatif. Faut juste pas en abuser 😉
Theo
15 Juil 2022 Répondre

Slt Dgeo Dev !
Merci pour tes tutos, ils m’ont servie plus d’une fois
sur le theme dawn quelle l’équivalent de « theme.scss.liquid » et de « theme.js » ?
Merci
1. Dgeo Dev
  15 Juil 2022 Répondre
  
  Hello 🙂 merci pour le message c’est sympa 😉 c’est base et global !
Yohan
25 Nov 2022 Répondre

Bonjour Dgeo,

Merci pour tes supers conseils, j’ai déjà appliqué une dizaine de tuto avec + ou – de réussite. Je galère un peu avec les fichiers de mon thème ENVY.
Dans le cas d’ajout du bouton « en savoir », cela ne fonctionne pas. J’ai réussi à camoufler tout ce qui est sous le premier paragraphe mais jamais à dérouler le bouton.
Si tu as une suggestion, je suis preneur. J’ai essayé de l’appliquer à cette page:
https://lescotonsderomane.com/collections/soins-cheveux-naturels

Encore merci,

Yohan.
1. Dgeo Dev
  25 Nov 2022 Répondre
  
  Bonjour, étrange en effet 🙁 au besoin je peux proposer une prestation pour intervenir, trouver le problème et le solutionner. Me faire une demande ici : https://speed-ecom.eu/support merci et bonne soirée
Hko
13 Avr 2023 Répondre

Merci pour ce tuto ! Serait-il possible de rajouter un deuxième bouton « – en savoir moins » en haut du texte ? Afin de permettre à l’utilisateur de fermer la description en haut et en bas. Merci !
1. Dgeo Dev
  16 Avr 2023 Répondre
  
  Hello avec plaisir 🙂 hum non navré c’est pas possible
Mehdi
7 Avr 2024 Répondre

Bonjour dgeo c’est possible de changer la couleur du bouton « En savoir plus » et aussi du texte?
Je les mit en dessous de mon ajout au panier sur ma fiche produit, dans liquid personaliser
1. Dgeo Dev
  8 Avr 2024 Répondre
  
  Hello et merci pour le commentaire
  Oui dans la partie .dg-rm-more {display: none; } tu peux rajouter un background:#ff6600; color:#fff;
  modifier la couleur hexadecimal selon la couleur souhaitée.
  Au besoin je peux te le faire en mini intervention 😉
Morgane
31 Mai 2024 Répondre

Bonjour 🙂 Le « en savoir plus » fonctionne quand je visualise ma page produit, mais quand je vais sur le site, le « en savoir plus » ne s’ouvre pas. Une petite idée de ce que j’ai pu mal faire ? Merci
1. Dgeo Dev
  1 Juin 2024 Répondre
  
  Hello, étrange ! tous les codes sont bien placés ? quel est le thème utilisé svp ? au besoin il est intégré dans le thème speedfly : https://speed-ecom.eu/theme-speedfly/
  1. Morgane
    4 Juin 2024 Répondre
    
    Bonjour, c’est le thème « refresh », et oui normalement tout est bien placé, ça fonctionne dans le backoffice et quand je visualise, mais pas sur le site en ligne
    1. Dgeo Dev
      19 Juin 2024 Répondre
      
      Bonjour, difficile à dire… au besoin je propose des mini interventions me contacter ici : https://speed-ecom.eu/contact

Nous allons voir dans ce tutoriel comment créer un bouton lire la suite sur Shopify

Côté tutoriel – code shopify

Côté Shopify – Éditeur

Et pour en mettre plusieurs sur une même page ?

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment créer une section Plan de Tarification sur Shopify ?

Comment Créer un Loader Animé sur Shopify

Comment Ajouter des Logos de Paiement sur Shopify ?

Cet article a 96 commentaires

Andriano

Damien

Dgeo Dev

Damien

Dgeo Dev

Adam

Dgeo Dev

Samuel Ridal Cene Delva

Dgeo Dev

Chek

Dgeo Dev

Chek

Cyril Drou'

Dgeo Dev

fabien

Dgeo Dev

Peter

Dgeo Dev

fabien

Dgeo Dev

Flavien

Dgeo Dev

John

Dgeo Dev

Rémi RODRIGUES

Dgeo Dev

Sam

abderrahim ZEDIOUI

Dgeo Dev

Kev

Dgeo Dev

Kev

Dgeo Dev

Lenit

Chris

Dgeo Dev

Venom

David

Dgeo Dev

Isa

Dgeo Dev

cedric

Dgeo Dev

Gabriel

DLR

Dgeo Dev

Mathieu

Dgeo Dev

Mathieu

Yohan

Dgeo Dev

Louis

Dgeo Dev

Caroline Herd

Dgeo Dev

Victor

Dgeo Dev

Victor

mireille

Julien

Benjamin

Dgeo Dev

Elio

Dgeo Dev

Elio

Dgeo Dev