jamey/simpleshop_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
jamey 2026-02-06 23:33:22 +00:00
parent 1bc08bfb23
commit cff21703f1
10 changed files with 115 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/simpleshop_theme/cart.ex
View File

@ -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,

54
lib/simpleshop_theme/theme/preview_data.ex
View File

@ -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.",
author: "Sarah M.",
"This is an example review for the demo store. Real reviews from your customers will appear here once you start getting orders.",
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.",
author: "James T.",
"Another example review to show how the layout handles multiple entries. You can customise the review section in the theme settings.",
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"
}

9
lib/simpleshop_theme_web/components/page_templates/about.html.heex
View File

@ -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>

2
lib/simpleshop_theme_web/components/page_templates/cart.html.heex
View File

@ -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>

3
lib/simpleshop_theme_web/components/page_templates/collection.html.heex
View File

@ -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>

20
lib/simpleshop_theme_web/components/page_templates/contact.html.heex
View File

@ -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: "Delivery", value: "3-7 business days after printing"},
%{label: "Returns", value: "Happy to help with faulty or damaged items"}
%{label: "Printing", value: "Example: 2-5 business days"},
%{label: "Delivery", value: "Example: 3-7 business days after printing"},
%{label: "Issues", value: "Example: Reprints for any defects"}
]}
/>
<.newsletter_card />
<.social_links_card links={[
%{platform: :instagram, url: "#", label: "Instagram"},
%{platform: :bluesky, url: "#", label: "Bluesky"},
%{platform: :mastodon, url: "#", label: "Mastodon"},
%{platform: :kofi, url: "#", label: "Ko-fi"},
%{platform: :github, url: "#", label: "GitHub"}
%{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
%{platform: :bluesky, url: "https://bsky.app", label: "Bluesky"},
%{platform: :mastodon, url: "https://mastodon.social", label: "Mastodon"},
%{platform: :kofi, url: "https://ko-fi.com", label: "Ko-fi"},
%{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>

2
lib/simpleshop_theme_web/components/page_templates/error.html.heex
View File

@ -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>

6
lib/simpleshop_theme_web/components/page_templates/home.html.heex
View File

@ -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>

2
lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
View File

@ -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>

74
lib/simpleshop_theme_web/components/shop_components.ex
View File

@ -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;"}
>
<%= if @mode != :preview do %>
<a
href={"/products/#{@item.product_id}"}
class="cart-item-image"
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;"}>
<%= 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: :pinterest, url: "#", label: "Pinterest"}
%{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
%{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: :shield, title: "Easy Returns", description: "30-day return policy"}
%{icon: :check, title: "Made to Order", description: "Printed just for you"},
%{icon: :shield, title: "Quality Materials", description: "Premium inks and substrates"}
]
def trust_badges(assigns) do