Make Shop module content dynamic

src/components/organisms/Shop.svelte

@@ -2,8 +2,9 @@
     import { getContext } from 'svelte'
     // Components
     import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
 
-    const { location } = getContext('global')
+    const { location, shop } = getContext('global')
 
     const locationsWithPoster = location
         .filter((loc: any) => loc.has_poster)
@@ -14,14 +15,16 @@
     <div class="content">
         <div class="shop__image">
             <img src="/images/poster-display.jpg" alt="">
+            <Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
         </div>
+
         <div class="shop__content">
-            <h3 class="title-medium">Browse our products</h3>
-            <p class="text-small">Discover our graphic posters and prints of your favouite locations.</p>
+            <h3 class="title-medium">{shop.module_title}</h3>
+            <p class="text-small">{shop.module_text}</p>
             <Button
-                class="button--pink"
-                text="Shop"
                 url="/shop"
+                text="Shop"
+                class="button--pink"
             />
             <p class="detail">
                 Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.

src/routes/__layout.svelte

@@ -78,9 +78,15 @@
                     limit_new
                     instagram
                     footer_links
+                    newsletter_subtitle
                     newsletter_url
                     newsletter_text
-                    newsletter_subtitle
+                }
+
+                shop {
+                    module_title
+                    module_text
+                    module_image { id title }
                 }
 
                 # Count