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 %}
{% 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 😉
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.
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…
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.
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.
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 !
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 ?
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 😉
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
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!
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
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 !!
Hello, c’est un peu technique mais il faudrait faire une condition sur le blog_handle; au besoin nous contact ici : https://speed-ecom.eu/contact pour voir ce qu’on peut faire 😉
Emmanuel
28 Oct 2020Bonjour,
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…
Dgeo Dev
29 Oct 2020Bonjour 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.
Emmanuel
30 Oct 2020C’est une bonne idée, merci 😉
Emilie
2 Nov 2020Bonjour,
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.
Dgeo Dev
2 Nov 2020Hello, 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 🙂
fabien
2 Nov 2020merci Dgeo,
peut on utiliser le sitemap pour le référencement google,
mais le cacher dans la page d’accueil
Dgeo Dev
2 Nov 2020Hello, yes en le mettant dans le menu comme ca il aura directement à manger 😉
fabien
2 Nov 2020yes merci dgeo, je te dirais jamais assez merci pour tout le contenu que tu donnes 🙂
KEVIN
2 Nov 2020Bonjour 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 !
Dgeo Dev
3 Nov 2020Hello, il manque surement un bout du code dans le copiez/collez 🙂 essayez de refaire le tuto du début en suivant bien les étapes 🙂
Christophe
7 Fév 2021Bonjour,
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 😉
Dgeo Dev
8 Fév 2021Hello et merci pour le message 😉 il suffit de rajouter dans la partie css ceci : .sitemap .grid-item ul a { text-decoration:none; }
mickael
16 Fév 2021hello !
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 !
Dgeo Dev
16 Fév 2021Hello, 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 😉
Alya
11 Nov 2021Bonjour 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
Elodie
27 Déc 2021Bonjour 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!
Dgeo Dev
29 Déc 2021Bonsoir, 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
Pascal
10 Fév 2022Bonjour
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 !!
Dgeo Dev
14 Fév 2022Hello ce n’est pas un soucis de shopify mais de google lui même qui rend fou les référenceurs depuis des mois…
RAVIER
18 Sep 2024Bonjour,
Comment puis je faire pour enlever le nom du blog à lister sur la page ?
Merci
Dgeo Dev
27 Sep 2024Hello, c’est un peu technique mais il faudrait faire une condition sur le blog_handle; au besoin nous contact ici : https://speed-ecom.eu/contact pour voir ce qu’on peut faire 😉