fix: adjust content and demo to be UK-centric

RECENT_CHANGES.md

@@ -0,0 +1,75 @@
+Summary of Improvements
+
+I've successfully implemented all four requested improvements to make the SimpleShop Theme Studio more aligned with the demo file and UK-centric:
+1. ✅ Made all links and buttons functional
+
+Updated components:
+
+    Header navigation (preview_pages.ex): Home, Shop, About, and Contact links now trigger page navigation
+    Product cards (home.html.heex, collection.html.heex): Clicking any product card navigates to the PDP page
+    Footer links (preview_pages.ex): All footer navigation links are now functional
+    CTA buttons (home.html.heex): "Shop the collection" and "View all products" buttons navigate to collection page
+    About link (home.html.heex): "Learn more about the studio" link navigates to about page
+
+All links now use phx-click="change_preview_page" with phx-value-page to switch between the 7 preview pages seamlessly.
+2. ✅ Implemented floating cart drawer/sidebar
+
+New component added (preview_pages.ex:229-320):
+
+    Created cart_drawer/1 function component matching the demo's design exactly
+    Includes cart header with "Your basket" title
+    Displays cart items with images, names, variants, and prices
+    Shows subtotal (£72.00)
+    Checkout button and "View basket" link
+    Close button and overlay with click-to-close functionality
+    Smooth slide-in animation from the right
+    Added to all 7 preview pages (home, collection, pdp, cart, about, contact, error)
+
+Cart drawer data (preview_data.ex:34-49):
+
+    Added cart_drawer_items/0 function with UK-themed products:
+        Autumn Fern (A4 / Unframed) - £24.00
+        Wild Roses (A3 / Oak frame) - £48.00
+
+3. ✅ Added cart count badge to cart icon
+
+Updated header (preview_pages.ex:98-112):
+
+    Added circular badge showing "2" items
+    Badge styled with accent color background
+    Positioned at top-right of cart icon
+    Font size: 11px, white text, rounded pill shape
+    Matches the demo implementation exactly
+
+Cart button functionality:
+
+    Clicking the cart icon now opens the cart drawer
+    Uses Phoenix.LiveView.JS.add_class to toggle visibility
+
+4. ✅ Updated all content to UK English and currency
+
+Language changes:
+
+    "Shopping Cart" → "Your basket"
+    "Add to Cart" → "Add to basket"
+    "Free Shipping" → "Free Delivery"
+    "Shipping" (in fees) → "Delivery"
+    "You May Also Like" → "You might also like"
+    Footer: "Shipping" → "Delivery"
+
+Currency changes:
+
+    All product prices: $ → £ (across all 7 preview pages)
+    Announcement bar: "$50" → "£40"
+    Free delivery threshold: "$50" → "£40"
+    Cart delivery fee: "$10.00" → "£8.00"
+    Cart tax: "$8.50" (Tax) → "£7.20" (VAT 20%)
+    Cart drawer subtotal: "$72.00" → "£72.00"
+
+Files modified:
+
+    lib/simpleshop_theme_web/live/theme_live/preview_pages.ex - Header, footer, announcement bar, new cart drawer component
+    lib/simpleshop_theme/theme/preview_data.ex - Added cart drawer items function
+    All 7 preview page files (home, collection, pdp, cart, about, contact, error) - Currency symbols and cart drawer component
+
+The implementation now closely matches the demo.html file functionality while being fully localized for the UK market with British English tone and £ currency throughout.

lib/simpleshop_theme/theme/preview_data.ex

@@ -28,6 +28,26 @@ defmodule SimpleshopTheme.Theme.PreviewData do
     mock_cart_items()
   end
 
+  @doc """
+  Returns cart drawer items formatted for the cart drawer component.
+  """
+  def cart_drawer_items do
+    [
+      %{
+        name: "Autumn Fern",
+        variant: "A4 / Unframed",
+        price: "£24.00",
+        image: "https://picsum.photos/seed/fern/120/120"
+      },
+      %{
+        name: "Wild Roses",
+        variant: "A3 / Oak frame",
+        price: "£48.00",
+        image: "https://picsum.photos/seed/roses/120/120"
+      }
+    ]
+  end
+
   @doc """
   Returns testimonials for preview.
 

lib/simpleshop_theme_web/live/theme_live/preview_pages.ex

@@ -14,7 +14,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
       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: 0.875rem;"
     >
-      <p style="margin: 0;">Free shipping on orders over $50</p>
+      <p style="margin: 0;">Free delivery on orders over £40</p>
     </div>
     """
   end
@@ -76,10 +76,10 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
       </div>
 
       <nav class="shop-nav hidden md:flex" style="gap: 1.5rem; position: relative; z-index: 1;">
-        <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+        <a href="#" phx-click="change_preview_page" phx-value-page="home" style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Home</a>
-        <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+        <a href="#" phx-click="change_preview_page" phx-value-page="collection" style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Shop</a>
-        <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+        <a href="#" phx-click="change_preview_page" phx-value-page="about" style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">About</a>
-        <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+        <a href="#" phx-click="change_preview_page" phx-value-page="contact" style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Contact</a>
       </nav>
 
       <div class="shop-actions flex items-center gap-1" style="position: relative; z-index: 1;">
@@ -97,8 +97,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
         </button>
         <button
           type="button"
-          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
+          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
           style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
+          phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
           aria-label="Cart"
         >
           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -106,7 +107,8 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
             <line x1="3" y1="6" x2="21" y2="6"></line>
             <path d="M16 10a4 4 0 01-8 0"></path>
           </svg>
-          <span class="sr-only">Cart (0)</span>
+          <span class="cart-count" style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;">2</span>
+          <span class="sr-only">Cart (2)</span>
         </button>
       </div>
     </header>
@@ -169,9 +171,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
                 Shop
               </h4>
               <ul class="space-y-2 text-sm">
-                <li><a href="#" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">All products</a></li>
+                <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">All products</a></li>
-                <li><a href="#" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">New arrivals</a></li>
+                <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">New arrivals</a></li>
-                <li><a href="#" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Best sellers</a></li>
+                <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Best sellers</a></li>
               </ul>
             </div>
             <div>
@@ -179,9 +181,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
                 Help
               </h4>
               <ul class="space-y-2 text-sm">
-                <li><a href="#" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Shipping</a></li>
+                <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Delivery</a></li>
-                <li><a href="#" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Returns</a></li>
+                <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Returns</a></li>
-                <li><a href="#" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Contact</a></li>
+                <li><a href="#" phx-click="change_preview_page" phx-value-page="contact" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Contact</a></li>
               </ul>
             </div>
           </div>
@@ -224,6 +226,99 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
     """
   end
 
+  @doc """
+  Renders the cart drawer (floating sidebar).
+  """
+  attr :cart_items, :list, default: []
+
+  def cart_drawer(assigns) do
+    ~H"""
+    <!-- Cart Drawer -->
+    <div
+      id="cart-drawer"
+      class="cart-drawer"
+      style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
+    >
+      <div class="cart-drawer-header" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);">
+        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--p-text-lg); color: var(--t-text-primary); margin: 0;">Your basket</h2>
+        <button
+          type="button"
+          class="cart-drawer-close"
+          style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
+          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+          aria-label="Close cart"
+        >
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
+        <%= for item <- @cart_items do %>
+          <div class="cart-drawer-item" style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);">
+            <div class="cart-drawer-item-image" style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}></div>
+            <div class="cart-drawer-item-details" style="flex: 1;">
+              <h3 style="font-family: var(--t-font-body); font-size: var(--p-text-sm); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
+                <%= item.name %>
+              </h3>
+              <p style="font-family: var(--t-font-body); font-size: var(--p-text-xs); color: var(--t-text-tertiary); margin: 0;">
+                <%= item.variant %>
+              </p>
+              <p class="cart-drawer-item-price" style="color: var(--t-text-primary); font-weight: 500; margin-top: 4px; font-size: var(--p-text-sm);">
+                <%= item.price %>
+              </p>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="cart-drawer-footer" style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);">
+        <div class="cart-drawer-total" style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--p-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;">
+          <span>Subtotal</span>
+          <span>£72.00</span>
+        </div>
+        <button
+          type="submit"
+          class="cart-drawer-checkout w-full mb-2"
+          style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition-all; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
+        >
+          Checkout
+        </button>
+        <a
+          href="#"
+          phx-click="change_preview_page"
+          phx-value-page="cart"
+          class="cart-drawer-link"
+          style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--p-text-sm); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
+        >
+          View basket
+        </a>
+      </div>
+    </div>
+
+    <!-- Cart Drawer Overlay -->
+    <div
+      id="cart-drawer-overlay"
+      class="cart-drawer-overlay"
+      style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
+      phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+    >
+    </div>
+
+    <style>
+      .cart-drawer.open {
+        right: 0 !important;
+      }
+      .cart-drawer-overlay.open {
+        opacity: 1 !important;
+        visibility: visible !important;
+      }
+    </style>
+    """
+  end
+
   @doc """
   Renders the search modal overlay.
   """

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

@@ -62,5 +62,8 @@
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
   <!-- Search Modal -->
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>

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

@@ -9,7 +9,7 @@
 
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <h1 class="text-3xl md:text-4xl font-bold mb-8" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
-      Shopping Cart
+      Your basket
     </h1>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
@@ -80,18 +80,18 @@
               </span>
             </div>
             <div class="flex justify-between">
-              <span style="color: var(--t-text-secondary);">Shipping</span>
+              <span style="color: var(--t-text-secondary);">Delivery</span>
-              <span style="color: var(--t-text-primary);">$10.00</span>
+              <span style="color: var(--t-text-primary);">£8.00</span>
             </div>
             <div class="flex justify-between">
-              <span style="color: var(--t-text-secondary);">Tax</span>
+              <span style="color: var(--t-text-secondary);">VAT (20%)</span>
-              <span style="color: var(--t-text-primary);">$8.50</span>
+              <span style="color: var(--t-text-primary);">£7.20</span>
             </div>
             <div class="border-t pt-3" style="border-color: var(--t-border-default);">
               <div class="flex justify-between text-lg">
                 <span class="font-semibold" style="color: var(--t-text-primary);">Total</span>
                 <span class="font-bold" style="color: var(--t-text-primary);">
-                  $<%= (Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 + 10.00 + 8.50) |> Float.round(2) %>
+                  £<%= (Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 + 8.00 + 7.20) |> Float.round(2) %>
                 </span>
               </div>
             </div>
@@ -119,5 +119,8 @@
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
   <!-- Search Modal -->
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>

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

@@ -114,8 +114,10 @@
         ]}>
           <%= for product <- @preview_data.products do %>
             <div
+              phx-click="change_preview_page"
+              phx-value-page="pdp"
               class="product-card group overflow-hidden transition-all"
-              style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
+              style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card); cursor: pointer;"
             >
               <div class="product-image-container aspect-square bg-gray-200 overflow-hidden relative">
                 <!-- Product Badge -->
@@ -153,14 +155,14 @@
                   <div>
                     <%= if product.on_sale do %>
                       <span class="text-lg font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
-                        $<%= product.price / 100 %>
+                        £<%= product.price / 100 %>
                       </span>
                       <span class="text-sm line-through ml-2" style="color: var(--t-text-tertiary);">
-                        $<%= product.compare_at_price / 100 %>
+                        £<%= product.compare_at_price / 100 %>
                       </span>
                     <% else %>
                       <span class="text-lg font-bold" style="color: var(--t-text-primary);">
-                        $<%= product.price / 100 %>
+                        £<%= product.price / 100 %>
                       </span>
                     <% end %>
                   </div>
@@ -185,5 +187,8 @@
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
   <!-- Search Modal -->
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>

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

@@ -134,5 +134,8 @@
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
   <!-- Search Modal -->
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>

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

@@ -55,7 +55,7 @@
               <%= product.name %>
             </p>
             <p class="text-xs" style="color: var(--t-text-secondary);">
-              $<%= product.price / 100 %>
+              £<%= product.price / 100 %>
             </p>
           </div>
         </div>
@@ -68,5 +68,8 @@
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
   <!-- Search Modal -->
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>

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

@@ -16,8 +16,10 @@
       Original botanical illustrations, printed on premium archival paper. Each piece brings a little bit of the outside, inside.
     </p>
     <button
+      phx-click="change_preview_page"
+      phx-value-page="collection"
       class="px-6 py-3 font-medium transition-all"
-      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
+      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); cursor: pointer; border: none;"
     >
       Shop the collection
     </button>
@@ -27,7 +29,7 @@
   <section style="padding: var(--space-xl) var(--space-lg); background-color: var(--t-surface-base);">
     <nav class="grid grid-cols-3 gap-4 max-w-3xl mx-auto" aria-label="Product categories">
       <%= for category <- Enum.take(@preview_data.categories, 3) do %>
-        <a href="#" class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5" style="text-decoration: none;">
+        <a href="#" phx-click="change_preview_page" phx-value-page="collection" class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5" style="text-decoration: none; cursor: pointer;">
           <div
             class="w-24 h-24 rounded-full bg-gray-200 bg-cover bg-center transition-transform hover:scale-105"
             style={"background-image: url('#{category.image_url}');"}
@@ -57,8 +59,10 @@
     ]}>
       <%= for product <- Enum.take(@preview_data.products, 4) do %>
         <div
+          phx-click="change_preview_page"
+          phx-value-page="pdp"
           class="product-card group overflow-hidden transition-all hover:-translate-y-1"
-          style="background-color: var(--t-surface-raised); border-radius: var(--t-radius-card);"
+          style="background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); cursor: pointer;"
         >
           <div class="product-image-container aspect-square bg-gray-200 overflow-hidden relative">
             <%= if product[:is_new] do %>
@@ -92,9 +96,9 @@
             </h3>
             <p class="text-sm" style="color: var(--t-text-secondary);">
               <%= if product.on_sale do %>
-                <span class="line-through mr-1" style="color: var(--t-text-tertiary);">$<%= product.compare_at_price / 100 %></span>
+                <span class="line-through mr-1" style="color: var(--t-text-tertiary);">£<%= product.compare_at_price / 100 %></span>
               <% end %>
-              $<%= product.price / 100 %>
+              £<%= product.price / 100 %>
             </p>
           </div>
         </div>
@@ -103,8 +107,10 @@
 
     <div class="text-center mt-8">
       <button
+        phx-click="change_preview_page"
+        phx-value-page="collection"
         class="px-6 py-3 font-medium transition-all"
-        style="background-color: transparent; color: var(--t-text-primary); border: 1px solid var(--t-text-primary); border-radius: var(--t-radius-button);"
+        style="background-color: transparent; color: var(--t-text-primary); border: 1px solid var(--t-text-primary); border-radius: var(--t-radius-button); cursor: pointer;"
       >
         View all products
       </button>
@@ -126,8 +132,10 @@
       </p>
       <a
         href="#"
+        phx-click="change_preview_page"
+        phx-value-page="about"
         class="text-sm font-medium transition-colors"
-        style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none;"
+        style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none; cursor: pointer;"
       >
         Learn more about the studio →
       </a>
@@ -137,6 +145,9 @@
   <!-- Footer -->
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <!-- Search Modal -->
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>

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

@@ -52,17 +52,17 @@
         <div class="flex items-center gap-4 mb-6">
           <%= if product.on_sale do %>
             <span class="text-3xl font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
-              $<%= product.price / 100 %>
+              £<%= product.price / 100 %>
             </span>
             <span class="text-xl line-through" style="color: var(--t-text-tertiary);">
-              $<%= product.compare_at_price / 100 %>
+              £<%= product.compare_at_price / 100 %>
             </span>
             <span class="px-2 py-1 text-sm font-bold text-white rounded" style="background-color: var(--t-sale-color);">
               SAVE <%= round((product.compare_at_price - product.price) / product.compare_at_price * 100) %>%
             </span>
           <% else %>
             <span class="text-3xl font-bold" style="color: var(--t-text-primary);">
-              $<%= product.price / 100 %>
+              £<%= product.price / 100 %>
             </span>
           <% end %>
         </div>
@@ -111,10 +111,11 @@
 
         <!-- Add to Cart -->
         <button
+          phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
           class="w-full px-6 py-4 text-lg font-semibold transition-all mb-4"
-          style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
+          style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); cursor: pointer; border: none;"
         >
-          Add to Cart
+          Add to basket
         </button>
 
         <!-- Features -->
@@ -124,8 +125,8 @@
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
             </svg>
             <div>
-              <p class="font-semibold" style="color: var(--t-text-primary);">Free Shipping</p>
+              <p class="font-semibold" style="color: var(--t-text-primary);">Free Delivery</p>
-              <p class="text-sm" style="color: var(--t-text-secondary);">On orders over $50</p>
+              <p class="text-sm" style="color: var(--t-text-secondary);">On orders over £40</p>
             </div>
           </div>
           <div class="flex items-start gap-3">
@@ -144,7 +145,7 @@
     <!-- Related Products -->
     <div>
       <h2 class="text-2xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
-        You May Also Like
+        You might also like
       </h2>
 
       <div class="grid gap-6 grid-cols-2 md:grid-cols-4">
@@ -178,5 +179,8 @@
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />
 
   <!-- Search Modal -->
+  <!-- Cart Drawer -->
+  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+
   <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
 </div>