Aller au contenu

404

Personnalisez votre page 404 pour qu’un message de page introuvable soit clair, soigné et conforme à votre marque.

Cette section contrôle la présentation de votre page 404. Le contenu du message est géré dans l’éditeur de contenu par défaut de votre thème, tandis que les paramètres ici vous permettent de façonner le style visuel et la mise en page de la page. Pour la configuration et la navigation dans l’éditeur, voir documentation Shopify sur l’éditeur de thème

Utilisez l’éditeur de contenu par défaut de votre thème pour modifier le message d’introuvable lui-même. Cette section est surtout utile pour ajuster l’apparence de ce message sur la page, notamment ses couleurs, son espacement et la mise en page qui l’entoure.

Ces paramètres remplacent les couleurs générales de votre thème pour cette section uniquement. Ils sont utiles lorsque votre page 404 a besoin d’un contraste plus marqué, d’un ton plus doux ou d’un aspect plus distinct sans modifier le reste du site.

Ajustez ensemble les couleurs du texte et du sous-titre, surtout si vous ajoutez un arrière-plan personnalisé. Si la section utilise un arrière-plan plus sombre ou plus détaillé, revérifiez les deux couleurs pour conserver un message lisible en un coup d’œil.

Vérifiez le contraste après avoir modifié les styles du texte et de l’arrière-plan. Une page 404 est souvent presque entièrement textuelle, donc un faible contraste peut rapidement la rendre plus difficile à utiliser.

Paramètres d’espacement contrôlent l’espace au-dessus et en dessous du contenu 404 sur ordinateur et sur mobile. Sur une page courte comme celle-ci, l’espacement influence fortement l’équilibre ou la sensation d’espace vide du layout.

Utilisez un espacement mobile plus réduit si la page semble trop haute sur téléphone. Augmentez l’espacement sur ordinateur lorsque le contenu paraît serré ou trop proche des éléments de page voisins.

Paramètres d’arrière-plan de section vous permettent d’ajouter une couleur, un dégradé, une image ou une vidéo derrière le message d’introuvable. Les paramètres d’overlay aident à conserver la lisibilité du contenu lorsque vous utilisez un média d’arrière-plan.

Les dégradés remplacent les couleurs unies, et les dégradés d’overlay remplacent les couleurs d’overlay. Les valeurs vides ou transparentes conservent généralement le style de repli de la section, tandis que des couleurs, dégradés ou médias explicites rendent la zone 404 plus indépendante visuellement du reste de la page.

Si vous utilisez une image ou une vidéo, gardez-la discrète afin que la page reste un message utile plutôt qu’un élément visuel. Le média peut aussi affecter le recadrage, le chargement, le repli et la lisibilité, surtout lorsque les médias de bureau et de mobile sont configurés séparément.

Paramètres de séparateur ajoutent une ligne en haut ou en bas de la section. Cela peut aider la page 404 à paraître plus volontairement encadrée, surtout lorsqu’elle s’inscrit dans une mise en page plus large.

Si vous laissez la couleur du séparateur transparente, la section utilise la couleur de bordure de votre thème. Dans la plupart des cas, un séparateur discret fonctionne mieux qu’un séparateur marqué.

Paramètres de largeur contrôlent la largeur de la zone de contenu et du conteneur externe de la section. C’est particulièrement utile pour garder un texte court facile à lire ou pour laisser plus d’espace aux traitements d’arrière-plan.

Pour la plupart des pages 404, une largeur de contenu modérée est plus lisible qu’un layout très large. Si vous modifiez la largeur de la section tout en utilisant un arrière-plan, prévisualisez le résultat dans la vue en ligne de la boutique en ligne, car les aperçus de l’éditeur peuvent rendre les changements de largeur moins précis.

  1. Stylisez le message et le visuel ensemble. Mettez à jour le texte 404 par défaut ainsi que le design de la section pour que la page paraisse intentionnelle, et non comme une solution de repli.
    1. Gardez un texte clair et direct.
    2. Assurez-vous que le traitement visuel soutient le même ton.
  2. Gardez un texte facile à parcourir. Choisissez des combinaisons de couleurs et des largeurs qui rendent le message lisible rapidement sur ordinateur comme sur mobile.
  3. Utilisez les arrière-plans avec retenue. Des choix subtils de couleur, de dégradé, d’image ou de vidéo soutiennent mieux le message que des visuels trop accrocheurs.
  4. Équilibrez l’espacement. Ajustez l’espacement selon la quantité de contenu affichée afin que la page paraisse soignée plutôt que vide ou trop serrée.
  5. Prévisualisez sur de vrais écrans. Vérifiez le résultat final sur la boutique en ligne, surtout après avoir modifié la largeur, le média d’arrière-plan ou l’espacement mobile.
  6. Vérifiez les deux tailles de zone d’affichage. Les contrôles de bureau et de mobile peuvent produire des comportements différents en matière d’alignement, de visibilité et de média ; vérifiez donc la page 404 sur les deux tailles avant publication.