diff --git a/PHASE_9_PLAN.md b/PHASE_9_PLAN.md
new file mode 100644
index 0000000..e2504b8
--- /dev/null
+++ b/PHASE_9_PLAN.md
@@ -0,0 +1,923 @@
+# SimpleShop Theme - Phase 9 Implementation Plan
+
+## Overview
+
+This plan covers **Phase 9: Storefront Integration** - applying the theme system to the actual public-facing shop. Based on my analysis, Phases 1-8 are complete, with a fully functional theme editor at `/admin/theme`. Phase 9 will create the public storefront that uses the saved theme settings.
+
+## Current State Summary
+
+✅ **Completed (Phases 1-8):**
+- Settings and Media contexts with SQLite storage
+- CSS three-layer architecture (primitives, attributes, semantic)
+- Theme editor LiveView with 8 presets
+- All 7 preview pages (home, collection, pdp, cart, about, contact, error)
+- Full customization controls (mood, typography, shape, density, colors, layout, toggles)
+- Logo and header image uploads with BLOB storage
+- SVG recoloring functionality
+- CSS generation system
+- Preview data system (mock products, testimonials, categories)
+
+❌ **Not Started (Phase 9):**
+- Public storefront routes
+- Storefront LiveViews
+- Theme CSS injection for public pages
+- Plug to load theme settings
+- CSS cache warming
+- Real product integration
+
+## Architecture Decisions
+
+### 1. Routing Strategy
+- **Public routes**: Use root-level paths (`/`, `/products/:slug`, `/cart`, etc.)
+- **No shop slug**: Since this app IS the shop (not multi-tenant), no slug needed
+- **Future-proof**: Structure allows adding multi-shop support later if needed
+
+### 2. LiveView Structure
+- **Reuse preview templates**: The preview pages are already production-ready
+- **Extract to shared components**: Move reusable pieces from preview_pages/ to components/
+- **Storefront-specific LiveViews**: Create dedicated LiveViews that handle real data
+
+### 3. CSS Application
+- **Same three-layer system**: Use identical CSS as theme editor
+- **Root element**: Use `.shop-root` class with data attributes
+- **Inline CSS injection**: Inject generated CSS into layout via assign
+- **ETS caching**: Use CSSCache for production performance
+- **Cache invalidation**: Invalidate on theme settings save
+
+### 4. Data Handling
+- **Smart degradation**: Show empty states when no products exist
+- **Graceful fallback**: Use preview data patterns for missing content
+- **Real products**: When Products context exists, use real data
+
+## Implementation Steps
+
+### Step 1: Extract Shared Components
+
+**Goal**: Move reusable preview components to shared location for use in both admin and storefront
+
+**Files to create:**
+- `lib/simpleshop_theme_web/components/shop/announcement_bar.ex`
+- `lib/simpleshop_theme_web/components/shop/header.ex`
+- `lib/simpleshop_theme_web/components/shop/footer.ex`
+- `lib/simpleshop_theme_web/components/shop/search_modal.ex`
+- `lib/simpleshop_theme_web/components/shop/product_card.ex`
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/live/theme_live/preview_pages.ex` - Import and use new components
+- All preview templates - Update to use new component modules
+
+**Actions:**
+1. Create `lib/simpleshop_theme_web/components/shop/` directory
+2. Extract `announcement_bar/1` from preview_pages.ex to `shop/announcement_bar.ex`
+3. Extract `shop_header/1` to `shop/header.ex`
+4. Extract `shop_footer/1` to `shop/footer.ex`
+5. Extract `search_modal/1` to `shop/search_modal.ex`
+6. Create new `product_card/1` component (used in multiple places)
+7. Update preview_pages.ex to import and use new components
+8. Update all 7 preview templates to use new component paths
+9. Test theme editor still works correctly
+
+**Validation:**
+- Run `mix test test/simpleshop_theme_web/live/theme_live_test.exs`
+- Visit `/admin/theme` and verify all 7 preview pages still render correctly
+- No visual regressions
+
+---
+
+### Step 2: Create LoadTheme Plug
+
+**Goal**: Create a plug that loads theme settings and generated CSS for every public request
+
+**Files to create:**
+- `lib/simpleshop_theme_web/plugs/load_theme.ex`
+- `test/simpleshop_theme_web/plugs/load_theme_test.exs`
+
+**Plug functionality:**
+```elixir
+defmodule SimpleshopThemeWeb.Plugs.LoadTheme do
+  import Plug.Conn
+  alias SimpleshopTheme.Settings
+  alias SimpleshopTheme.Theme.{CSSGenerator, CSSCache}
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    # Try cache first
+    {theme_settings, generated_css} =
+      case CSSCache.get() do
+        {:ok, css} ->
+          {Settings.get_theme_settings(), css}
+        :miss ->
+          settings = Settings.get_theme_settings()
+          css = CSSGenerator.generate(settings)
+          CSSCache.put(css)
+          {settings, css}
+      end
+
+    conn
+    |> assign(:theme_settings, theme_settings)
+    |> assign(:generated_css, generated_css)
+  end
+end
+```
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/router.ex` - Add plug to public pipeline
+
+**Actions:**
+1. Create plug file with init/1 and call/2 functions
+2. Implement cache-first CSS loading strategy
+3. Assign both `:theme_settings` and `:generated_css` to conn
+4. Add plug to `:browser` pipeline in router (before routes)
+5. Write tests for plug behavior
+6. Test cache hit and cache miss scenarios
+
+**Validation:**
+- Run `mix test test/simpleshop_theme_web/plugs/load_theme_test.exs`
+- Verify assigns are available in subsequent requests
+- Verify CSS is cached and reused
+
+---
+
+### Step 3: Create Storefront Layout
+
+**Goal**: Create a dedicated layout for the public storefront with theme CSS injection
+
+**Files to create:**
+- `lib/simpleshop_theme_web/components/layouts/shop.html.heex`
+
+**Layout structure:**
+```heex
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title><%= assigns[:page_title] || @theme_settings.site_name %></.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}></script>
+
+    <!-- Inject theme CSS -->
+    <style id="theme-css">
+      <%= Phoenix.HTML.raw(@generated_css) %>
+    </style>
+  </head>
+  <body class="h-full">
+    <div class="shop-root h-full"
+         data-mood={@theme_settings.mood}
+         data-typography={@theme_settings.typography}
+         data-shape={@theme_settings.shape}
+         data-density={@theme_settings.density}
+         data-grid={@theme_settings.grid_columns}
+         data-header={@theme_settings.header_layout}
+         data-sticky={to_string(@theme_settings.sticky_header)}
+         data-layout={@theme_settings.layout_width}
+         data-shadow={@theme_settings.card_shadow}>
+      <%= @inner_content %>
+    </div>
+  </body>
+</html>
+```
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/components/layouts.ex` - Add `shop/1` layout function
+
+**Actions:**
+1. Create new shop.html.heex layout file
+2. Add `.shop-root` wrapper with all theme data attributes
+3. Inject `@generated_css` into `<style>` tag
+4. Use `@theme_settings.site_name` for page title default
+5. Add shop layout function to layouts.ex module
+6. Ensure Google Fonts are loaded (already in root.html.heex)
+
+**Validation:**
+- Inspect HTML output to verify data attributes present
+- Verify CSS injection works
+- Check that layout compiles without errors
+
+---
+
+### Step 4: Create Home Page LiveView
+
+**Goal**: Create the public homepage LiveView using real/mock data
+
+**Files to create:**
+- `lib/simpleshop_theme_web/live/shop_live/home.ex`
+- `lib/simpleshop_theme_web/live/shop_live/home.html.heex`
+- `test/simpleshop_theme_web/live/shop_live/home_test.exs`
+
+**LiveView structure:**
+```elixir
+defmodule SimpleshopThemeWeb.ShopLive.Home do
+  use SimpleshopThemeWeb, :live_view
+  alias SimpleshopTheme.Theme.PreviewData
+
+  def mount(_params, _session, socket) do
+    # Use real products when available, else preview data
+    products = PreviewData.products()
+    categories = PreviewData.categories()
+    testimonials = PreviewData.testimonials()
+
+    {:ok, assign(socket,
+      page_title: "Home",
+      products: products,
+      categories: categories,
+      testimonials: testimonials
+    )}
+  end
+end
+```
+
+**Template approach:**
+- Copy structure from `preview_pages/home.html.heex`
+- Use new shared components (header, footer, announcement_bar)
+- Remove preview-specific wrapper divs
+- Ensure data-driven rendering from assigns
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/router.ex` - Add home route
+
+**Actions:**
+1. Create home LiveView module with mount function
+2. Load preview data (real products when available)
+3. Create home template based on preview version
+4. Use shared components for header, footer, announcement bar
+5. Add route: `live "/", ShopLive.Home, :index` in public scope
+6. Set layout to `:shop` for route
+7. Write tests for home page rendering
+8. Test with and without products
+
+**Router changes:**
+```elixir
+# Public storefront
+scope "/", SimpleshopThemeWeb do
+  pipe_through :browser
+
+  live_session :public_shop, layout: {SimpleshopThemeWeb.Layouts, :shop} do
+    live "/", ShopLive.Home, :index
+  end
+end
+```
+
+**Validation:**
+- Visit `/` and verify homepage renders
+- Check theme styles are applied
+- Test announcement bar toggle works
+- Verify header layout variations work
+- Test sticky header toggle
+- Confirm products display (mock data)
+
+---
+
+### Step 5: Create Collection Page LiveView
+
+**Goal**: Create product collection/grid page
+
+**Files to create:**
+- `lib/simpleshop_theme_web/live/shop_live/collection.ex`
+- `lib/simpleshop_theme_web/live/shop_live/collection.html.heex`
+- `test/simpleshop_theme_web/live/shop_live/collection_test.exs`
+
+**LiveView structure:**
+```elixir
+defmodule SimpleshopThemeWeb.ShopLive.Collection do
+  use SimpleshopThemeWeb, :live_view
+  alias SimpleshopTheme.Theme.PreviewData
+
+  def mount(%{"slug" => slug}, _session, socket) do
+    # Future: Load real collection by slug
+    # For now: Use preview products filtered by category
+    products = PreviewData.products()
+
+    {:ok, assign(socket,
+      page_title: "Shop All Products",
+      collection_name: "All Products",
+      products: products,
+      filter: nil,
+      sort: "featured"
+    )}
+  end
+
+  def handle_event("filter", %{"category" => category}, socket) do
+    # Filter products by category
+    {:noreply, assign(socket, filter: category)}
+  end
+
+  def handle_event("sort", %{"by" => sort_by}, socket) do
+    # Sort products
+    {:noreply, assign(socket, sort: sort_by)}
+  end
+end
+```
+
+**Template approach:**
+- Copy from `preview_pages/collection.html.heex`
+- Implement filter sidebar (responds to filter events)
+- Implement sort dropdown (price, name, featured)
+- Use product_card component
+- Respect grid_columns setting (2/3/4)
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/router.ex` - Add collection route
+
+**Actions:**
+1. Create collection LiveView module
+2. Implement filtering and sorting logic
+3. Create collection template based on preview
+4. Add route: `live "/collections/:slug", ShopLive.Collection, :show`
+5. Handle empty state (no products)
+6. Write tests for filtering and sorting
+7. Test grid columns respect theme setting
+
+**Router changes:**
+```elixir
+live "/collections/:slug", ShopLive.Collection, :show
+live "/collections", ShopLive.Collection, :index  # "All Products"
+```
+
+**Validation:**
+- Visit `/collections` and `/collections/tshirts`
+- Test filter sidebar works
+- Test sort dropdown changes order
+- Verify grid columns (2, 3, 4) work correctly
+- Check card shadow setting is respected
+- Test hover image toggle works
+
+---
+
+### Step 6: Create Product Detail Page (PDP) LiveView
+
+**Goal**: Create individual product page with gallery, details, add to cart
+
+**Files to create:**
+- `lib/simpleshop_theme_web/live/shop_live/product.ex`
+- `lib/simpleshop_theme_web/live/shop_live/product.html.heex`
+- `test/simpleshop_theme_web/live/shop_live/product_test.exs`
+
+**LiveView structure:**
+```elixir
+defmodule SimpleshopThemeWeb.ShopLive.Product do
+  use SimpleshopThemeWeb, :live_view
+  alias SimpleshopTheme.Theme.PreviewData
+
+  def mount(%{"slug" => slug}, _session, socket) do
+    # Future: Load real product by slug
+    # For now: Use first preview product
+    [product | _] = PreviewData.products()
+
+    {:ok, assign(socket,
+      page_title: product.name,
+      product: product,
+      selected_variant: nil,
+      quantity: 1,
+      selected_image: 0
+    )}
+  end
+
+  def handle_event("select_variant", %{"variant_id" => id}, socket) do
+    {:noreply, assign(socket, selected_variant: id)}
+  end
+
+  def handle_event("select_image", %{"index" => index}, socket) do
+    {:noreply, assign(socket, selected_image: String.to_integer(index))}
+  end
+
+  def handle_event("add_to_cart", _params, socket) do
+    # Future: Add to cart functionality
+    {:noreply, put_flash(socket, :info, "Added to cart")}
+  end
+end
+```
+
+**Template approach:**
+- Copy from `preview_pages/pdp.html.heex`
+- Image gallery with thumbnails
+- Variant selector (size, color)
+- Quantity selector
+- Add to cart button
+- Respect toggle settings: `pdp_trust_badges`, `pdp_reviews`, `pdp_related_products`
+- Gallery position: left/right based on `gallery_position` setting
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/router.ex` - Add product route
+
+**Actions:**
+1. Create product LiveView module
+2. Implement variant selection logic
+3. Implement image gallery navigation
+4. Create product template based on preview
+5. Add route: `live "/products/:slug", ShopLive.Product, :show`
+6. Handle toggle features (reviews, badges, related)
+7. Write tests for variant selection and cart add
+8. Test gallery position setting
+
+**Router changes:**
+```elixir
+live "/products/:slug", ShopLive.Product, :show
+```
+
+**Validation:**
+- Visit `/products/example-tshirt`
+- Test variant selection updates UI
+- Test image gallery thumbnail clicks
+- Verify trust badges show/hide based on setting
+- Verify reviews show/hide based on setting
+- Verify related products show/hide based on setting
+- Test "Add to cart" button (shows flash for now)
+- Test gallery position (left/right) setting
+
+---
+
+### Step 7: Create Cart Page LiveView
+
+**Goal**: Create shopping cart page with line items and checkout
+
+**Files to create:**
+- `lib/simpleshop_theme_web/live/shop_live/cart.ex`
+- `lib/simpleshop_theme_web/live/shop_live/cart.html.heex`
+- `test/simpleshop_theme_web/live/shop_live/cart_test.exs`
+
+**LiveView structure:**
+```elixir
+defmodule SimpleshopThemeWeb.ShopLive.Cart do
+  use SimpleshopThemeWeb, :live_view
+  alias SimpleshopTheme.Theme.PreviewData
+
+  def mount(_params, _session, socket) do
+    # Future: Load real cart from session
+    # For now: Use preview cart items
+    cart_items = PreviewData.cart_items()
+
+    {:ok, assign(socket,
+      page_title: "Shopping Cart",
+      cart_items: cart_items,
+      subtotal: calculate_subtotal(cart_items),
+      shipping: 0,
+      tax: 0
+    )}
+  end
+
+  def handle_event("update_quantity", %{"id" => id, "quantity" => qty}, socket) do
+    # Update item quantity
+    {:noreply, socket}
+  end
+
+  def handle_event("remove_item", %{"id" => id}, socket) do
+    # Remove item from cart
+    {:noreply, socket}
+  end
+
+  def handle_event("checkout", _params, socket) do
+    # Future: Proceed to checkout
+    {:noreply, put_flash(socket, :info, "Checkout coming soon")}
+  end
+
+  defp calculate_subtotal(items) do
+    Enum.reduce(items, 0, fn item, acc ->
+      acc + (item.price * item.quantity)
+    end)
+  end
+end
+```
+
+**Template approach:**
+- Copy from `preview_pages/cart.html.heex`
+- Line items with product image, name, variant, price, quantity
+- Quantity update controls
+- Remove item button
+- Cart summary (subtotal, shipping, tax, total)
+- Checkout button
+- Empty cart state
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/router.ex` - Add cart route
+
+**Actions:**
+1. Create cart LiveView module
+2. Implement quantity update logic
+3. Implement remove item logic
+4. Create cart template based on preview
+5. Add route: `live "/cart", ShopLive.Cart, :show`
+6. Handle empty cart state
+7. Write tests for cart operations
+8. Test price calculations
+
+**Router changes:**
+```elixir
+live "/cart", ShopLive.Cart, :show
+```
+
+**Validation:**
+- Visit `/cart`
+- Test quantity update buttons
+- Test remove item button
+- Verify price calculations correct
+- Test empty cart state
+- Verify checkout button shows flash
+- Check button style setting is respected
+
+---
+
+### Step 8: Create Static Pages (About, Contact, Error)
+
+**Goal**: Create remaining static pages
+
+**Files to create:**
+- `lib/simpleshop_theme_web/live/shop_live/about.ex`
+- `lib/simpleshop_theme_web/live/shop_live/about.html.heex`
+- `lib/simpleshop_theme_web/live/shop_live/contact.ex`
+- `lib/simpleshop_theme_web/live/shop_live/contact.html.heex`
+- `lib/simpleshop_theme_web/controllers/error_html/404.html.heex`
+- `test/simpleshop_theme_web/live/shop_live/about_test.exs`
+- `test/simpleshop_theme_web/live/shop_live/contact_test.exs`
+
+**About Page:**
+```elixir
+defmodule SimpleshopThemeWeb.ShopLive.About do
+  use SimpleshopThemeWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, page_title: "About Us")}
+  end
+end
+```
+
+**Contact Page:**
+```elixir
+defmodule SimpleshopThemeWeb.ShopLive.Contact do
+  use SimpleshopThemeWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket,
+      page_title: "Contact Us",
+      form: to_form(%{})
+    )}
+  end
+
+  def handle_event("submit_contact", %{"contact" => params}, socket) do
+    # Future: Send contact email
+    {:noreply, put_flash(socket, :info, "Message sent successfully")}
+  end
+end
+```
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/router.ex` - Add routes
+- `lib/simpleshop_theme_web/controllers/error_html.ex` - Add 404 template
+
+**Actions:**
+1. Create about LiveView and template (copy from preview)
+2. Create contact LiveView and template (copy from preview)
+3. Add contact form submission handler
+4. Create 404 error template (copy from preview_pages/error.html.heex)
+5. Add routes: `live "/about"` and `live "/contact"`
+6. Write tests for static pages
+7. Test contact form submission
+
+**Router changes:**
+```elixir
+live "/about", ShopLive.About, :show
+live "/contact", ShopLive.Contact, :show
+```
+
+**Validation:**
+- Visit `/about` and verify page renders
+- Visit `/contact` and test form submission
+- Visit invalid URL and verify 404 page shows with theme
+- Check all pages respect theme settings
+
+---
+
+### Step 9: Wire Up CSS Cache Invalidation
+
+**Goal**: Ensure CSS cache is invalidated when theme settings are saved
+
+**Files to modify:**
+- `lib/simpleshop_theme/settings.ex` - Add cache invalidation to update_theme_settings/1
+- `lib/simpleshop_theme_web/live/theme_live/index.ex` - Ensure save_theme calls invalidation
+
+**Actions:**
+1. Update `Settings.update_theme_settings/1` to call `CSSCache.invalidate()` after save
+2. Update `ThemeLive.Index.handle_event("save_theme")` to trigger cache refresh
+3. Optionally warm cache after invalidation for first request performance
+4. Test cache invalidation works correctly
+
+**Code changes in Settings context:**
+```elixir
+def update_theme_settings(attrs) do
+  current = get_theme_settings()
+  changeset = ThemeSettings.changeset(current, attrs)
+
+  case changeset.valid? do
+    true ->
+      updated = Ecto.Changeset.apply_changes(changeset)
+      put_setting("theme_settings", updated, :json)
+
+      # Invalidate CSS cache
+      SimpleshopTheme.Theme.CSSCache.invalidate()
+
+      # Optionally warm cache immediately
+      css = SimpleshopTheme.Theme.CSSGenerator.generate(updated)
+      SimpleshopTheme.Theme.CSSCache.put(css)
+
+      {:ok, updated}
+    false ->
+      {:error, changeset}
+  end
+end
+```
+
+**Validation:**
+- Change theme settings in admin
+- Save theme
+- Visit public storefront
+- Verify changes are reflected immediately
+- Check cache is being used (add logging if needed)
+
+---
+
+### Step 10: Add Cache Warming on Application Start
+
+**Goal**: Pre-generate and cache theme CSS when application starts
+
+**Files to modify:**
+- `lib/simpleshop_theme/application.ex` - Add cache warming after supervisor start
+
+**Actions:**
+1. Add cache warming function to Application module
+2. Call after supervisor starts successfully
+3. Handle case where no theme settings exist yet
+4. Add logging for cache warming
+
+**Code changes:**
+```elixir
+defmodule SimpleshopTheme.Application do
+  def start(_type, _args) do
+    children = [
+      # ... existing children ...
+      SimpleshopTheme.Theme.CSSCache,
+      # ... more children ...
+    ]
+
+    opts = [strategy: :one_for_one, name: SimpleshopTheme.Supervisor]
+    result = Supervisor.start_link(children, opts)
+
+    # Warm CSS cache on startup
+    Task.start(fn -> warm_theme_cache() end)
+
+    result
+  end
+
+  defp warm_theme_cache do
+    try do
+      settings = SimpleshopTheme.Settings.get_theme_settings()
+      css = SimpleshopTheme.Theme.CSSGenerator.generate(settings)
+      SimpleshopTheme.Theme.CSSCache.put(css)
+      Logger.info("Theme CSS cache warmed successfully")
+    rescue
+      e -> Logger.warning("Failed to warm theme cache: #{inspect(e)}")
+    end
+  end
+end
+```
+
+**Validation:**
+- Restart application
+- Check logs for "Theme CSS cache warmed successfully"
+- Visit storefront immediately (should be fast)
+- Verify no database queries for CSS generation on first request
+
+---
+
+### Step 11: Update Navigation Links
+
+**Goal**: Connect theme editor to storefront and vice versa
+
+**Files to modify:**
+- `lib/simpleshop_theme_web/components/shop/header.ex` - Add admin link when authenticated
+- `lib/simpleshop_theme_web/live/theme_live/index.html.heex` - Add "View Shop" link
+
+**Actions:**
+1. In shop header component, add conditional admin link for authenticated users
+2. In theme editor, add "View Shop" button in controls area
+3. Ensure links use proper route helpers
+4. Test navigation between admin and storefront
+
+**Shop header changes:**
+```heex
+<%= if @current_user do %>
+  <a href={~p"/admin/theme"} class="admin-link">
+    Edit Theme
+  </a>
+<% end %>
+```
+
+**Theme editor changes (add near "Save Theme" button):**
+```heex
+<a href={~p"/"} target="_blank" class="btn btn-outline">
+  View Shop
+</a>
+```
+
+**Validation:**
+- When logged in on storefront, verify "Edit Theme" link appears
+- Click link and verify navigates to theme editor
+- In theme editor, click "View Shop" link
+- Verify opens storefront in new tab
+
+---
+
+### Step 12: Testing and Polish
+
+**Goal**: Comprehensive testing and UX improvements
+
+**Files to modify:**
+- All test files - Add comprehensive coverage
+- Various LiveViews - Add loading states, error handling
+
+**Actions:**
+
+1. **Write comprehensive tests:**
+   - Test all storefront LiveViews
+   - Test plug behavior
+   - Test cache invalidation flow
+   - Test theme application across all pages
+   - Test responsive behavior
+
+2. **Add loading states:**
+   - Product loading skeletons
+   - Cart update feedback
+   - Form submission states
+
+3. **Error handling:**
+   - Handle missing products gracefully
+   - Handle invalid routes
+   - Handle network errors
+
+4. **Performance optimization:**
+   - Verify CSS cache is working
+   - Check database query counts
+   - Test with many products (when available)
+
+5. **Accessibility:**
+   - Check color contrast ratios
+   - Verify keyboard navigation
+   - Add ARIA labels where needed
+
+6. **Mobile testing:**
+   - Test all pages on mobile viewport
+   - Verify touch interactions work
+   - Check responsive grid layouts
+
+7. **Cross-browser testing:**
+   - Test in Chrome, Firefox, Safari
+   - Verify CSS variables work correctly
+   - Check font loading
+
+**Validation:**
+- Run full test suite: `mix test`
+- All tests pass
+- No console errors
+- Good Lighthouse scores
+- Responsive on all devices
+
+---
+
+## Summary of Files
+
+### Files to Create (23 files)
+
+**Shared Components (5 files):**
+- `lib/simpleshop_theme_web/components/shop/announcement_bar.ex`
+- `lib/simpleshop_theme_web/components/shop/header.ex`
+- `lib/simpleshop_theme_web/components/shop/footer.ex`
+- `lib/simpleshop_theme_web/components/shop/search_modal.ex`
+- `lib/simpleshop_theme_web/components/shop/product_card.ex`
+
+**Infrastructure (2 files):**
+- `lib/simpleshop_theme_web/plugs/load_theme.ex`
+- `lib/simpleshop_theme_web/components/layouts/shop.html.heex`
+
+**Storefront LiveViews (10 files):**
+- `lib/simpleshop_theme_web/live/shop_live/home.ex`
+- `lib/simpleshop_theme_web/live/shop_live/home.html.heex`
+- `lib/simpleshop_theme_web/live/shop_live/collection.ex`
+- `lib/simpleshop_theme_web/live/shop_live/collection.html.heex`
+- `lib/simpleshop_theme_web/live/shop_live/product.ex`
+- `lib/simpleshop_theme_web/live/shop_live/product.html.heex`
+- `lib/simpleshop_theme_web/live/shop_live/cart.ex`
+- `lib/simpleshop_theme_web/live/shop_live/cart.html.heex`
+- `lib/simpleshop_theme_web/live/shop_live/about.ex`
+- `lib/simpleshop_theme_web/live/shop_live/about.html.heex`
+- `lib/simpleshop_theme_web/live/shop_live/contact.ex`
+- `lib/simpleshop_theme_web/live/shop_live/contact.html.heex`
+
+**Error Pages (1 file):**
+- `lib/simpleshop_theme_web/controllers/error_html/404.html.heex`
+
+**Tests (6 files):**
+- `test/simpleshop_theme_web/plugs/load_theme_test.exs`
+- `test/simpleshop_theme_web/live/shop_live/home_test.exs`
+- `test/simpleshop_theme_web/live/shop_live/collection_test.exs`
+- `test/simpleshop_theme_web/live/shop_live/product_test.exs`
+- `test/simpleshop_theme_web/live/shop_live/cart_test.exs`
+- `test/simpleshop_theme_web/live/shop_live/about_test.exs`
+
+### Files to Modify (9 files)
+
+- `lib/simpleshop_theme_web/router.ex` - Add plug, public routes, shop layout
+- `lib/simpleshop_theme_web/components/layouts.ex` - Add shop layout function
+- `lib/simpleshop_theme/settings.ex` - Add cache invalidation
+- `lib/simpleshop_theme/application.ex` - Add cache warming
+- `lib/simpleshop_theme_web/live/theme_live/index.ex` - Add "View Shop" link
+- `lib/simpleshop_theme_web/live/theme_live/index.html.heex` - Update to use shared components
+- `lib/simpleshop_theme_web/live/theme_live/preview_pages.ex` - Remove extracted components
+- All 7 preview page templates - Update component paths
+- `lib/simpleshop_theme_web/components/shop/header.ex` - Add admin link
+
+## Key Patterns to Follow
+
+1. **CSS Application**: Always use `.shop-root` class with data attributes on root element
+2. **Component Reuse**: Use shared components from `components/shop/` directory
+3. **Preview Data**: Use `PreviewData` module for mock content until real Products context exists
+4. **Cache Strategy**: Always check `CSSCache` before generating CSS
+5. **Theme Settings**: Access via `@theme_settings` assign (provided by LoadTheme plug)
+6. **Layout**: Use `:shop` layout for all public pages
+7. **Testing**: Write tests alongside each LiveView
+8. **Validation**: Test each step before moving to next
+
+## Success Criteria
+
+✅ Public storefront accessible at `/`
+✅ All pages (home, collection, product, cart, about, contact) render correctly
+✅ Theme settings from admin are applied to storefront
+✅ CSS is cached for performance
+✅ Cache invalidates when theme is saved
+✅ Data attributes drive theme styling
+✅ All toggle features work (announcement bar, sticky header, etc.)
+✅ Grid columns, layout width, and other layout settings work
+✅ Logo and header image display correctly
+✅ Navigation between admin and storefront works
+✅ Empty states handle gracefully (no products)
+✅ All tests pass
+✅ Mobile responsive
+✅ No console errors
+
+## Future Enhancements (After Phase 9)
+
+1. **Products Context** - Add real product management
+2. **Orders & Checkout** - Implement cart persistence and checkout flow
+3. **Custom Domain Support** - Allow users to use their own domain
+4. **SEO Optimization** - Meta tags, structured data, sitemaps
+5. **Analytics Integration** - Track visitor behavior
+6. **Email Templates** - Order confirmations, shipping notifications
+7. **Multi-currency Support** - International selling
+8. **Advanced Shipping** - Shipping rates, zones, carriers
+9. **Discount Codes** - Promotional codes and sales
+10. **Customer Accounts** - Registration, order history, wishlists
+
+## Notes
+
+- This implementation maintains perfect parity with the theme editor preview
+- No JavaScript required for theming - purely CSS-based
+- Self-contained in SQLite database (no external dependencies)
+- Performance optimized with ETS caching
+- Ready for multi-shop support in future (architecture supports it)
+- Follows Phoenix/LiveView best practices throughout
+- Mobile-first, accessible, performant
+
+## Estimated Complexity
+
+- **Step 1** (Extract Components): Medium - Refactoring existing code
+- **Step 2** (LoadTheme Plug): Easy - Simple plug implementation
+- **Step 3** (Storefront Layout): Easy - Template creation
+- **Step 4** (Home Page): Medium - First full LiveView
+- **Step 5** (Collection Page): Medium - Filtering/sorting logic
+- **Step 6** (Product Page): Medium - Variant selection, gallery
+- **Step 7** (Cart Page): Medium - Cart operations
+- **Step 8** (Static Pages): Easy - Simple templates
+- **Step 9** (Cache Invalidation): Easy - Add function calls
+- **Step 10** (Cache Warming): Easy - Application startup hook
+- **Step 11** (Navigation Links): Easy - Add links
+- **Step 12** (Testing & Polish): Large - Comprehensive testing
+
+**Total Effort**: ~2-3 days for experienced Phoenix developer
+
+## Risk Assessment
+
+**Low Risk:**
+- CSS system is proven in preview pages
+- No database schema changes needed
+- No breaking changes to existing code
+- Can test each step independently
+
+**Medium Risk:**
+- Component extraction might miss edge cases
+- Cache invalidation timing could cause brief inconsistencies
+
+**Mitigation:**
+- Comprehensive testing after each step
+- Keep preview pages working during refactor
+- Add logging for cache operations
+- Test cache invalidation thoroughly
diff --git a/PHASE_9_PROGRESS.md b/PHASE_9_PROGRESS.md
new file mode 100644
index 0000000..dfebe0c
--- /dev/null
+++ b/PHASE_9_PROGRESS.md
@@ -0,0 +1,419 @@
+# Phase 9: Storefront Integration - Progress Tracker
+
+**Last Updated:** 2026-01-01
+**Status:** Not Started
+**Current Step:** Step 0 (Preparation)
+
+## Quick Reference
+
+- **Detailed Plan:** `.claude/plans/snuggly-forging-cat.md`
+- **Main Plan:** `PLAN.md` (lines 643-690)
+- **Spec:** `SPEC.md`
+
+## Progress Overview
+
+- [ ] Step 1: Extract Shared Components
+- [ ] Step 2: Create LoadTheme Plug
+- [ ] Step 3: Create Storefront Layout
+- [ ] Step 4: Create Home Page LiveView
+- [ ] Step 5: Create Collection Page LiveView
+- [ ] Step 6: Create Product Detail Page (PDP) LiveView
+- [ ] Step 7: Create Cart Page LiveView
+- [ ] Step 8: Create Static Pages (About, Contact, Error)
+- [ ] Step 9: Wire Up CSS Cache Invalidation
+- [ ] Step 10: Add Cache Warming on Application Start
+- [ ] Step 11: Update Navigation Links
+- [ ] Step 12: Testing and Polish
+
+**Completion:** 0/12 steps (0%)
+
+---
+
+## Step-by-Step Progress
+
+### Step 1: Extract Shared Components
+
+**Status:** ❌ Not Started
+**Git Commit:** `refactor: extract shared shop components from preview pages`
+
+**Goal:** Move reusable preview components to `components/shop/` for use in both admin and storefront
+
+**Files to Create (5):**
+- [ ] `lib/simpleshop_theme_web/components/shop/announcement_bar.ex`
+- [ ] `lib/simpleshop_theme_web/components/shop/header.ex`
+- [ ] `lib/simpleshop_theme_web/components/shop/footer.ex`
+- [ ] `lib/simpleshop_theme_web/components/shop/search_modal.ex`
+- [ ] `lib/simpleshop_theme_web/components/shop/product_card.ex`
+
+**Files to Modify (8):**
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages.ex` - Import new components
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex`
+
+**Validation:**
+- [ ] Run `mix test test/simpleshop_theme_web/live/theme_live_test.exs`
+- [ ] Visit `/admin/theme` - verify all 7 preview pages still render
+- [ ] No visual regressions
+
+**Notes:**
+
+---
+
+### Step 2: Create LoadTheme Plug
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add LoadTheme plug for public storefront`
+
+**Goal:** Create plug that loads theme settings and CSS for every public request
+
+**Files to Create (2):**
+- [ ] `lib/simpleshop_theme_web/plugs/load_theme.ex`
+- [ ] `test/simpleshop_theme_web/plugs/load_theme_test.exs`
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme_web/router.ex` - Add plug to `:browser` pipeline
+
+**Validation:**
+- [ ] Run `mix test test/simpleshop_theme_web/plugs/load_theme_test.exs`
+- [ ] Verify assigns available in requests
+- [ ] Verify CSS cached and reused
+
+**Notes:**
+
+---
+
+### Step 3: Create Storefront Layout
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add shop layout with theme CSS injection`
+
+**Goal:** Create dedicated layout for public storefront with theme CSS injection
+
+**Files to Create (1):**
+- [ ] `lib/simpleshop_theme_web/components/layouts/shop.html.heex`
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme_web/components/layouts.ex` - Add `shop/1` function
+
+**Validation:**
+- [ ] Inspect HTML - verify data attributes present
+- [ ] Verify CSS injection works
+- [ ] Layout compiles without errors
+
+**Notes:**
+
+---
+
+### Step 4: Create Home Page LiveView
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add public home page with theme support`
+
+**Goal:** Create public homepage LiveView using real/mock data
+
+**Files to Create (3):**
+- [ ] `lib/simpleshop_theme_web/live/shop_live/home.ex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/home.html.heex`
+- [ ] `test/simpleshop_theme_web/live/shop_live/home_test.exs`
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme_web/router.ex` - Add route: `live "/", ShopLive.Home, :index`
+
+**Validation:**
+- [ ] Visit `/` - verify homepage renders
+- [ ] Theme styles applied correctly
+- [ ] Announcement bar toggle works
+- [ ] Header layout variations work
+- [ ] Sticky header toggle works
+- [ ] Products display (mock data)
+
+**Notes:**
+
+---
+
+### Step 5: Create Collection Page LiveView
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add collection/product grid page with filtering`
+
+**Goal:** Create product collection/grid page with filtering and sorting
+
+**Files to Create (3):**
+- [ ] `lib/simpleshop_theme_web/live/shop_live/collection.ex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/collection.html.heex`
+- [ ] `test/simpleshop_theme_web/live/shop_live/collection_test.exs`
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme_web/router.ex` - Add routes for collections
+
+**Validation:**
+- [ ] Visit `/collections` and `/collections/:slug`
+- [ ] Filter sidebar works
+- [ ] Sort dropdown works
+- [ ] Grid columns (2, 3, 4) work
+- [ ] Card shadow setting respected
+- [ ] Hover image toggle works
+
+**Notes:**
+
+---
+
+### Step 6: Create Product Detail Page (PDP) LiveView
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add product detail page with gallery and variants`
+
+**Goal:** Create individual product page with gallery, details, add to cart
+
+**Files to Create (3):**
+- [ ] `lib/simpleshop_theme_web/live/shop_live/product.ex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/product.html.heex`
+- [ ] `test/simpleshop_theme_web/live/shop_live/product_test.exs`
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme_web/router.ex` - Add route: `live "/products/:slug"`
+
+**Validation:**
+- [ ] Visit `/products/:slug`
+- [ ] Variant selection works
+- [ ] Image gallery works
+- [ ] Trust badges show/hide based on setting
+- [ ] Reviews show/hide based on setting
+- [ ] Related products show/hide based on setting
+- [ ] Add to cart shows flash
+- [ ] Gallery position (left/right) works
+
+**Notes:**
+
+---
+
+### Step 7: Create Cart Page LiveView
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add shopping cart page with line items`
+
+**Goal:** Create shopping cart page with line items and checkout
+
+**Files to Create (3):**
+- [ ] `lib/simpleshop_theme_web/live/shop_live/cart.ex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/cart.html.heex`
+- [ ] `test/simpleshop_theme_web/live/shop_live/cart_test.exs`
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme_web/router.ex` - Add route: `live "/cart"`
+
+**Validation:**
+- [ ] Visit `/cart`
+- [ ] Quantity update works
+- [ ] Remove item works
+- [ ] Price calculations correct
+- [ ] Empty cart state works
+- [ ] Checkout button shows flash
+- [ ] Button style setting respected
+
+**Notes:**
+
+---
+
+### Step 8: Create Static Pages (About, Contact, Error)
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add static pages (about, contact, 404) with theme support`
+
+**Goal:** Create remaining static pages
+
+**Files to Create (6):**
+- [ ] `lib/simpleshop_theme_web/live/shop_live/about.ex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/about.html.heex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/contact.ex`
+- [ ] `lib/simpleshop_theme_web/live/shop_live/contact.html.heex`
+- [ ] `test/simpleshop_theme_web/live/shop_live/about_test.exs`
+- [ ] `test/simpleshop_theme_web/live/shop_live/contact_test.exs`
+
+**Files to Modify (2):**
+- [ ] `lib/simpleshop_theme_web/router.ex` - Add routes
+- [ ] `lib/simpleshop_theme_web/controllers/error_html.ex` - Add 404 template (or create if missing)
+
+**Validation:**
+- [ ] Visit `/about` - page renders
+- [ ] Visit `/contact` - form works
+- [ ] Visit invalid URL - 404 shows with theme
+- [ ] All pages respect theme settings
+
+**Notes:**
+
+---
+
+### Step 9: Wire Up CSS Cache Invalidation
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add CSS cache invalidation on theme save`
+
+**Goal:** Ensure CSS cache invalidates when theme settings saved
+
+**Files to Modify (2):**
+- [ ] `lib/simpleshop_theme/settings.ex` - Add cache invalidation to `update_theme_settings/1`
+- [ ] `lib/simpleshop_theme_web/live/theme_live/index.ex` - Ensure save triggers invalidation
+
+**Validation:**
+- [ ] Change theme in admin
+- [ ] Save theme
+- [ ] Visit storefront
+- [ ] Verify changes reflected immediately
+- [ ] Check cache being used
+
+**Notes:**
+
+---
+
+### Step 10: Add Cache Warming on Application Start
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add CSS cache warming on application startup`
+
+**Goal:** Pre-generate and cache theme CSS when app starts
+
+**Files to Modify (1):**
+- [ ] `lib/simpleshop_theme/application.ex` - Add cache warming after supervisor start
+
+**Validation:**
+- [ ] Restart application
+- [ ] Check logs for "Theme CSS cache warmed successfully"
+- [ ] Visit storefront immediately (should be fast)
+- [ ] No DB queries for CSS on first request
+
+**Notes:**
+
+---
+
+### Step 11: Update Navigation Links
+
+**Status:** ❌ Not Started
+**Git Commit:** `feat: add navigation between admin and storefront`
+
+**Goal:** Connect theme editor to storefront and vice versa
+
+**Files to Modify (2):**
+- [ ] `lib/simpleshop_theme_web/components/shop/header.ex` - Add admin link when authenticated
+- [ ] `lib/simpleshop_theme_web/live/theme_live/index.html.heex` - Add "View Shop" link
+
+**Validation:**
+- [ ] When logged in on storefront, "Edit Theme" link appears
+- [ ] Click link - navigates to theme editor
+- [ ] In theme editor, click "View Shop" link
+- [ ] Opens storefront in new tab
+
+**Notes:**
+
+---
+
+### Step 12: Testing and Polish
+
+**Status:** ❌ Not Started
+**Git Commit:** `test: add comprehensive tests and polish for Phase 9`
+
+**Goal:** Comprehensive testing and UX improvements
+
+**Testing Areas:**
+- [ ] All storefront LiveViews tested
+- [ ] Plug behavior tested
+- [ ] Cache invalidation flow tested
+- [ ] Theme application across all pages tested
+- [ ] Responsive behavior tested
+
+**Polish Areas:**
+- [ ] Loading states added
+- [ ] Error handling complete
+- [ ] Performance optimized
+- [ ] Accessibility checked
+- [ ] Mobile tested
+- [ ] Cross-browser tested
+
+**Validation:**
+- [ ] Run `mix test` - all tests pass
+- [ ] No console errors
+- [ ] Good Lighthouse scores
+- [ ] Responsive on all devices
+
+**Notes:**
+
+---
+
+## Git Commit Log
+
+Track all commits made during Phase 9 implementation:
+
+```
+# Commits will be added here as we progress
+# Format: [YYYY-MM-DD HH:MM] <commit-hash> <commit-message>
+```
+
+---
+
+## Issues / Blockers
+
+Track any issues encountered:
+
+- None yet
+
+---
+
+## Future Enhancements (Post-Phase 9)
+
+1. Products Context - Add real product management
+2. Orders & Checkout - Cart persistence and checkout flow
+3. Custom Domain Support
+4. SEO Optimization
+5. Analytics Integration
+6. Email Templates
+7. Multi-currency Support
+8. Advanced Shipping
+9. Discount Codes
+10. Customer Accounts
+
+---
+
+## Context Preservation
+
+**Key Architectural Decisions:**
+- CSS applied via `.shop-root` class with data attributes
+- Same three-layer CSS system as theme editor
+- LoadTheme plug provides `@theme_settings` and `@generated_css` assigns
+- CSS cached in ETS via `CSSCache` GenServer
+- Preview data used until real Products context exists
+- Shared components in `components/shop/` directory
+
+**Critical Files:**
+- Theme editor: `lib/simpleshop_theme_web/live/theme_live/index.ex`
+- CSS generator: `lib/simpleshop_theme/theme/css_generator.ex`
+- Settings context: `lib/simpleshop_theme/settings.ex`
+- Preview data: `lib/simpleshop_theme/theme/preview_data.ex`
+
+**Current State (as of last update):**
+- Theme editor fully functional at `/admin/theme`
+- 8 presets working with real-time preview
+- All customization options implemented
+- Logo/header uploads with BLOB storage working
+- SVG recoloring functional
+- No public storefront routes yet (Phase 9 not started)
+
+---
+
+## How to Use This File
+
+1. **Starting a new step:** Update the step status to "🚧 In Progress"
+2. **Completing files:** Check off files as created/modified
+3. **Finishing a step:**
+   - Mark step as "✅ Complete"
+   - Update completion percentage
+   - Make git commit with specified message
+   - Add commit to Git Commit Log section
+4. **Encountering issues:** Add to Issues/Blockers section
+5. **Taking notes:** Add to Notes field for each step
+
+**For new conversations:** Read this file first to understand current progress and context.
diff --git a/PLAN.md b/PLAN.md
index 1e7e274..d0aebd2 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -170,9 +170,38 @@ test/simpleshop_theme_web/
     └── theme_live_test.exs      # LiveView integration tests
 ```
 
-## Implementation Phases
+## Implementation Status
 
-### Phase 1: Database Foundation ✓
+### Completed Phases (1-8): ✅
+- ✅ Phase 1: Database Foundation
+- ✅ Phase 2: CSS Architecture
+- ✅ Phase 3: Smart Preview Data
+- ✅ Phase 4: Theme LiveView (Basic)
+- ✅ Phase 5: Preview Pages
+- ✅ Phase 6: Customization Options
+- ✅ Phase 6.5: Fix Theme Visual Application
+- ✅ Phase 7: File Uploads (Logo & Header)
+- ✅ Phase 8: Persistence & Polish
+
+### Current Phase: Phase 9 - Storefront Integration 🚧
+
+**See detailed Phase 9 plan at:** `.claude/plans/snuggly-forging-cat.md`
+
+**Phase 9 Goal:** Apply the theme system to the actual public-facing storefront
+
+**Key deliverables:**
+- Public storefront routes (`/`, `/products/:slug`, `/collections`, `/cart`, etc.)
+- Storefront LiveViews using real/mock data
+- LoadTheme plug to inject theme settings and CSS
+- CSS cache integration for performance
+- Navigation between admin theme editor and public shop
+- All 7 pages working on storefront (home, collection, product, cart, about, contact, error)
+
+---
+
+## Implementation Phases (Details)
+
+### Phase 1: Database Foundation ✅
 **Goal:** Set up Settings and Media models for site-wide configuration
 
 **Steps:**
@@ -611,45 +640,53 @@ The demo HTML uses data attributes (`data-mood="warm"`, `data-typography="editor
 
 ---
 
-### Phase 9: Storefront Integration ✓
+### Phase 9: Storefront Integration 🚧
 **Goal:** Apply theme to actual public-facing shop
 
-**Steps:**
-1. Create public shop routes in router:
-   - `get "/:shop_slug", ShopController, :show` (shop homepage)
-   - Or use domain-based routing for custom domains
-2. Create `lib/simpleshop_theme_web/live/shop_live/` directory for storefront LiveViews
-3. Create storefront page templates that respect theme settings:
-   - Use same CSS system as preview
-   - Load theme CSS from cache
-   - Render actual products (when they exist) or empty states
-4. Create `lib/simpleshop_theme_web/plugs/load_shop_theme.ex`:
-   - Load shop by domain/slug
-   - Load theme CSS from cache
-   - Assign to `conn.assigns.theme_css`
-5. Add theme CSS to root layout for storefront
-6. Implement proper caching headers for theme CSS
-7. Handle theme CSS cache warming on app startup
+**Status:** Ready to implement - See detailed plan in `.claude/plans/snuggly-forging-cat.md`
 
-**Files to create:**
-- `lib/simpleshop_theme_web/live/shop_live/*` (storefront pages)
-- `lib/simpleshop_theme_web/plugs/load_theme.ex`
-- `test/simpleshop_theme_web/live/shop_live_test.exs`
-- `test/simpleshop_theme_web/plugs/load_theme_test.exs`
+**High-level overview:**
+1. Extract shared components from preview pages (header, footer, product card, etc.)
+2. Create LoadTheme plug to inject theme settings and CSS into all public requests
+3. Create dedicated shop layout with `.shop-root` class and data attributes
+4. Build storefront LiveViews for all pages:
+   - Home (`/`)
+   - Collection (`/collections/:slug`)
+   - Product Detail (`/products/:slug`)
+   - Cart (`/cart`)
+   - About (`/about`)
+   - Contact (`/contact`)
+   - Error (404 page)
+5. Wire up CSS cache invalidation when theme is saved
+6. Add cache warming on application startup
+7. Add navigation links between admin and storefront
+8. Comprehensive testing and polish
 
-**Files to modify:**
-- `lib/simpleshop_theme_web/router.ex` - Public shop routes
-- `lib/simpleshop_theme_web/components/layouts.ex` - Theme CSS injection
-- Root layout template
+**Key files to create (23 files):**
+- 5 shared component modules in `components/shop/`
+- 1 LoadTheme plug
+- 1 shop layout template
+- 6 storefront LiveView modules + templates
+- 1 error page template
+- 6 test files
 
-**Git commit:** `feat: integrate theme system with public storefront`
+**Key files to modify (9 files):**
+- Router (add public routes and plug)
+- Settings context (add cache invalidation)
+- Application (add cache warming)
+- Theme editor (add "View Shop" link)
+- Preview pages (use shared components)
 
-**Validation:**
-- Run tests: `mix test`
-- Visit public shop URL, verify theme applies correctly
-- Change theme in admin, verify storefront updates
-- Test CSS cache invalidation
-- Verify performance with caching headers
+**Detailed implementation plan:** See `.claude/plans/snuggly-forging-cat.md` for 12-step implementation guide with code examples, validation steps, and architectural decisions.
+
+**Git commit strategy:** Commit after each major step (components extraction, plug creation, each LiveView, etc.)
+
+**Validation approach:**
+- Test theme editor still works after component extraction
+- Test each storefront page individually as built
+- Verify CSS cache invalidation flow
+- Test navigation between admin and storefront
+- Comprehensive testing in Step 12
 
 ---