404 pagina maken in Lightspeed

Een veelgevraagde optie binnen Lightspeed is het opzetten van een eigen 404 pagina. Tegenwoordig zijn er een aantal thema’s die deze optie aanbieden, maar veel thema’s bieden deze optie nog niet aan.

404 Pagina voor SEO

Allereerst is het belangrijk om een veelgehoord misverstand te wereld uit te helpen: Elke Lightspeed webwinkel heeft een 404-status code wanneer er een niet-bestaande URL ingeladen wordt. Dit valt te testen met een Status Code tool, zoals httpstatus.io. Vul hier de (foute) URL in, en je zult zien dat er een 404-code meegegeven wordt. Wat SEO betreft, is er dus niets aan de hand, en voldoen de Lightspeed thema’s prima aan de voorwaarden.

404 Pagina voor gebruiksvriendelijkheid

Waar de Lightspeed 404-pagina’s echter niet aan voldoen is goede gebruiksvriendelijkheid. Je bezoekers worden simpelweg naar de homepage doorgestuurd, zonder dat er een melding komt dat de pagina niet bestaat. Idealiter wil je je bezoekers laten zien dat de pagina niet bestaat, met wellicht een zoekveld of een lijst met je meest populaire categorieën of producten.

Gelukkig is dit eenvoudig aan te maken. Wel is het belangrijk dat je enig verstand hebt van code. Daarnaast is het ook noodzakelijk om de Thema Editor in te schakelen, wat betekent dat je geen updates van je thema meer zult ontvangen.

Hoe maak ik een 404 pagina?

1. Open de Editor

Open de Lightspeed Admin en ga naar Design > Thema Editor. Kies hier nogmaals voor “Thema editor” en accepteer eventueel de melding dat je geen updates meer ontvangt.

2. Maak een Snippet aan

Klik op “Maak een nieuwe snippet” en noem deze 404. Kies voor “Opslaan”.

3. Bewerk de snippet.

Vul hier de tekst in die je wilt tonen op je 404 pagina. Je kunt het hier zo gek maken als je zelf wilt. Wil je enkel een simpele tekst plaatsen, of een hele layout? Aan jou de keuze.

4. Voeg de Snippet toe aan je bestanden.

Open de index.rain. Omdat de standaard 404-pagina altijd de index opent, is het voldoende om de code in je index.rain te plaatsen. Hierdoor zal automatisch ook de header en de footer getoond worden op je 404 pagina. Wil je dit niet? Dan kun je de code in de custom.rain en de fixed.rain plaatsen. De code bestaat uit twee delen.

Bovenin de index.rain, op regel 1 plaats je:

{% if page.status == '404' %}
   {% include 'snippets/404.rain' %}
{% else %}

Onderin de index.rain, op de allerlaatste regel plaats je:

{% endif %}

Indien je ervoor gekozen hebt om de code in de custom.rain en de fixed.rain te plaatsen, plaats dan deze code na de <body> openingstag en voor de </body> sluittag.

5. Test de pagina

Het testen van de 404 pagina is ontzettend eenvoudig. Ga naar je website, en type er iets willekeurigs achter. Maakt niet uit wat, zolang de pagina maar niet bestaat.

Vond je dit interessant, en wil je meer weten? Neem dan gerust contact met mij op!

✉️ Neem contact op