fix: update demo content, fix broken links, and add cart item product links

- Replace all placeholder text with demo-aware copy that signals "replace me"
- Update USPs for POD accuracy (made to order, quality materials)
- Fix broken footer links (/delivery, /returns → /contact)
- Add real platform URLs to social icons with target="_blank"
- Make cart item images and names link to product pages
- Switch about page image to responsive_image component
- Add missing cart_status to collection page cart drawer
- Unify search hint text across all page templates

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

lib/simpleshop_theme/cart.ex

@@ -126,6 +126,7 @@ defmodule SimpleshopTheme.Cart do
           variant ->
             %{
               variant_id: variant.id,
+              product_id: variant.product.id,
               name: variant.product.title,
               variant: format_variant_options(variant.options),
               price: variant.price,

lib/simpleshop_theme/theme/preview_data.ex

@@ -39,19 +39,21 @@ defmodule SimpleshopTheme.Theme.PreviewData do
     [
       %{
         variant_id: "preview-1",
+        product_id: "preview-product-1",
         name: "Mountain Sunrise Art Print",
         variant: "12″ x 18″ / Matte",
         price: 2400,
         quantity: 1,
-        image: "/mockups/mountain-sunrise-print-1.jpg"
+        image: "/mockups/mountain-sunrise-print-1-400.webp"
       },
       %{
         variant_id: "preview-2",
+        product_id: "preview-product-2",
         name: "Fern Leaf Mug",
         variant: "11oz / White",
         price: 1499,
         quantity: 2,
-        image: "/mockups/fern-leaf-mug-1.jpg"
+        image: "/mockups/fern-leaf-mug-1-400.webp"
       }
     ]
   end
@@ -74,19 +76,19 @@ defmodule SimpleshopTheme.Theme.PreviewData do
     [
       %{
         rating: 5,
-        title: "Absolutely beautiful",
+        title: "Sample review – five stars",
         body:
-          "The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room.",
+          "This is an example review for the demo store. Real reviews from your customers will appear here once you start getting orders.",
-        author: "Sarah M.",
+        author: "Demo Customer",
         date: "2 weeks ago",
         verified: true
       },
       %{
         rating: 4,
-        title: "Great gift",
+        title: "Sample review – four stars",
         body:
-          "Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again.",
+          "Another example review to show how the layout handles multiple entries. You can customise the review section in the theme settings.",
-        author: "James T.",
+        author: "Demo Shopper",
         date: "1 month ago",
         verified: true
       }
@@ -103,31 +105,31 @@ defmodule SimpleshopTheme.Theme.PreviewData do
       %{
         type: :lead,
         text:
-          "I'm Emma, a nature photographer based in the UK. What started as weekend walks with my camera has grown into something I never expected – a little shop where I can share my favourite captures with others."
+          "This is a sample about page for your SimpleShop store. You're reading it as Robin, a fictional nature photographer – but this is where your own story goes."
       },
       %{
         type: :paragraph,
         text:
-          "Every design in this shop comes from my own photography. Whether it's early morning mist over the hills, autumn leaves in the local woods, or the quiet beauty of wildflower meadows, I'm drawn to the peaceful moments that nature offers."
+          "Tell your customers who you are and what inspires your work. Maybe it started as a hobby that grew into something bigger, or maybe you've been creating for years. Either way, this is the place to share it."
       },
       %{
         type: :paragraph,
         text:
-          "I work with quality print partners to bring these images to life on products you can actually use and enjoy – from art prints for your walls to mugs for your morning tea."
+          "In Robin's version, every design comes from their own photography – early morning mist over the hills, autumn leaves in the local woods, the quiet beauty of wildflower meadows. Your story will be different, and that's the point."
       },
       %{type: :heading, text: "Quality you can trust"},
       %{
         type: :paragraph,
         text:
-          "I've carefully chosen print partners who share my commitment to quality. Every product is made to order using premium materials and printing techniques that ensure vibrant colours and lasting quality."
+          "This section is a good place to talk about your products and what makes them worth buying. Print on demand means every item is made to order using quality materials and printing techniques – tell your customers about that."
       },
       %{type: :heading, text: "Printed sustainably"},
       %{
         type: :paragraph,
         text:
-          "Because each item is printed on demand, there's no waste from unsold stock. My print partners use eco-friendly inks where possible, and products are shipped directly to you to minimise unnecessary handling."
+          "And here's where you can mention anything else that matters to you – sustainability, packaging, your creative process, whatever sets your shop apart. No unsold stock means no waste, and your customers will appreciate knowing that."
       },
-      %{type: :closing, text: "Thank you for visiting. It means a lot that you're here."}
+      %{type: :closing, text: "Thanks for checking out the demo. Make this page your own."}
     ]
   end
 
@@ -790,49 +792,49 @@ defmodule SimpleshopTheme.Theme.PreviewData do
     [
       %{
         id: "1",
-        author: "Sarah M.",
+        author: "Sample Customer A",
         content:
-          "The print quality is absolutely stunning - colours are exactly as shown online. My living room looks so much better now!",
+          "This is sample testimonial text for the demo store. Your real customer quotes will appear here – try to include specific details about what they loved.",
         rating: 5,
         date: "2025-01-15"
       },
       %{
         id: "2",
-        author: "James L.",
+        author: "Sample Customer B",
         content:
-          "Bought the forest hoodie as a gift. The packaging was lovely and the quality exceeded expectations. Will order again!",
+          "Another example testimonial. A mix of short and longer quotes works well for the layout. This one's a bit longer to show how the card handles more text.",
         rating: 5,
         date: "2025-01-10"
       },
       %{
         id: "3",
-        author: "Emily R.",
+        author: "Sample Customer C",
         content:
-          "My new favourite mug! I love sipping my morning tea while looking at that beautiful fern design.",
+          "Short and sweet works too. Customers love seeing real feedback from other buyers.",
         rating: 5,
         date: "2025-01-05"
       },
       %{
         id: "4",
-        author: "Michael T.",
+        author: "Sample Customer D",
         content:
-          "The tote bag is so sturdy - I use it for everything now. Great print quality that hasn't faded at all.",
+          "Sample feedback showing how the grid handles four or more testimonials. Replace these with real quotes once you have them.",
         rating: 5,
         date: "2024-12-28"
       },
       %{
         id: "5",
-        author: "Lisa K.",
+        author: "Sample Customer E",
         content:
-          "The night sky blanket is gorgeous and so cosy. Perfect for film nights on the sofa. Highly recommend!",
+          "One more example to fill out the testimonials section. You can add as many as you like – the layout adapts to fit.",
         rating: 5,
         date: "2024-12-20"
       },
       %{
         id: "6",
-        author: "David P.",
+        author: "Sample Customer F",
         content:
-          "Ordered several prints for my new flat. They arrived well packaged and look amazing on the wall.",
+          "Final sample testimonial. When you connect your store, real reviews and feedback from customers will replace these placeholder entries.",
         rating: 5,
         date: "2024-12-15"
       }

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

@@ -22,11 +22,14 @@
   <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"
+      description="Your story goes here – this is sample content for the demo shop"
       background={:sunken}
     />
 
-    <.content_body image_url="/mockups/night-sky-blanket-3.jpg">
+    <.content_body
+      image_src="/mockups/night-sky-blanket-3"
+      image_alt="Night sky blanket draped over a chair"
+    >
       <.rich_text blocks={SimpleshopTheme.Theme.PreviewData.about_content()} />
     </.content_body>
   </main>
@@ -42,7 +45,7 @@
     cart_status={assigns[:cart_status]}
   />
 
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 
   <.mobile_bottom_nav active_page="about" mode={@mode} />
 </div>

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

@@ -60,7 +60,7 @@
     open={assigns[:cart_drawer_open] || false}
     cart_status={assigns[:cart_status]}
   />
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 
   <.mobile_bottom_nav active_page="cart" mode={@mode} />
 </div>

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

@@ -47,9 +47,10 @@
     cart_count={@cart_count}
     mode={@mode}
     open={assigns[:cart_drawer_open] || false}
+    cart_status={assigns[:cart_status]}
   />
 
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 
   <.mobile_bottom_nav active_page="collection" mode={@mode} />
 </div>

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

@@ -23,7 +23,7 @@
     <.hero_section
       variant={:page}
       title="Get in touch"
-      description="Questions about your order or just want to say hello? Drop me a message and I'll get back to you as soon as I can."
+      description="Sample contact page for the demo store. Add your own message here – something friendly about how customers can reach you."
     />
 
     <div class="grid gap-8 md:grid-cols-2 mb-12">
@@ -35,20 +35,20 @@
         <.info_card
           title="Handy to know"
           items={[
-            %{label: "Printing", value: "2-5 business days"},
+            %{label: "Printing", value: "Example: 2-5 business days"},
-            %{label: "Delivery", value: "3-7 business days after printing"},
+            %{label: "Delivery", value: "Example: 3-7 business days after printing"},
-            %{label: "Returns", value: "Happy to help with faulty or damaged items"}
+            %{label: "Issues", value: "Example: Reprints for any defects"}
           ]}
         />
 
         <.newsletter_card />
 
         <.social_links_card links={[
-          %{platform: :instagram, url: "#", label: "Instagram"},
+          %{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
-          %{platform: :bluesky, url: "#", label: "Bluesky"},
+          %{platform: :bluesky, url: "https://bsky.app", label: "Bluesky"},
-          %{platform: :mastodon, url: "#", label: "Mastodon"},
+          %{platform: :mastodon, url: "https://mastodon.social", label: "Mastodon"},
-          %{platform: :kofi, url: "#", label: "Ko-fi"},
+          %{platform: :kofi, url: "https://ko-fi.com", label: "Ko-fi"},
-          %{platform: :github, url: "#", label: "GitHub"}
+          %{platform: :github, url: "https://github.com", label: "GitHub"}
         ]} />
       </div>
     </div>
@@ -65,7 +65,7 @@
     cart_status={assigns[:cart_status]}
   />
 
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 
   <.mobile_bottom_nav active_page="contact" mode={@mode} />
 </div>

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

@@ -59,5 +59,5 @@
     cart_status={assigns[:cart_status]}
   />
 
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 </div>

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

@@ -22,7 +22,7 @@
   <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."
+      description="Welcome to the SimpleShop demo store. This is where your hero text goes – something short and punchy about what makes your shop worth a browse."
       cta_text="Shop the collection"
       cta_page="collection"
       mode={@mode}
@@ -39,7 +39,7 @@
 
     <.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."
+      description="This is an example content section. Use it to share your story, highlight what makes your products special, or link to your about page."
       image_url="/mockups/mountain-sunrise-print-3-800.webp"
       link_text="Learn more about the studio →"
       link_page="about"
@@ -58,7 +58,7 @@
     cart_status={assigns[:cart_status]}
   />
 
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 
   <.mobile_bottom_nav active_page="home" mode={@mode} />
 </div>

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

@@ -99,7 +99,7 @@
     open={assigns[:cart_drawer_open] || false}
     cart_status={assigns[:cart_status]}
   />
-  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
 
   <.mobile_bottom_nav active_page="pdp" mode={@mode} />
 </div>

lib/simpleshop_theme_web/components/shop_components.ex

@@ -26,7 +26,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <.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"
+  attr :message, :string, default: "Sample announcement – e.g. free delivery, sales, or new drops"
 
   def announcement_bar(assigns) do
     ~H"""
@@ -723,7 +723,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
                 <% else %>
                   <li>
                     <a
-                      href="/delivery"
+                      href="/contact"
                       class="transition-colors hover:opacity-80"
                       style="color: var(--t-text-secondary);"
                     >
@@ -732,7 +732,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
                   </li>
                   <li>
                     <a
-                      href="/returns"
+                      href="/contact"
                       class="transition-colors hover:opacity-80"
                       style="color: var(--t-text-secondary);"
                     >
@@ -764,7 +764,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           </p>
           <div class="flex gap-2">
             <a
-              href="#"
+              href="https://instagram.com"
+              target="_blank"
+              rel="noopener noreferrer"
               class="social-link w-9 h-9 flex items-center justify-center transition-all"
               style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
               aria-label="Instagram"
@@ -782,7 +784,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
               </svg>
             </a>
             <a
-              href="#"
+              href="https://pinterest.com"
+              target="_blank"
+              rel="noopener noreferrer"
               class="social-link w-9 h-9 flex items-center justify-center transition-all"
               style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
               aria-label="Pinterest"
@@ -1226,7 +1230,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   ## Attributes
 
-  * `item` - Required. Cart item with `name`, `variant`, `price`, `quantity`, `image`, `variant_id`.
+  * `item` - Required. Cart item with `name`, `variant`, `price`, `quantity`, `image`, `variant_id`, `product_id`.
   * `size` - Either `:compact` (drawer) or `:default` (cart page). Default: :default
   * `show_quantity_controls` - Show +/- buttons. Default: false
   * `mode` - Either `:live` or `:preview`. Default: :live
@@ -1242,14 +1246,35 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       class="cart-item-row"
       style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"}
     >
-      <div
+      <%= if @mode != :preview do %>
-        class="cart-item-image"
+        <a
-        style={"width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
+          href={"/products/#{@item.product_id}"}
-      >
+          class="cart-item-image"
-      </div>
+          style={"display: block; width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
+          aria-label={"View #{@item.name}"}
+        >
+        </a>
+      <% else %>
+        <div
+          class="cart-item-image"
+          style={"width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
+        >
+        </div>
+      <% end %>
       <div class="cart-item-details" style="flex: 1; min-width: 0;">
-        <h3 style={"font-family: var(--t-font-body); font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;"}>
+        <h3 style={"font-family: var(--t-font-body); font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; font-weight: 500; margin: 0 0 2px;"}>
-          {@item.name}
+          <%= if @mode != :preview do %>
+            <a
+              href={"/products/#{@item.product_id}"}
+              style="color: var(--t-text-primary); text-decoration: none;"
+              onmouseover="this.style.textDecoration='underline'"
+              onmouseout="this.style.textDecoration='none'"
+            >
+              {@item.name}
+            </a>
+          <% else %>
+            <span style="color: var(--t-text-primary);">{@item.name}</span>
+          <% end %>
         </h3>
         <%= if @item.variant do %>
           <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
@@ -1515,7 +1540,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <% end %>
       <%= if @show_delivery_text do %>
         <p class="text-xs mt-1" style="color: var(--t-text-tertiary);">
-          Free delivery over £40
+          Made to order
         </p>
       <% end %>
     </div>
@@ -2328,7 +2353,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   ## Attributes
 
-  * `image_url` - Optional. Header image URL.
+  * `image_src` - Optional. Base path to image (without size/extension), used with responsive_image.
+  * `image_alt` - Optional. Alt text for the image. Defaults to "Page image".
 
   ## Slots
 
@@ -2336,11 +2362,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   ## Examples
 
-      <.content_body image_url="/images/about.jpg">
+      <.content_body image_src="/mockups/night-sky-blanket-3" image_alt="A cosy blanket">
         <p>Content here...</p>
       </.content_body>
   """
-  attr :image_url, :string, default: nil
+  attr :image_src, :string, default: nil
+  attr :image_alt, :string, default: "Page image"
 
   slot :inner_block, required: true
 
@@ -2350,11 +2377,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       class="content-body"
       style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;"
     >
-      <%= if @image_url do %>
+      <%= if @image_src do %>
         <div
           class="content-image about-image"
-          style={"width: 100%; height: 300px; border-radius: var(--t-radius-image); margin-bottom: var(--space-lg); background-size: cover; background-position: center; background-image: url('#{@image_url}');"}
+          style="margin-bottom: var(--space-lg); border-radius: var(--t-radius-image); overflow: hidden;"
         >
+          <.responsive_image
+            src={@image_src}
+            source_width={1200}
+            alt={@image_alt}
+            sizes="(max-width: 800px) 100vw, 800px"
+            class="w-full h-[300px] object-cover"
+          />
         </div>
       <% end %>
 
@@ -2577,7 +2611,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   attr :title, :string, default: "Newsletter"
 
   attr :description, :string,
-    default: "Get new designs and updates in your inbox. No spam, I promise."
+    default: "Sample newsletter signup. Replace with your own message to encourage subscribers."
 
   attr :button_text, :string, default: "Subscribe"
   attr :variant, :atom, default: :card
@@ -2661,6 +2695,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <%= for link <- @links do %>
           <a
             href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
             class="themed-button-outline flex items-center gap-2 px-3 py-2 text-sm transition-all hover:opacity-80"
             style="text-decoration: none;"
           >
@@ -2690,8 +2726,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   """
   attr :links, :list,
     default: [
-      %{platform: :instagram, url: "#", label: "Instagram"},
+      %{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
-      %{platform: :pinterest, url: "#", label: "Pinterest"}
+      %{platform: :pinterest, url: "https://pinterest.com", label: "Pinterest"}
     ]
 
   def social_links(assigns) do
@@ -2700,6 +2736,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <%= for link <- @links do %>
         <a
           href={link.url}
+          target="_blank"
+          rel="noopener noreferrer"
           class="social-link w-9 h-9 flex items-center justify-center transition-all"
           style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
           aria-label={link.label}
@@ -3280,8 +3318,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   """
   attr :items, :list,
     default: [
-      %{icon: :check, title: "Free Delivery", description: "On orders over £40"},
+      %{icon: :check, title: "Made to Order", description: "Printed just for you"},
-      %{icon: :shield, title: "Easy Returns", description: "30-day return policy"}
+      %{icon: :shield, title: "Quality Materials", description: "Premium inks and substrates"}
     ]
 
   def trust_badges(assigns) do