diff --git a/lib/simpleshop_theme_web.ex b/lib/simpleshop_theme_web.ex
index 26bb6d8..f02d6f0 100644
--- a/lib/simpleshop_theme_web.ex
+++ b/lib/simpleshop_theme_web.ex
@@ -86,6 +86,8 @@ defmodule SimpleshopThemeWeb do
       import Phoenix.HTML
       # Core UI components
       import SimpleshopThemeWeb.CoreComponents
+      # Shop UI components
+      import SimpleshopThemeWeb.ShopComponents
 
       # Common modules used in templates
       alias Phoenix.LiveView.JS
diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex
new file mode 100644
index 0000000..a962806
--- /dev/null
+++ b/lib/simpleshop_theme_web/components/shop_components.ex
@@ -0,0 +1,41 @@
+defmodule SimpleshopThemeWeb.ShopComponents do
+  @moduledoc """
+  Provides shop/storefront UI components.
+
+  These components are shared between the theme preview system and
+  the public storefront pages. They render using CSS custom properties
+  defined by the theme settings.
+  """
+  use Phoenix.Component
+
+  @doc """
+  Renders the announcement bar.
+
+  The bar displays promotional messaging at the top of the page.
+  It uses CSS custom properties for theming.
+
+  ## Attributes
+
+  * `theme_settings` - Required. The theme settings map.
+  * `message` - Optional. The announcement message to display.
+    Defaults to "Free delivery on orders over £40".
+
+  ## Examples
+
+      <.announcement_bar theme_settings={@theme_settings} />
+      <.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
+  """
+  attr :theme_settings, :map, required: true
+  attr :message, :string, default: "Free delivery on orders over £40"
+
+  def announcement_bar(assigns) do
+    ~H"""
+    <div
+      class="announcement-bar"
+      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
+    >
+      <p style="margin: 0;">{@message}</p>
+    </div>
+    """
+  end
+end
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex
index 4bfa30a..ef89f87 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex
@@ -1,5 +1,6 @@
 defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
   use Phoenix.Component
+  import SimpleshopThemeWeb.ShopComponents
 
   embed_templates "preview_pages/*"
 
@@ -14,22 +15,6 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
     """
   end
 
-  @doc """
-  Renders the announcement bar.
-  """
-  attr :theme_settings, :map, required: true
-
-  def announcement_bar(assigns) do
-    ~H"""
-    <div
-      class="announcement-bar"
-      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
-    >
-      <p style="margin: 0;">Free delivery on orders over £40</p>
-    </div>
-    """
-  end
-
   @doc """
   Renders the shop header with logo based on logo_mode setting.
   """
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
index 758aae0..0aeecff 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
index 0a5db6a..28b34ab 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
index 5a6b818..9200da5 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
index ead2566..7b372f1 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
index e92ce73..3127486 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
index 84ec68b..0021bfd 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
index f7eb96e..9c446b3 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
@@ -7,7 +7,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->