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 1 votes]

Cet article a 10 commentaires

  1. 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. 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. C’est une bonne idée, merci 😉

  3. 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. 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. merci Dgeo,
    peut on utiliser le sitemap pour le référencement google,
    mais le cacher dans la page d’accueil

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

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

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

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

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

S'abonner à la chaine