Comment créer un Plan du site ou Sitemap sur Shopify ?

Nous allons voir dans ce tutoriel comment créer un plan du site sur Shopify afin de permettre à vos clients de trouver ce qu’ils veulent en un clin d’oeil 😉 En effet ce type de système bien qu’il soit perçu comme un peu démodé est très utilisé pour trouver rapidement ce qu’on cherche. Attention à le pas confondre avec le sitemap.xml que Google crawl qui est fait pour le SEO. La c’est pour aider l’internaute et faciliter son parcours sur votre site 😉

Création d’un template de page spécifique

Afin de pouvoir administrer tout cela nous allons créer un modèle de page que nous appelerons « sitemap » ! pour ce faire rendez-vous dans Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier Templates et cliquez sur « Ajouter un Template » – Créer un nouveau modèle pour « page » appelé « sitemap » comme l’exemple ci-dessous:

Maintenant dans ce fichier copiez/collez le code ci-dessous à l’endroit désiré, généralement après le {{ page.content }} ou après la fermeture juste après 😉

{% section 'sitemap' %}

Création de la section Sitemap

Rendez-vous cette fois dans le dossier Sections et cliquez sur « Ajouter une section » et nommez la « sitemap » et copiez/collez le code suivant:

<div class="sitemap grid-uniform ">  
  {% if section.settings.sitemap_products_enable %}
  <div class="grid-item">    
    <h2>Produits</h2>
    <ul>
      {% paginate collections.all.products by 2000 %}
      {% for product in collections.all.products %}
      {% if product.collections.size < 2000 %}
      <li>{{ product.title | link_to: product.url }}</li>
      {% endif %}
      {% endfor %}
      {% endpaginate %}
    </ul>
  </div>
  {% endif %}
  {% if section.settings.sitemap_collections_enable %}
  <div class="grid-item">
    <h2>Collections</h2>
    <ul>
      {% for collection in collections %}      
      <li>{{ collection.title | link_to: collection.url }}</li>     
      {% endfor %}

    </ul>
  </div>
  {% endif %}
  {% if section.settings.sitemap_blog_enable %}
  <div class="grid-item">
    <h2>Blog(s)</h2>    
    
    {% assign blog_handles = section.settings.sitemap_blog_name | split: ";" %}       

    {% for blog_handle in blog_handles %}
      
      <h3 class="h4" style="text-transform:initial;">{{ blog_handle }}</h3>
      <ul>
      {% for article in blogs[blog_handle].articles limit: 2000 %}
      <li>{{ article.title | link_to: article.url }}</li> 
      {% endfor %} 
      </ul>
    {% endfor %}     
  </div> 
  {% endif %}
</div>


<style>
  .sitemap .grid-item {
    margin-bottom:25px;
  }
  .sitemap .grid-item ul {
    margin-bottom:20px;
  }
  @media screen and (min-width: 768px) { 
    .sitemap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      grid-auto-rows: minmax(100px, auto);
      margin-bottom:25px;
    }
  }  
</style>

{% schema %}
  {
    "name": {
    "fr": "Plan du site",
    "es": "SITEMAP",
    "en": "SITEMAP"
  },
    "settings": [
    {
      "type": "checkbox",
      "id": "sitemap_products_enable",
      "label": {
        "fr": "Activer la liste des produits",
        "es": "Activer la liste des produits",
        "en": "Activate list of products"
      },
      "default" : true
    },
  {
      "type": "checkbox",
      "id": "sitemap_collections_enable",
      "label": {
        "fr": "Activer la liste des collections",
        "es": "Activer la liste des collections",
        "en": "Activate list of collections"
      },
      "default" : true
    },
    {
      "type": "checkbox",
      "id": "sitemap_blog_enable",
      "label": {
        "fr": "Activer la liste des blogs et articles",
        "es": "Activer la liste des blogs et articles",
        "en": "Activate list of blogs and articles"
      },
      "default" : true
    },
    {
      "type": "text",
      "id": "sitemap_blog_name",
      "label": "blog à lister",
      "info": "nom de votre blog dans l'url par defaut 'news' - si vous en avez plusieurs, séparez les par un ;",
      "default": "news"
    }
  ]
  }
{% endschema %}

Ajout de la page Plan du Site

Dans cette phase finale il ne nous reste plus qu’à créer une page ! Rendez-vous dans Boutique en ligne – Page – Créer une page et en bas à droite sélectionnez dans « Modèle », « Suffixe du modèle » notre « page.sitemap » et mettez le titre et le texte que vous voulez.

A ce stade rendez-vous dans la personnalisation de la page donc côté admin de shopify et éditez la page et vous verrez diverses options comme par exemple:

  • Activer la liste des produits
  • Activer la liste des collections
  • Activer la liste des blogs et articles
  • Noms des blogs à lister

Pas spécialement besoin de design pour cette page mais si vous voulez le faire je vous invite à regarder ma playlist qui vous apprendra à vous débrouiller seul et apprendre à maitriser un thème shopify 😉

Ce tutoriel existe aussi en vidéo

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 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.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 19 commentaires

  1. Emmanuel

    28 Oct 2020 Répondre

    Bonjour,
    Merci pour ce code !
    C’est vrai, il est toujours intéressant de pouvoir accéder à ce genre de possibilité.
    Je me demandais, pendant qu’on y est, si l’on pouvait également ajouter dans cette page tout ce qui se trouve dans le menu du pied de page. Par exemple les mentions légales…

    1. Dgeo Dev

      29 Oct 2020 Répondre

      Bonjour et merci pour le commentaire. Malheureusement shopify ne propose pas de possibilité en code de lister des pages, il faudra donc les rajouter en code manuellement dans la section en créant une autre colonne.

  2. Emmanuel

    30 Oct 2020 Répondre

    C’est une bonne idée, merci 😉

  3. Emilie

    2 Nov 2020 Répondre

    Bonjour,
    Merci pour ton travail de qualité.
    J’ai du mal à référencer mes images produits sur Google image. Pourtant j’imagine que les robots passent dessus via le sitemap de mon footer mais peut être pas…
    Est il possible d’optimiser en créant un sitemap image et si oui de quelle façon procéder?
    Merci d’avance.

    1. Dgeo Dev

      2 Nov 2020 Répondre

      Hello, oui google image passe sur les images en listant le alt donc la description de l’image. Non un sitemap sur les images n’est pas possible 🙂

  4. fabien

    2 Nov 2020 Répondre

    merci Dgeo,
    peut on utiliser le sitemap pour le référencement google,
    mais le cacher dans la page d’accueil

    1. Dgeo Dev

      2 Nov 2020 Répondre

      Hello, yes en le mettant dans le menu comme ca il aura directement à manger 😉

      1. fabien

        2 Nov 2020 Répondre

        yes merci dgeo, je te dirais jamais assez merci pour tout le contenu que tu donnes 🙂

  5. KEVIN

    2 Nov 2020 Répondre

    Bonjour j’ai effectué la même procédure mais il me dit qu’il y a une erreur Line 79 — Liquid syntax error: Unknown tag ‘schema’ {% schema %} j’ai collé juste après le page content comme vous l’avez marqué merci pour votre aide !

    1. Dgeo Dev

      3 Nov 2020 Répondre

      Hello, il manque surement un bout du code dans le copiez/collez 🙂 essayez de refaire le tuto du début en suivant bien les étapes 🙂

  6. Christophe

    7 Fév 2021 Répondre

    Bonjour,
    Super tuto comme tout vos tuto 🙂

    J’ai un soucis juste avec mon sitemap, tout mes liens sont afficher et surligner en noir et je voudrais pouvoir les retirer ?

    Merci à vous 😉

    1. Dgeo Dev

      8 Fév 2021 Répondre

      Hello et merci pour le message 😉 il suffit de rajouter dans la partie css ceci : .sitemap .grid-item ul a { text-decoration:none; }

  7. mickael

    16 Fév 2021 Répondre

    hello !

    ton tuto est super cela a fonctionné parfaitement j’ai mis la page dans le menu pour donner à manger à google.

    Cependant quelques jours plus tard je reçois une alerte de google pour un problème d’ergonomie mobile sur cette page avec pour raison : « éléments cliquables trop rapprochés » as-tu un codage ou une astuce pour y remédier ?

    Merci d’avance et continue comme ça !

    1. Dgeo Dev

      16 Fév 2021 Répondre

      Hello, dans ce cas il faut augmenter la taille font-size des liens à minimum 16px 😉 mais ca sera moche 😀 ps: cette alerte n’est pas grave du tout et n’a aucun impact sur le SEO 😉

  8. Alya

    11 Nov 2021 Répondre

    Bonjour merci pour le tuto
    J ai un problème avec la partie blog
    Ça ne fonctionne pas pour les blogs j ai essayé d’ajouter mes articles de blog manuellement et les séparer par ; mais les liens ne sont pas clicable
    Merci d avance

  9. Elodie

    27 Déc 2021 Répondre

    Bonjour Dgeo,
    La search console me dit que le format étant HTML, il préfère un .xml. Sais-tu comment je peux « réparer » cette erreur?
    Merci beaucoup pour tout le contenu que tu partages!

    1. Dgeo Dev

      29 Déc 2021 Répondre

      Bonsoir, ah non c’est pas un sitemap pour envoyer à google c’est juste pour l’internaute 🙂 le vrai sitemap sur shopify c’est rajouter à l’url de la boutique sitemap.xml comme par exemple ici : https://speedfly-theme.myshopify.com/sitemap.xml

  10. Pascal

    10 Fév 2022 Répondre

    Bonjour

    qu’en est il alors du sitemap.xml que google ne récupère qu’en partie il récupère l’index de sitemap mais juste les URL des collections soit 107 URL sur 2240 alors que ces URL sont visibles avec la commande site: nom du site et récupérés dans leur totalité par Bing ?

    Merci de votre aide car je vois que je ne suis pas le seul et Shopify reste absolument muet !!

    1. Dgeo Dev

      14 Fév 2022 Répondre

      Hello ce n’est pas un soucis de shopify mais de google lui même qui rend fou les référenceurs depuis des mois…

Laisser un commentaire

Fermer le menu
×
×

Panier