Comment créer un bouton lire la suite sur Shopify ?

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:

#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 (Assets) un fichier .js généralement:

  • theme.js.liquid
  • timber.js.liquid
  • style.sccs.liquid
  • bref un xxx.js.liquid :p

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

var dgReadMoreText1 = "+ En savoir plus";
var dgReadMoreText2 = "- En savoir moins";

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";
}
}

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"></span>
</p> 
<div id="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> 
<button id="dg-rm-btn" onclick="dgReadMore()">+ En savoir plus</button>

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

<span id="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">
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:

<button id="dg-rm-btn" onclick="dgReadMore()">+ En savoir plus</button>

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 »></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 😉

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.8 sur 4 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 20 commentaires

  1. Andriano

    2 Oct 2019 Répondre

    Merci pour ce tutoriel.
    Je l’ai codé en jquery pour faire simple.

  2. 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 😉

  3. 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 ><

  4. 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.

  5. 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 !

  6. 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.

  7. 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 ?

  8. 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 !

  9. 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.

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation