▷ PAGE 404 SHOPIFY

Personnaliser page 404 Shopify

Dans cet article, je vais vous expliquer comment modifier et personnaliser la page d'erreur 404 de Shopify pour obtenir plus de ventes.

Erreur 404 - Explications

Lorsque vous naviguez sur Internet, il arrive que l'un des messages suivants apparaisse :

  1. Page non trouvée

  2. Erreur 404

  3. 404 file not found

  4. 404 page not found

  5. The requested URL was not found in this serveur

  6. 404 fichier introuvable

  7. HTTP 404

  8. HTTP 404 Not Found

  9. 404 File or Directory Not Found

Ce message indique une erreur qui est renvoyée par votre site internet et quel que soit le CMS (Content Management System : Système de gestion de contenu) que vous utilisiez : Shopify, Wordpress, etc...

Cela signifie que la page demandée lors de la saisie des mots clés est introuvable, et donc qu’elle n’existe pas.

Il est également possible que la page de votre site web ait été censurée par les moteurs de recherche ou que les résultats de la recherche montrent une page que vous avez supprimée ou renommée dans votre boutique et qui est toujours indexée.

Cette page web en erreur ne peut pas être explorée, ou n’a tout simplement pas été indexée par les moteurs de recherche.

Par conséquent votre nombre de visites risque de diminuer fortement.

Si vous avez sur votre boutique Shopify une erreur 404, il est impératif de corriger cette erreur car Google va retarder l'exploration de votre site ainsi que sont classement (popularité) car cette erreur va influencer les fichiers Sitemap et Robots.txt, Balises, Tags, Mot-clés, etc... et les liens internes (maillage).

Cette correction peut être effectuée par votre Webmaster ou avec la procédure ci-dessous par vous-même.

Que signifie le chiffre 404 ?

  • Le premier 4 indique une mauvaise adresse URL

  • Le dernier 4 signale le problème d’accès à l’adresse URL recherchée

Origine de cette erreur

Que ce soit par une erreur involontaire lors de la modification de l’URL de l'une des pages de votre site ou par des liens rompus sur votre site web, il est inévitable que les visiteurs de votre boutique arrivent parfois sur des pages d'erreur 404. En fait votre page est toujours indexer par Google, Bing, Yahoo, etc...

Chaque page liée à votre nom de domaine et étant indexée par google (crawl) doit faire l'objet d'une attention particulière. L'URL ne doit pas être modifiée à la légère, elle doit soit être désindexée sur les moteurs de recherche, soit redirigée vers une autre page. La redirection de la page est l'option la plus courante.

Ce sera le sujet de ma prochaine formation sur la gestion des redirections d'URL dans Shopify.

Si le fait de voir une page 404 n'est pas une action habituelle, cela ne signifie pas pour autant que le résultat final doit être un client perdu. C'est ce que l'on appelle l'expérience utilisateur.

Cette page est l'occasion de promouvoir votre site avec un message positif. Vous pouvez par exemple faire preuve d’humour afin de motiver l’internaute pour qu’il reste sur votre site et surtout ait envie d’aller plus loin.

Vous devez tenir compte de cette page sur votre site Shopify.

Inclure une page d'erreur 404 agréable, adaptée à vos produits et efficace pour motiver vos clients à aller plus loin et continuer leur visite sur votre site.

En associant des appels à l'action (CTA), des zones de recherche et des images créatives et amusantes, vous pouvez créer des pages 404 efficaces et transformer une mauvaise expérience en événement positif.

Les meilleures pratiques pour "404 page"

Une bonne page 404 doit :

  1. indiquer qu'une erreur s'est produite

  2. permettre une navigation claire vers une page plus appropriée

  3. être cohérente avec votre marque

Cela à également un impact en termes de référencement naturel SEO, puisqu'une page bien conçue, avec des liens utiles, réduira le taux de rebond de votre boutique, et la mise en place d'un argumentaire positif ou drôle peut augmenter le temps passé sur votre site.

Pour votre information, sachez que le taux de rebond (Bounce Rate) est le taux de visiteurs qui quittent votre boutique sans avoir navigué sur d'autres pages. Il est donc nécessaire de veiller à ce que ce taux soit le plus bas possible.

Le service d'assistance de Google donne des conseils très éclairants pour optimiser les pages 404. Les informations se trouve sur cette page :

https://developers.google.com/search/docs/advanced/crawling/custom-404-pages?hl=fr

Même avec un modèle 404 personnalisé, il est toujours important de vérifier si les liens d'un site ne sont pas rompus, afin de minimiser le risque que les clients soient mal dirigés.

Comment détecter les erreurs 404 ?

Pour corriger les erreurs 404, vous devez tout d'abord savoir où elles se trouvent !

Si vous disposez d'un compte Google Search Console, vous pouvez commencer à utiliser cet outil gratuit dont je vous ai mis le lien ci-dessous :

Modif 404 shopify francais

Allez sur la zone "Index" sur la gauche, sélectionnez "Couverture", puis sur la zone inférieur droite, consultez la zone "Détails".

Si vous avez des pages en erreur 404, elle apparaîtront ici.

Voici quelques outils pour tester vos pages dans le but d'identifier et de corriger rapidement cette erreur 404 sur votre shop :

Une pratique ignorée

La création d’une page 404 performante est une pratique ignorée par la majorité des utilisateurs de Shopify, ce qui induit une perte de clients.

Bien au contraire, vous devez optimiser cette page pour présenter vos produits et services sous leurs meilleurs jour possible, tout en renvoyant les visiteurs vers votre page principal afin d'obtenir plus de clients.

Exemple d'une page 404 attrayante

Voici quelques exemples de pages d'erreur 404 bien conçues, qui pourront vous inspirer pour optimiser votre propre page :

Humoristique

Comme sur le site de VMA Self Défense Online

404 error shopify

ou de l'éducation nationale

Shopify 404

Informatif

Site d'information du gouvernement français

Shopify 404 page

Simpliste

Voici un exemple avec la page de google

Test-url-404

Comment personnaliser votre page Shopify - Erreur 404 page ?

Lorsque vous consultez la page 404 par défaut de votre thème, vous remarquerez qu'elle est très simpliste et n'encourage pas l'internaute à poursuivre sa visite ! 

404-liquid

Réfléchissez d’abord à la manière dont vous voulez personnaliser votre page d’erreur afin d'augmenter vos ventes, ou de récupérer les E-mails de vos clients.

Il est important de savoir quel est votre objectif lorsque un client arrivera sur cette page :

  • Faire une offre commerciale

  • Récupérer un email

  • Transférer sur votre page d’accueil

  • Un appel téléphonique

  • Un lien vers un autre site

  • Télécharger un E-book gratuit

  • Télécharger une formation gratuite

Exemple d'utilisation d'un CTA sur la page 404

Si je prends l’exemple d’un bouton d'appel à l’action, cela pourrait rediriger votre clients vers :

  1. une collection spécifique

  2. un produit spécifique

  3. une zone de recherche

Cela permettra à vos clients de trouver facilement le contenu qu’il recherche.

Cette page 404 est une chance pour vous de communiquer avec eux, et pourquoi pas d’ajouter une note d’humour comme je l’ai fait sur le site de SEO 5 EUROS.

Dans mon cas, j'ai opté pour une note d'humour afin que l'internaute poursuive sa visite sur mon site. De cette façon, je réduirai le taux de rebond sur mon site, ce qui sera un signe positif pour Google.

Ainsi, en créant une page efficace,  vous redirigerez les visiteurs vers un contenu de valeur.

Vidéo de Formation sur la personnalisation de la page 404

Formation sur la personnalisation et l'optimisation de la page d'erreur 404 Shopify

Vous avez besoin d'aide !

Je peux vous accompagner dans votre projet avec mes prestations de service individuelle et personnalisé.

Le fonctionnement de shopify de l'inscription à la vente des produits !

Sauvegarde du thème avant modification de la page 404

  • Pourquoi faire une sauvegarde du Thème

Lorsque vous modifier le code de votre site Shopify, vous pouvez faire des erreurs. Celles-ci peuvent entraîner des messages d'erreur susceptibles de perturber gravement le fonctionnement et le temps d'accès de votre boutique.

Si ce type de problème survient, une sauvegarde préalable de votre thème va vous permettre de revenir à l'état initial pour supprimer les modifications que vous avez apportées et donc corriger vos messages d'erreur.

Veuillez noter que lorsque vous installez une application sur votre plateforme Shopify, l'application changera les codes de votre thème, et lorsqu'elle est supprimée, certains codes seront toujours présents. Dans ce même cas, la sauvegarde vous permettra de revenir à l'état initial.

Il est donc préférable de sauvegarder votre thème avant de modifier le code de celui-ci ou d'installer une nouvelle application.

De cette façon, vous n'aurez pas de code parasite sur votre thème, ce qui peut à longue ralentir les temps d'accès à votre site, voire générer des erreurs après la désinstallation de l'application.

  • Comment faire une sauvegarde du thème

Avant de commencer à personnaliser votre thème, je vous recommande d'en faire une copie de sauvegarde. Sur Shopify le terme utilisé est "dupliquer".

La procédure est simple et rapide, il suffit de cliquer sur l'image ci-dessous pour la suivre étape par étape sur ma vidéo de formation :

Comment personnaliser la page 404

Vous pouvez effectuer un maximum de 20 sauvegardes.

Si vous souhaitez en faire une autre, vous devrez supprimer une de vos sauvegardes existantes.

La page 404 par défaut

Par défaut, le fichier de mise en page theme.liquid est appliqué au fichier modèle 404.liquid, mais cela peut être facilement modifié.

Voici le template par défaut de la page 404.liquid :

<div class=“page-width">
<div class="empty-page-content text-center">
<h1>{{ 'general.404.title' | t }}</h1>
<p>{{ 'general.404.subtext' | t }}</p>
<p>
<a href="/" class="btn btn--has-icon-after">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
</p>
</div>
</div>

Suppression des marges de haut et bas de page

Avant modification

<div class="empty-page-content text-center">

Après modification

<!--  <div class="empty-page-content text-center"> -->

Comment centrer tous les éléments de la page

Avant modification

<div class="empty-page-content text-center">

Après modification

<div style="text-align: center;">

Ne pas oublier d'ajouter </div> à la fin du bloc concernée.

Comment insérer une image

<img src="URL DE VOTRE IMAGE" alt="BALISE POUR LE RÉFÉRENCEMENT SUR GOOGLE IMAGE" style="float: none;" />

Comment insérer une image avec un lien hypertexte

<a href="URL DE DESTINATION" title="INFO BULLE DE VOTRE IMAGE"><img src="URL DE VOTRE IMAGE" alt="BALISE POUR LE RÉFÉRENCEMENT SUR GOOGLE IMAGE" style="float: none;" /></a>

Comment insérer une ligne d'espace

<br>  à la suite d'une zone texte

<br><br>  à la suite d'une zone image

Comment insérer la barre de recherche Shopify

Une barre de recherche pour une fuite rapide est l'une des caractéristiques les plus courantes et les plus efficaces d'une page 404. Pour inclure une barre de recherche dans la page 404 de votre client, vous pouvez créer un formulaire HTML dont l'attribut action est défini sur /search. Dans ce formulaire, il faut inclure une entrée de type texte avec un attribut name défini à q.

<form class="search" action="/search">

<input type="text" placeholder="LIBELLÉ DE LA ZONE DE RECHERCHE" name="q" value="{{ search.terms | escape }}"  />

<input type="submit" value="LIBELLÉ DU BOUTON " />

</form>

Comment ajouter une zone de texte

<p>VOTRE TEXTE</p>

<h1>VOTRE TEXTE</h1>

Idem pour les balises h2 à h6

<div>VOTRE TEXTE</div>

Comment ajouter une zone de texte avec lien hypertexte

<a href="URL DE DESTINATION" title="INFO BULLE DE VOTRE LIEN"><p> VOTRE TEXTE</p></a>

Comment mettre tous les textes de votre page avec la même taille

À saisir au début de votre page de code

<div style="text-align: center; font-size: 18pt;">

À saisir en fin de votre page de code

</div>

Comment modifier le texte par défaut

Comment mettre le texte en gras, italique ou souligné

<!--  Insertion de texte en gras--> 

<p><strong>François LAJOIE</strong></p>

 

<!--  Insertion de texte italique--> 

<p><em>Fondateur de SEO 5 EUROS</em></p>

 

<!--  Insertion de texte souligné--> 

<p style="text-decoration: underline;">Fondateur de SEO 5 EUROS</p>

Comment mettre une taille de caractère spécifique sur du texte

Voici un exemple avec une taille de 16pt

<h2 style="font-size: 16pt;">VOTRE TEXTE ICI</h2>

Ajouter une section d'appel à l'action

Si vous souhaitez diriger votre visiteur vers une page ou une collection spécifique lorsqu'il arrive sur une page d'erreur 404, je vous conseille d'utiliser un bouton d'appel à l'action personnalisé.

Vous allez ajouter un section dite "statique" sur votre page qui permettra au visiteur d'accéder à un lien spécifique.

Ce bouton "CTA" est fortement recommandé car les liens hypertextes sur une phrase ou moins mots sont de moins en moins utilisés par les internautes. 

Vous devez d'abord pour créer ce bouton d'appel à l'action commencer par créer un nouveau fichier Liquid vide dans le dossier "Sections" de votre thème.

Vous pouvez par exemple appeler ce lien 404-CTA.liquid. Le radical est 404, car nous travaillons sur la page 404 et il sera plus facile de le retrouver en cas de modification.

Commencez par supprimer les anciens codes, puis il ajoutez simplement le code suivant :

<div id="section-cta">
<a href="{{ section.settings.link }}" class="btn btn--has-icon-after" id="btn-404">{{ section.settings.linktext }}{% include 'icon-arrow-right' %}</a>
</div>

{% schema %}
{
"name": "Call to action Ebook SEO",
"settings": [
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": " JE VEUX VOTRE EBOOK SEO GRATUIT"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

Il vous suffit maintenant de personnaliser les textes en rouge.

Ensuite, vous devrez inclure cette nouvelle section dans votre fichier modèle 404.liquid, à l'endroit où vous souhaitez que le bouton d'appel à l'action apparaisse.

Vous devrez utiliser un tag du thème Liquid pour inclure cette section :

{% section "404-CTA.liquid" %}

Veillez surtout à saisir le même nom que le fichier .liquid que vous avez créé.

Ensuite, vous ouvrez Boutique en ligne, Personnaliser et vous sélectionnez la page 404, vous verrez une zone pour le lien du bouton et une zone pour la modification du libellé du bouton.

Il ne vous reste plus qu'à tester votre bouton CTA.

Résultat final

Résultat final sur la page d'erreur 404 du site de SEO 5 EUROS :

404 page template shopify 404 shopify template erreur 404 shopify Modifier page 404 shopify Personnaliser page 404 Shopify

Page de code dans "Templates" "404.liquid" associée à cette page :

<div class="page-width">
<div style="text-align: center; font-size: 18pt;">

<!-- <div class="empty-page-content text-center">-->

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/Erreur-404.png?v=1606816781" alt="Oups !" style="float: none;" />

<br><br>

<h1>{{ 'general.404.title' | t }}</h1>

{{ 'general.404.subtext' | t }}

<br><br>

<p><strong>Mais avant d'aller plus loin, je vous propose de télécharger mes guides gratuits !</strong></p>

<p >J'ai créé ces deux guides pour tous ceux qui souhaitent optimiser leur <strong>site E-Commerce Shopify</strong> et leur <strong>Chaîne YouTube</strong> par la mise en œuvre d'une stratégie de référencement naturel (SEO) et de techniques marketing efficaces.</p>

<a href="https://seo5euros.fr/pages/telechargez-vos-guides-gratuits" title="Téléchargez vos Ebook Gratuits"><img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/ebook-youtube-pdf-2020.png?v=1606639414" alt="Ebooks SEO SHOPIFY & YOUTUBE" style="float: none;" /></a>

<br /><br>

<p>Pour télécharger votre <strong>Guide du référencement naturel SEO SHOPIFY</strong>, cliquez sur le lien ci-dessous :</p>

{% section "404-CTA-EBOOKSEO" %}

<br>

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/guide-seo-2020.png?v=1606633121" alt="Guide SEO Shopify 2020" style="float: none;" />

<p>et votre <strong>Guide Youtube</strong>, cliquez sur le lien ci-dessous :</p>

{% section "404-CTA-EBOOKYT" %}

<br>

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/Livre-youtube-pdf-2020.png?v=1606632912" alt="Guide YouTube PDF 2020" style="float: none;" />

<br /><br>

<p>Vous pouvez même si vous le souhaitez télécharger les deux !</p>
<p>Bonne lecture, à tout de suite...</p>

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/Francois-seo-5-euros.png?v=1606465941" alt="François SEO 5 EUROS" />

<p><strong>François LAJOIE</strong></p>
<p><em><strong>Fondateur de SEO 5 EUROS</strong></em></p>

<br />

<p style="font-size: 14pt;"><strong><span style="text-decoration: underline;">PS :</span> </strong>Autre chose, vous voulez voir des vidéos de formations sur YouTube...</p>
<p style="font-size: 14pt;">Alors abonnez-vous à ma chaîne YouTube, <strong><a href="https://www.youtube.com/seo5euros/?sub_confirmation=1" title="GO, Je m'abonne..." style="color: #ff2a00;">en cliquant ICI ou sur le lien ci-dessous</a>.</strong></p>

<a href="https://www.youtube.com/seo5euros/?sub_confirmation=1" title="GO, Je m'abonne..."><img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/seo-5euros-chaine-youtube.png?v=1597025257" alt="SHOPIFY SEO APP" style="float: none;" /></a>

<br><br>

<a href="{{ routes.root_url }}" class="btn btn--has-icon-after">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>

</p>

</div>
</div>

Page de code dans "Sections" "404-CTA-EBOOKSEO.liquid" associée à cette page :

<div id="section-cta">
<a href="{{ section.settings.link }}" class="btn btn--has-icon-after" id="btn-404">{{ section.settings.linktext }}{% include 'icon-arrow-right' %}</a>
</div>

{% schema %}
{
"name": "Call to action Ebook SEO",
"settings": [
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "JE VEUX VOTRE EBOOK SEO GRATUIT"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Conclusion

Ce ne sont là que quelques-unes des façons dont vous pouvez améliorer la page d'erreur 404 standard de Shopify et je vous encourage à concevoir vos pages en fonction des caractéristiques uniques de vos clients.

Les clients apprécieront le fait que vos produits ou services se distinguent à chaque étape du processus.

Il ne faut pas négliger cette page d'erreur. 

Cet article vous a plu ?

Alors postez un commentaire et venez me rejoindre sur ma chaîne YouTube. Je poste régulièrement des astuces et tutoriels pour Shopify, Youtube et le E-Commerce.

À tout de suite,

Vendre ebook shopify 2020

François de l'équipe SEO 5 EUROS

https://seo5euros.fr

Facebook SEO5EUROS

Instagram SEO5EUROS

👋 Guide YOUTUBE

🔎 Guide Référencement Naturel SEO


PS : Vous voulez plus de vidéos, abonnez-vous à notre chaîne YouTube en cliquant ICI

 

Coaching Shopify

 

 

ARTICLES SHOPIFY POPULAIRES

2 commentaires

  • Je cherchais à modifier cette page depuis des jours. Super cool votre tutoriel. Merci

    Pauly
  • Un peu compliqué, mais j’ai réussi la modification grâce à votre tutoriel. Trop contente du résultat 🤩

    Karine

LAISSEZ-MOI VOTRE COMMENTAIRE (Votre adresse de messagerie ne sera pas publiée)

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés

Liquid error: Could not find asset snippets/gtranslate.liquid