refactor: consolidate shop and preview page templates

- Create shared PageTemplates module in components/page_templates/
- Shop LiveViews now use explicit render/1 calling shared templates
- Theme preview now uses preview_page/1 component calling shared templates
- Delete duplicate preview_pages directory and shop_live/*.html.heex
- Single source of truth: mode param controls shop vs preview behavior

Templates: home, about, contact, collection, pdp, cart, error

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/page_templates.ex

@@ -0,0 +1,21 @@
+defmodule SimpleshopThemeWeb.PageTemplates do
+  @moduledoc """
+  Shared page templates used by both the public shop and theme preview.
+
+  These templates accept a `mode` parameter to control navigation behavior:
+  - `:shop` - Links navigate normally (real shop pages)
+  - `:preview` - Links send events to parent LiveView (theme editor)
+
+  All templates expect these common assigns:
+  - `theme_settings` - Current theme configuration
+  - `logo_image` - Logo image struct or nil
+  - `header_image` - Header image struct or nil
+  - `mode` - `:shop` or `:preview`
+  - `cart_items` - List of cart items (can be empty)
+  - `cart_count` - Number of items in cart
+  """
+  use Phoenix.Component
+  import SimpleshopThemeWeb.ShopComponents
+
+  embed_templates "page_templates/*"
+end

lib/simpleshop_theme_web/components/page_templates/about.html.heex

@@ -5,7 +5,7 @@
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={:shop} cart_count={0} />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={@mode} cart_count={@cart_count} />
 
   <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
     <.hero_section
@@ -19,9 +19,9 @@
     </.content_body>
   </main>
 
-  <.shop_footer theme_settings={@theme_settings} mode={:shop} />
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
 
-  <.cart_drawer cart_items={[]} subtotal="£0.00" mode={:shop} />
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

lib/simpleshop_theme_web/components/page_templates/cart.html.heex

@@ -0,0 +1,19 @@
+<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <.skip_link />
+
+  <%= if @theme_settings.announcement_bar do %>
+    <.announcement_bar theme_settings={@theme_settings} />
+  <% end %>
+
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="cart" mode={@mode} cart_count={@cart_count} />
+
+  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <.page_title text="Your basket" />
+    <.cart_layout items={@cart_page_items} subtotal={@cart_page_subtotal} mode={@mode} />
+  </main>
+
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
+
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
+  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+</div>

lib/simpleshop_theme_web/components/page_templates/collection.html.heex

@@ -5,7 +5,7 @@
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={:shop} cart_count={0} />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={@mode} cart_count={@cart_count} />
 
   <main id="main-content">
     <.collection_header title="All Products" product_count={length(@preview_data.products)} />
@@ -18,7 +18,7 @@
           <.product_card
             product={product}
             theme_settings={@theme_settings}
-            mode={:shop}
+            mode={@mode}
             variant={:default}
             show_category={true}
           />
@@ -27,9 +27,9 @@
     </div>
   </main>
 
-  <.shop_footer theme_settings={@theme_settings} mode={:shop} />
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
 
-  <.cart_drawer cart_items={[]} subtotal="£0.00" mode={:shop} />
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

lib/simpleshop_theme_web/components/page_templates/contact.html.heex

@@ -5,7 +5,7 @@
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={:shop} cart_count={0} />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={@mode} cart_count={@cart_count} />
 
   <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <.hero_section
@@ -33,9 +33,9 @@
     </div>
   </main>
 
-  <.shop_footer theme_settings={@theme_settings} mode={:shop} />
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
 
-  <.cart_drawer cart_items={[]} subtotal="£0.00" mode={:shop} />
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

lib/simpleshop_theme_web/components/page_templates/error.html.heex

@@ -0,0 +1,42 @@
+<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <.skip_link />
+
+  <%= if @theme_settings.announcement_bar do %>
+    <.announcement_bar theme_settings={@theme_settings} />
+  <% end %>
+
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" mode={@mode} cart_count={@cart_count} />
+
+  <main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
+    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <.hero_section
+        variant={:error}
+        pre_title={@error_code}
+        title={@error_title}
+        description={@error_description}
+        cta_text="Go to Homepage"
+        cta_page="home"
+        secondary_cta_text="Browse Products"
+        secondary_cta_page="collection"
+        mode={@mode}
+      />
+
+      <.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto">
+        <%= for product <- Enum.take(@preview_data.products, 4) do %>
+          <.product_card
+            product={product}
+            theme_settings={@theme_settings}
+            mode={@mode}
+            variant={:minimal}
+          />
+        <% end %>
+      </.product_grid>
+    </div>
+  </main>
+
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
+
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
+
+  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+</div>

lib/simpleshop_theme_web/components/page_templates/home.html.heex

@@ -5,7 +5,7 @@
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" mode={:shop} cart_count={0} />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" mode={@mode} cart_count={@cart_count} />
 
   <main id="main-content">
     <.hero_section
@@ -13,16 +13,16 @@
       description="From art prints to apparel – unique products created by independent artists and delivered straight to your door."
       cta_text="Shop the collection"
       cta_page="collection"
-      mode={:shop}
+      mode={@mode}
     />
 
-    <.category_nav categories={@preview_data.categories} mode={:shop} />
+    <.category_nav categories={@preview_data.categories} mode={@mode} />
 
     <.featured_products_section
       title="Featured products"
       products={@preview_data.products}
       theme_settings={@theme_settings}
-      mode={:shop}
+      mode={@mode}
     />
 
     <.image_text_section
@@ -31,13 +31,13 @@
       image_url="/mockups/mountain-sunrise-print-3.jpg"
       link_text="Learn more about the studio →"
       link_page="about"
-      mode={:shop}
+      mode={@mode}
     />
   </main>
 
-  <.shop_footer theme_settings={@theme_settings} mode={:shop} />
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
 
-  <.cart_drawer cart_items={[]} subtotal="£0.00" mode={:shop} />
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

lib/simpleshop_theme_web/components/page_templates/pdp.html.heex

@@ -5,14 +5,14 @@
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" mode={:shop} cart_count={0} />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" mode={@mode} cart_count={@cart_count} />
 
   <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <.breadcrumb items={[
       %{label: "Home", page: "home", href: "/"},
       %{label: @product.category, page: "collection", href: "/products"},
       %{label: @product.name, current: true}
-    ]} mode={:shop} />
+    ]} mode={@mode} />
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
       <.product_gallery images={@gallery_images} product_name={@product.name} />
@@ -33,12 +33,12 @@
       :if={@theme_settings.pdp_related_products}
       products={@related_products}
       theme_settings={@theme_settings}
-      mode={:shop}
+      mode={@mode}
     />
   </main>
 
-  <.shop_footer theme_settings={@theme_settings} mode={:shop} />
+  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
 
-  <.cart_drawer cart_items={[]} subtotal="£0.00" mode={:shop} />
+  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

lib/simpleshop_theme_web/live/shop_live/about.ex

@@ -3,7 +3,7 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
 
   alias SimpleshopTheme.Settings
   alias SimpleshopTheme.Media
-  alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
+  alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator}
 
   @impl true
   def mount(_params, _session, socket) do
@@ -28,7 +28,26 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
       |> assign(:generated_css, generated_css)
       |> assign(:logo_image, logo_image)
       |> assign(:header_image, header_image)
+      |> assign(:mode, :shop)
+      |> assign(:cart_items, [])
+      |> assign(:cart_count, 0)
+      |> assign(:cart_subtotal, "£0.00")
 
     {:ok, socket}
   end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.about
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      mode={@mode}
+      cart_items={@cart_items}
+      cart_count={@cart_count}
+      cart_subtotal={@cart_subtotal}
+    />
+    """
+  end
 end

lib/simpleshop_theme_web/live/shop_live/contact.ex

@@ -28,7 +28,26 @@ defmodule SimpleshopThemeWeb.ShopLive.Contact do
       |> assign(:generated_css, generated_css)
       |> assign(:logo_image, logo_image)
       |> assign(:header_image, header_image)
+      |> assign(:mode, :shop)
+      |> assign(:cart_items, [])
+      |> assign(:cart_count, 0)
+      |> assign(:cart_subtotal, "£0.00")
 
     {:ok, socket}
   end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.contact
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      mode={@mode}
+      cart_items={@cart_items}
+      cart_count={@cart_count}
+      cart_subtotal={@cart_subtotal}
+    />
+    """
+  end
 end

lib/simpleshop_theme_web/live/shop_live/home.ex

@@ -7,7 +7,6 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
 
   @impl true
   def mount(_params, _session, socket) do
-    # Load theme settings (cached CSS for performance)
     theme_settings = Settings.get_theme_settings()
 
     generated_css =
@@ -35,7 +34,27 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
       |> assign(:logo_image, logo_image)
       |> assign(:header_image, header_image)
       |> assign(:preview_data, preview_data)
+      |> assign(:mode, :shop)
+      |> assign(:cart_items, [])
+      |> assign(:cart_count, 0)
+      |> assign(:cart_subtotal, "£0.00")
 
     {:ok, socket}
   end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.home
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      preview_data={@preview_data}
+      mode={@mode}
+      cart_items={@cart_items}
+      cart_count={@cart_count}
+      cart_subtotal={@cart_subtotal}
+    />
+    """
+  end
 end

lib/simpleshop_theme_web/live/shop_live/product_show.ex

@@ -52,7 +52,30 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
       |> assign(:gallery_images, gallery_images)
       |> assign(:related_products, related_products)
       |> assign(:quantity, 1)
+      |> assign(:mode, :shop)
+      |> assign(:cart_items, [])
+      |> assign(:cart_count, 0)
+      |> assign(:cart_subtotal, "£0.00")
 
     {:ok, socket}
   end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.pdp
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      product={@product}
+      gallery_images={@gallery_images}
+      related_products={@related_products}
+      quantity={@quantity}
+      mode={@mode}
+      cart_items={@cart_items}
+      cart_count={@cart_count}
+      cart_subtotal={@cart_subtotal}
+    />
+    """
+  end
 end

lib/simpleshop_theme_web/live/shop_live/products.ex

@@ -34,7 +34,27 @@ defmodule SimpleshopThemeWeb.ShopLive.Products do
       |> assign(:logo_image, logo_image)
       |> assign(:header_image, header_image)
       |> assign(:preview_data, preview_data)
+      |> assign(:mode, :shop)
+      |> assign(:cart_items, [])
+      |> assign(:cart_count, 0)
+      |> assign(:cart_subtotal, "£0.00")
 
     {:ok, socket}
   end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.collection
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      preview_data={@preview_data}
+      mode={@mode}
+      cart_items={@cart_items}
+      cart_count={@cart_count}
+      cart_subtotal={@cart_subtotal}
+    />
+    """
+  end
 end

lib/simpleshop_theme_web/live/theme_live/index.ex

@@ -289,4 +289,141 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
   def error_to_string(:too_many_files), do: "Too many files"
   def error_to_string(:not_accepted), do: "File type not accepted"
   def error_to_string(err), do: inspect(err)
+
+  # Preview page component - delegates to shared PageTemplates with preview-specific assigns
+  attr :page, :atom, required: true
+  attr :preview_data, :map, required: true
+  attr :theme_settings, :map, required: true
+  attr :logo_image, :any, required: true
+  attr :header_image, :any, required: true
+
+  defp preview_page(%{page: :home} = assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.home
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      preview_data={@preview_data}
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp preview_page(%{page: :collection} = assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.collection
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      preview_data={@preview_data}
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp preview_page(%{page: :pdp} = assigns) do
+    product = List.first(assigns.preview_data.products)
+
+    assigns =
+      assigns
+      |> assign(:product, product)
+      |> assign(:gallery_images, build_gallery_images(product))
+      |> assign(:related_products, Enum.slice(assigns.preview_data.products, 1, 4))
+
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.pdp
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      product={@product}
+      gallery_images={@gallery_images}
+      related_products={@related_products}
+      quantity={1}
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp preview_page(%{page: :cart} = assigns) do
+    cart_items = assigns.preview_data.cart_items
+    subtotal = Enum.reduce(cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end)
+
+    assigns =
+      assigns
+      |> assign(:cart_page_items, cart_items)
+      |> assign(:cart_page_subtotal, subtotal)
+
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.cart
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      cart_page_items={@cart_page_items}
+      cart_page_subtotal={@cart_page_subtotal}
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp preview_page(%{page: :about} = assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.about
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp preview_page(%{page: :contact} = assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.contact
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp preview_page(%{page: :error} = assigns) do
+    ~H"""
+    <SimpleshopThemeWeb.PageTemplates.error
+      theme_settings={@theme_settings}
+      logo_image={@logo_image}
+      header_image={@header_image}
+      preview_data={@preview_data}
+      error_code="404"
+      error_title="Page Not Found"
+      error_description="Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved."
+      mode={:preview}
+      cart_items={PreviewData.cart_drawer_items()}
+      cart_count={2}
+      cart_subtotal="£72.00"
+    />
+    """
+  end
+
+  defp build_gallery_images(product) do
+    [product.image_url, product.hover_image_url, product.image_url, product.hover_image_url]
+  end
 end

lib/simpleshop_theme_web/live/theme_live/index.html.heex

@@ -903,22 +903,13 @@
             <%= Phoenix.HTML.raw(@generated_css) %>
           </style>
 
-          <%= case @preview_page do %>
+          <.preview_page
-            <% :home -> %>
+            page={@preview_page}
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.home preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
+            preview_data={@preview_data}
-            <% :collection -> %>
+            theme_settings={@theme_settings}
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.collection preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
+            logo_image={@logo_image}
-            <% :pdp -> %>
+            header_image={@header_image}
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.pdp preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
+          />
-            <% :cart -> %>
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
-            <% :about -> %>
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.about preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
-            <% :contact -> %>
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.contact preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
-            <% :error -> %>
-              <SimpleshopThemeWeb.ThemeLive.PreviewPages.error preview_data={@preview_data} theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} />
-          <% end %>
         </div>
       </div>
     </div>

lib/simpleshop_theme_web/live/theme_live/preview_pages.ex

@@ -1,6 +0,0 @@
-defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
-  use Phoenix.Component
-  import SimpleshopThemeWeb.ShopComponents
-
-  embed_templates "preview_pages/*"
-end

lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex

@@ -1,26 +0,0 @@
-<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <.skip_link />
-
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={:preview} cart_count={2} />
-
-  <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
-    <.hero_section
-      title="About the studio"
-      description="Nature photography, printed with care"
-      background={:sunken}
-    />
-
-    <.content_body image_url="/mockups/night-sky-blanket-3.jpg">
-      <.rich_text blocks={SimpleshopTheme.Theme.PreviewData.about_content()} />
-    </.content_body>
-  </main>
-
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex

@@ -1,22 +0,0 @@
-<%
-  subtotal = Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end)
-%>
-<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <.skip_link />
-
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="cart" mode={:preview} cart_count={2} />
-
-  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <.page_title text="Your basket" />
-    <.cart_layout items={@preview_data.cart_items} subtotal={subtotal} mode={:preview} />
-  </main>
-
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex

@@ -1,44 +0,0 @@
-<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <!-- Skip Link for Accessibility -->
-  <.skip_link />
-
-  <!-- Announcement Bar -->
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <!-- Header -->
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={:preview} cart_count={2} />
-
-  <!-- Page Header -->
-  <main id="main-content">
-  <.collection_header title="All Products" product_count={length(@preview_data.products)} />
-
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <!-- Filter Bar: Category Pills + Sort -->
-    <.filter_bar categories={@preview_data.categories} />
-
-    <!-- Product Grid -->
-    <.product_grid theme_settings={@theme_settings}>
-      <%= for product <- @preview_data.products do %>
-        <.product_card
-          product={product}
-          theme_settings={@theme_settings}
-          mode={:preview}
-          variant={:default}
-          show_category={true}
-        />
-      <% end %>
-    </.product_grid>
-  </div>
-  </main>
-
-  <!-- Footer -->
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <!-- Search Modal -->
-  <!-- Cart Drawer -->
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex

@@ -1,53 +0,0 @@
-<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <!-- Skip Link for Accessibility -->
-  <.skip_link />
-
-  <!-- Announcement Bar -->
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <!-- Header -->
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={:preview} cart_count={2} />
-
-  <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-    <.hero_section
-      variant={:page}
-      title="Contact Us"
-      description="Questions about your order or just want to say hello? Drop us a message and we'll get back to you as soon as we can."
-    />
-
-    <div class="grid gap-8 md:grid-cols-2 mb-12">
-      <!-- Contact Form -->
-      <.contact_form />
-
-      <!-- Contact Info -->
-      <div class="space-y-6">
-        <!-- Order Tracking -->
-        <.order_tracking_card />
-
-        <!-- Helpful info -->
-        <.info_card title="Handy to know" items={[
-          %{label: "Printing", value: "2-5 business days"},
-          %{label: "Delivery", value: "3-7 business days after printing"},
-          %{label: "Returns", value: "Happy to help with faulty or damaged items"}
-        ]} />
-
-        <!-- Get in touch -->
-        <.contact_info_card email="hello@example.com" />
-
-        <!-- Social links -->
-        <.social_links />
-      </div>
-    </div>
-  </main>
-
-  <!-- Footer -->
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <!-- Search Modal -->
-  <!-- Cart Drawer -->
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex

@@ -1,48 +0,0 @@
-<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <!-- Skip Link for Accessibility -->
-  <.skip_link />
-
-  <!-- Announcement Bar -->
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <!-- Header -->
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" mode={:preview} cart_count={2} />
-
-  <main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
-    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-    <.hero_section
-      variant={:error}
-      pre_title="404"
-      title="Page Not Found"
-      description="Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved."
-      cta_text="Go to Homepage"
-      cta_page="home"
-      secondary_cta_text="Browse Products"
-      secondary_cta_page="collection"
-      mode={:preview}
-    />
-
-    <.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto">
-      <%= for product <- Enum.take(@preview_data.products, 4) do %>
-        <.product_card
-          product={product}
-          theme_settings={@theme_settings}
-          mode={:preview}
-          variant={:minimal}
-        />
-      <% end %>
-    </.product_grid>
-    </div>
-  </main>
-
-  <!-- Footer -->
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <!-- Search Modal -->
-  <!-- Cart Drawer -->
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex

@@ -1,53 +0,0 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <!-- Skip Link for Accessibility -->
-  <.skip_link />
-
-  <!-- Announcement Bar -->
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <!-- Header -->
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" mode={:preview} cart_count={2} />
-
-  <!-- Hero Section -->
-  <main id="main-content">
-  <.hero_section
-    title="Original designs, printed on demand"
-    description="From art prints to apparel – unique products created by independent artists and delivered straight to your door."
-    cta_text="Shop the collection"
-    cta_page="collection"
-    mode={:preview}
-  />
-
-  <!-- Categories -->
-  <.category_nav categories={@preview_data.categories} mode={:preview} />
-
-  <!-- Featured Products -->
-  <.featured_products_section
-    title="Featured products"
-    products={@preview_data.products}
-    theme_settings={@theme_settings}
-    mode={:preview}
-  />
-
-  <!-- About Section -->
-  <.image_text_section
-    title="Made with passion, printed with care"
-    description="Every design starts with an idea. We work with quality print partners to bring those ideas to life on premium products – from gallery-quality art prints to everyday essentials."
-    image_url="/mockups/mountain-sunrise-print-3.jpg"
-    link_text="Learn more about the studio →"
-    link_page="about"
-    mode={:preview}
-  />
-  </main>
-
-  <!-- Footer -->
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <!-- Cart Drawer -->
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-
-  <!-- Search Modal -->
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex

@@ -1,48 +0,0 @@
-<%
-  product = List.first(@preview_data.products)
-  gallery_images = [product.image_url, product.hover_image_url, product.image_url, product.hover_image_url]
-%>
-<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <.skip_link />
-
-  <%= if @theme_settings.announcement_bar do %>
-    <.announcement_bar theme_settings={@theme_settings} />
-  <% end %>
-
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" mode={:preview} cart_count={2} />
-
-  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <.breadcrumb items={[
-      %{label: "Home", page: "home", href: "/"},
-      %{label: product.category, page: "collection", href: "/products"},
-      %{label: product.name, current: true}
-    ]} mode={:preview} />
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
-      <.product_gallery images={gallery_images} product_name={product.name} />
-
-      <div>
-        <.product_info product={product} />
-        <.variant_selector label="Size" options={["S", "M", "L", "XL"]} />
-        <.quantity_selector quantity={1} in_stock={product.in_stock} />
-        <.add_to_cart_button />
-        <.trust_badges :if={@theme_settings.pdp_trust_badges} />
-        <.product_details product={product} />
-      </div>
-    </div>
-
-    <.reviews_section :if={@theme_settings.pdp_reviews} reviews={SimpleshopTheme.Theme.PreviewData.reviews()} average_rating={5} total_count={24} />
-
-    <.related_products_section
-      :if={@theme_settings.pdp_related_products}
-      products={Enum.slice(@preview_data.products, 1, 4)}
-      theme_settings={@theme_settings}
-      mode={:preview}
-    />
-  </main>
-
-  <.shop_footer theme_settings={@theme_settings} mode={:preview} />
-
-  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
-</div>