Use layout groups

src/routes/(shop)/shop/+error.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    import { page } from '$app/stores'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid.svelte'
+
+    const { posters }: any = getContext('shop')
+    const errors = {
+        404: {
+            title: 'Product not found',
+            message: 'The product you are looking for does not exist… yet!',
+        },
+        500: {
+            title: 'Server error',
+            message: "That is embarassing, the problem is on our side.",
+        },
+    }
+</script>
+
+<Metas
+    title="{errors[$page.status].title} – Houses Of"
+/>
+
+
+<PageTransition>
+    <main class="shop-page">
+        <ShopHeader />
+
+        <section class="shop-page__error">
+            <div class="container grid">
+                <div class="inner">
+                    <h2 class="title-big">Uh oh!</h2>
+                    <p class="text-medium">{errors[$page.status].message}</p>
+                </div>
+            </div>
+        </section>
+
+        <PostersGrid {posters} />
+    </main>
+</PageTransition>