Nous allons voir dans ce tutoriel comment créer un système de sommaire sur vos articles de blog sur shopify. Et ce de manière automatique et administrable.

comment créer un système de sommaire sur shopify

Vous pouvez voir le résultat sur le site de démonstration.

Pourquoi créer un sommaire sur vos articles Shopify ?

En SEO il est important de faire plaisir aux moteurs de recherche et notamment Google. Cela passe également et avant tout par lui faciliter la vie. En présentant un sommaire à Google il va aimer et rapidement trouver ce qu’il cherche et donc optimiser votre SEO sur shopify.

Comment ce système va t-il fonctionner ?

Et bien c’est très simple j’ai tout prévu pour vous en codant cette petite fonction qui va automatiquement détecter les titres de vos articles. De plus il va créer le sommaire à l’endroit voulu avec les options suivantes que vous allez pouvoir modifier.

  • Le titre du sommaire,
  • La balise titre qui sera prise en compte pour les liens du sommaire,
  • Le nombre à partir duquel le sommaire doit s’afficher,
  • Son emplacement.

Petit exemple des options:

code création sommaire shopify

Comment mettre tout cela en place ?

Nous allons procéder en 3 étapes. Dans un premier temps la partie html qui affichera le résultat. Dans un second temps la partie CSS qui donnera l’aspect de visuel du sommaire et pour terminer la partie Javascript qui créera le système automatique.

Nous verrons également comment personnaliser ce système afin qu’il corresponde au design de votre boutique Shopify.

Partie HTML

Pour une fois vous n’aurez pas spécialement besoin de mettre un code HTML particulier. Notez juste que vous pouvez ajouter une classe à un de vos paragraphes afin de pouvoir placer le système à l’emplacement de votre choix. Ceci étant dit je pense que vous n’en aurez pas besoin. En effet généralement c’est sous le h1  ! Pour plus d’explication voir la vidéo qui arrivera bientôt ;).

Paragraphe d’exemple à mettre si vous souhaitez reprendre la main sur le placement. Ensuite dans la 4ème option mettre « before » ou « after » pour que le sommaire d’affiche avant ou après ce paragraphe !

<p class="chapo">Le Chapo de l'article est le premier paragraphe avant les balises de titres</p>

Partie CSS

Rendez-vous dans « Boutique en ligne – Actions – Modifier le code » et trouvez  le dossier « Assets ». A ce stade trouvez un fichier de type: « style.scss.liquid, theme.scss.liquid, timber.scss.liquid » ou un « xxxx.scss.liquid ». Pour finir ouvrez le et mettez vous tout en bas du fichier et collez le code suivant:

#summary {
    background: linear-gradient(180deg, #FEFEFE, #F0F0F0);;
    border:1px solid #888;
    padding:10px 15px;
    margin-bottom:15px;
    border-radius:4px;
    width:auto;
    text-align:left;
} 
#summary strong {
    display:block;
    font-size:110%;
    margin-bottom:7px;
}
#summary-list, #summary-list li {
    list-style:none;
    margin:0;
    padding:0;
}  
#summary-list a {
    text-decoration: none;
    padding:7px 0;
    font-size:90%;
    display:block;
    border:none;
}    
#summary-list a:hover {
    text-decoration: underline;
}

Partie Javascript

Restez dans le dossier « Templates » et trouvez un fichier « article.liquid ». Il ne vous reste plus qu’à vous rendre tout en bas du fichier et coller le code ci-dessous:

<script>
  // va permettre créer un sommaire sur les h2
  const createSummary = function(t,h,nb,pos){            
    // on va chercher tous les H2
    const titles = document.querySelectorAll(h);  
    let statut = false;
    if (titles.length >= nb ) {
      statut = true;           
    }  
    if (statut) {
      let arrayTitlesText = [];  
      let i;
      // on boucle pour ajouter des ids différents et récupérer le texte des titres              
      for(i=0; i < titles.length; i++){
        const title = titles[i];
        title.id = `ancre-${i}`;
        arrayTitlesText.push(title.textContent);         
      }              
      // on crée le sommaire    
      const summaryWrapper = document.createElement('div');
      summaryWrapper.id = "summary";          
      const summaryTitle = document.createElement('strong');
      summaryTitle.textContent = t;
      summaryWrapper.appendChild(summaryTitle);
      const ul = document.createElement('ul');
      ul.id = "summary-list";
      summaryWrapper.appendChild(ul);
      // on récupère le texte des titres et on crée la liste à puce
      for(i=0; i < arrayTitlesText.length; i++){            
        const linkTitle = arrayTitlesText[i];                 
        const addLi = document.createElement('li');
        const findList = document.getElementById('summary-list');            
        const insertLi = ul.appendChild(addLi);
        const createLink = document.createElement('a');
        createLink.href = `#ancre-${i}`;            
        const insertLink = insertLi.appendChild(createLink);
        insertLink.innerHTML = `${i +1}. ${linkTitle}`; 
      }
      // on trouve le chapo pour définir le placements        
      const chapo = document.querySelector('.chapo');
      // options 
      if (pos == "before") {
        chapo.before(summaryWrapper); 
      }  
      else if (pos == "after") {
        chapo.after(summaryWrapper); 
      }
      else {
        const postTitle = document.querySelector('h1');
        postTitle.after(summaryWrapper); 
      }    
    }   
  }
  /* options modifiables :
Option 1: titre du sommaire 
Option 2: balise à prendre en compte pour les ancres 
Option 3: Nombres de titres pour que le sommaire s'affiche
Option 4: placement du sommaire, choix: before, after, si vide se place sous le H1
ps: si choix before ou after mettre une class="chapo" sur votre 1er paragraphe dans votre éditeur shopify
*/
  const option1 = "Sommaire";
  const option2 = "h2";
  const option3 = "3";
  const option4 = "";

  createSummary(option1,option2,option3,option4);

</script>

Options du système de sommaire

  • Option 1: titre du sommaire,
  • Option 2: balise à prendre en compte pour les ancres,
  • Option 3: Nombres de titres pour que le sommaire s’affiche,
  • Option 4: placement du sommaire, choix: before, after, si vide se place sous le H1,
  • ps: si choix before ou after mettre une class= »chapo » sur votre 1er paragraphe dans votre éditeur shopify.

Code spécifique pour Speedfly

<script>
  // va permettre créer un sommaire sur les h2
  const createSummary = function(t,h,nb,pos){            
    // on va chercher tous les H2
    const titles = document.querySelectorAll(h);  
    let statut = false;
    if (titles.length >= nb ) {
      statut = true;           
    }  
    if (statut) {
      let arrayTitlesText = [];  
      let i;
      // on boucle pour ajouter des ids différents et récupérer le texte des titres              
      for(i=0; i < titles.length; i++){
        const title = titles[i];
        title.id = `ancre-${i}`;
        arrayTitlesText.push(title.textContent);         
      }              
      // on crée le sommaire    
      const summaryWrapper = document.createElement('div');
      summaryWrapper.id = "summary";          
      const summaryTitle = document.createElement('strong');
      summaryTitle.textContent = t;
      summaryWrapper.appendChild(summaryTitle);
      const ul = document.createElement('ul');
      ul.id = "summary-list";
      summaryWrapper.appendChild(ul);
      // on récupère le texte des titres et on crée la liste à puce
      for(i=0; i < arrayTitlesText.length; i++){            
        const linkTitle = arrayTitlesText[i];                 
        const addLi = document.createElement('li');
        const findList = document.getElementById('summary-list');            
        const insertLi = ul.appendChild(addLi);
        const createLink = document.createElement('a');
        createLink.href = `#ancre-${i}`;            
        const insertLink = insertLi.appendChild(createLink);
        insertLink.innerHTML = `${i +1}. ${linkTitle}`; 
      }
      // on trouve le chapo pour définir le placements        
      const chapo = document.querySelector('.blog-meta');
      // options 
      if (pos == "before") {
        chapo.before(summaryWrapper); 
      }  
      else if (pos == "after") {
        chapo.after(summaryWrapper); 
      }
      else {
        const postTitle = document.querySelector('h1');
        postTitle.after(summaryWrapper); 
      }    
    }   
  }
  /* options modifiables :
Option 1: titre du sommaire 
Option 2: balise à prendre en compte pour les ancres 
Option 3: Nombres de titres pour que le sommaire s'affiche
Option 4: placement du sommaire, choix: before, after, si vide se place sous le H1
ps: si choix before ou after mettre une class="chapo" sur votre 1er paragraphe dans votre éditeur shopify
*/
  const option1 = "Sommaire";
  const option2 = "h2";
  const option3 = "3";
  const option4 = "after";

  createSummary(option1,option2,option3,option4);

</script>

Ce Tutoriel existe aussi en Vidéo !

La Vidéo arrive bientôt…

Le petit mot de la fin

Ce tuto shopify est maintenant terminé. Vous allez pouvoir profiter de ce système pour gagner je l’espère quelques places sur Google 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 5 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 2 commentaires

  1. Hello Dgeo!

    Merci pour tous ces tutos trop bien!
    J’ai essayé celui là pour mettre un sommaire sur mes pages de blog (sous Speedfly), mais rien ne se passe…est -ce qu’il y a une subtilité avec le thème speedfly?
    Un très grand merci d’avance
    Anaïs

    1. Hello, en effet y avait une incompatibilité, j’ai donc créé un code spécifique pour le thème speedfly en attendant son implantation lors d’une prochaine mise à jour 😉 le système sera bien meilleur 🙂

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