Enhance 404 Page

locales/de.json

@@ -6,7 +6,8 @@
     },
     "404": {
       "title": "404 Seite nicht gefunden",
-      "subtext_html": "Die von Ihnen angeforderte Seite existiert nicht. Klicken Sie <a href=\"/collections/all\">hier</a>, um den Einkauf fortzusetzen."
+      "subtext_html": "Die von angeforderte Seite existiert nicht.",
+      "continue_html": "Einkauf fortfahren"
     },
     "breadcrumbs": {
       "home": "Startseite",

locales/en.default.json

@@ -6,7 +6,8 @@
     },
     "404": {
       "title": "404 Page Not Found",
-      "subtext_html": "The page you requested does not exist. Click <a href=\"/collections/all\">here</a> to continue shopping."
+      "subtext_html": "The page requested could not be found.",
+      "continue_html": "Continue Shopping"
     },
     "breadcrumbs": {
       "home": "Home",

locales/es.json

@@ -6,7 +6,8 @@
     },
     "404": {
       "title": "404 Página no encontrada",
-      "subtext_html": "La página que ha solicitado no existe. Haga clic <a href=\"/collections/all\">aquí</a> para continuar la compra."
+      "subtext_html": "La página solicitado no existe.",
+      "continue_html": "Continuar Compras"
     },
     "breadcrumbs": {
       "home": "Inicio",

locales/fr.json

@@ -6,7 +6,8 @@
     },
     "404": {
       "title": "404 - Page non trouvée",
-      "subtext_html": "Cette page n'est pas disponible. <a href=\"/collections/all\">Retourner au magasinage</a>"
+      "subtext_html": "Cette page n'est pas disponible.",
+      "continue_html": "Continuer achats"
     },
     "breadcrumbs": {
       "home": "Accueil",

locales/pt-BR.json

@@ -6,7 +6,8 @@
     },
     "404": {
       "title": "404 Página não encontrada",
-      "subtext_html": "A página que você solicitou não existe. Clique <a href=\"/collections/all\">aqui</a> para voltar às compras."
+      "subtext_html": "A página solicitou não existe.",
+      "continue_html": "Continuar compras"
     },
     "breadcrumbs": {
       "home": "Início",

locales/pt-PT.json

@@ -6,7 +6,8 @@
     },
     "404": {
       "title": "404 Página Não Encontrada",
-      "subtext_html": "A página que solicitou não existe. Clique <a href=\"/collections/all\">aqui</a> para continuar as suas compras."
+      "subtext_html": "A página não existe.",
+      "continue_html": "Continuar compras"
     },
     "breadcrumbs": {
       "home": "Início",

templates/404.liquid

@@ -1,3 +1,52 @@
 <!-- /templates/404.liquid -->
-<h1>{{ 'general.404.title' | t }}</h1>
-<p>{{ 'general.404.subtext_html' | t }}</p>
+<div class="grid">
+  <div class="grid__item large--two-thirds push--large--one-sixth">
+
+    <h1>{{ 'general.404.title' | t }}</h1>
+	<p>{{ 'general.404.subtext_html' | t }}</p>
+    <a href="{{ shop.url }}/collections/all" class="btn">{{ 'general.404.continue_html' | t }}</a>
+
+    <hr>
+
+    <h2>{{ 'homepage.sections.news_title' | t }}</h2>
+    <div class="grid">
+      {% for article in blogs['news'].articles limit:3 %}
+      <div class="grid__item large--one-third">
+
+        <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>
+        <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+
+        {% comment %}
+        Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
+        Since this is just a listing page, you can either use the excerpt or truncate the full article.
+        {% endcomment %}
+        <div class="rte">
+          {% if article.excerpt.size > 0 %}
+          {{ article.excerpt }}
+          {% else %}
+          <p>{{ article.content | strip_html | truncatewords: 20 }}</p>
+          {% endif %}
+        </div>
+
+        {% comment %}
+        Show off meta information like number of comments and tags.
+        {% endcomment %}
+        <ul>
+          {% if blog.comments_enabled? %}
+          <li>
+            <a href="{{ article.url }}#comments">
+              {{ article.comments_count }}
+              {{ 'blogs.comments.with_count' | t: count: article.comments_count }}
+            </a>
+          </li>
+          {% endif %}
+        </ul>
+
+        <p><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} &rarr;</a></p>
+
+      </div>
+      {% endfor %}
+      </div>
+
+  </div>  
+</div>