Downloads Printify CDN images via ImageDownloadWorker, processes
through Media pipeline (WebP conversion, AVIF/WebP variant generation),
and links to ProductImage via new image_id FK.
- Add image_id to product_images table
- ImageDownloadWorker downloads and processes external images
- sync_product_images preserves image_id when URL unchanged
- PreviewData uses local images for responsive <picture> elements
- VariantCache enqueues pending downloads on startup
- mix simpleshop.download_images backfill task
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update theme preview to use optimized responsive images with modern
format support (AVIF/WebP with JPEG fallback).
- Change mockup URLs from .jpg to base paths for srcset generation
- Add source_width to preview products for proper variant selection
- Add responsive_image component with <picture> element
- Update image_text_section to use optimized 800px WebP variant
This ensures the theme preview loads optimal image formats and sizes,
matching the production responsive image behavior.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace cramped horizontal nav on mobile with a fixed bottom tab bar
for thumb-friendly navigation. The header nav is now hidden on mobile
(<768px) and the bottom nav provides Home, Shop, About, and Contact
links with icons.
- Add mobile_bottom_nav component with icon + label nav items
- Active page has accent-colored background highlight and larger icon
- Add shadow to lift nav visually off the page
- Update all page templates with bottom padding and bottom nav
- Remove CSS rule that was overriding Tailwind's hidden class
- Responsive header padding (tighter on mobile)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove marketing fluff "Be the first" - everyone on the list gets
emails at the same time. Just describe what they'll receive.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
More personal and authentic for a solo POD seller:
- "Get in touch" instead of "Contact Us"
- "Drop me a message" instead of "Drop us"
- "I'll get back to you" instead of "we'll"
- "Send a message" instead of "Send us a message"
- "How can I help?" instead of "How can we help?"
- "I'll send you a link" instead of "we'll send"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
More accurate than "Stay in touch" - newsletters are one-way communication.
Also updated description slightly: "news" instead of "updates" to avoid
repetition with the title.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
More neutral and personal than "Follow us":
- Works for all platform types (GitHub, Ko-fi, etc., not just social follows)
- "me" fits a solo POD seller better than corporate "us"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add newsletter_card component with :card and :inline variants to share
between footer and contact page. Add social_links_card component with
full-width icon+text cards for better discoverability.
Improve contact_form with optional email link and response time display,
keeping important contact info above the fold. Reorganize contact page
layout with form on left, info cards on right.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Current page in nav is now a span instead of a link (no self-links)
- Logo links to home page, except when already on home
- Use aria-current="page" with accent underline for current page indicator
- Extract logo_content, logo_inner, and nav_item helper components
- Update CSS to target both a and span elements in .shop-nav
This follows WCAG accessibility guidelines - links that point to
the current page are confusing for screen reader users.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ShopLive.Collection LiveView for collection pages
- Add products_by_category/1 and category_by_slug/1 to PreviewData
- Support /collections/all for all products view
- Remove /products route and ShopLive.Products (replaced by collections)
- Update all links to use /collections/all instead of /products
- Update category nav to link to /collections/:slug
- Update PDP breadcrumb to link to specific collection
URL structure now follows Shopify convention:
- /collections/all - All products
- /collections/art-prints - Art Prints collection
- /collections/apparel - Apparel collection
- etc.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add reusable components for all page sections:
- category_nav: Category circles for homepage navigation
- featured_products_section: Product grid with title and view-all CTA
- image_text_section: Two-column image + text layout
- collection_header: Page header with title and product count
- filter_bar: Category pills and sort dropdown
- content_body: Long-form content wrapper for about page
- contact_form: Contact form card
- order_tracking_card: Order tracking input card
- info_card: Bullet-point info card
- contact_info_card: Email contact card with icon
- social_links: Social media icon links
- cart_item: Cart item row with quantity controls
- order_summary: Order totals and checkout card
- breadcrumb: Navigation breadcrumb trail
- related_products_section: Related products grid
All preview pages now compose entirely of reusable components,
making them easier to maintain and enabling future section-based
theme customization.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add variant support to hero_section component:
- :default - Standard hero with section wrapper (home, about)
- :page - Page header style with larger title, more spacing (contact)
- :error - Error page with pre-title (404), dual buttons (error)
Now used in: home, about, contact, error pages
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a centered hero section component with:
- Title (h1) and description (p)
- Optional CTA button with preview/live mode support
- Configurable background (:base or :sunken)
Used in: home page (with CTA), about page (without CTA)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a reusable product grid component that handles responsive
column layouts. Supports two modes:
- Theme-based columns: Uses theme_settings.grid_columns for lg breakpoint
- Fixed columns: Use columns={:fixed_4} for 2/4 column layouts
Used in: home (featured), collection, pdp (related), error (suggestions)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a reusable product card component with four variants:
- :default (collection page) - full details with category
- :featured (home page) - hover animation, badges
- :compact (pdp related) - smaller, no badges/delivery
- :minimal (error 404) - smallest, not clickable
Accessibility improvements:
- Use <a> for all clickable cards (keyboard nav, screen readers)
- Use <div> only for non-clickable decorative cards
Unified badge logic with priority: Sold out > New > Sale
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move the cart drawer component from ThemeLive.PreviewPages to the
shared ShopComponents module. The component now supports:
- mode attribute (:live for real stores, :preview for theme editor)
- subtotal attribute (default nil shows "£0.00")
- cart_items attribute (default empty list)
In preview mode, "View basket" navigates via LiveView JS commands.
In live mode, it links directly to /cart.
Preview pages now explicitly pass demo values:
<.cart_drawer cart_items={...} subtotal="£72.00" mode={:preview} />
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move the shop header component from ThemeLive.PreviewPages to the
shared ShopComponents module. The component now supports:
- mode attribute (:live for real stores, :preview for theme editor)
- cart_count attribute (default 0, preview pages pass 2)
- Navigation links render conditionally based on mode
Preview pages now call <.shop_header ... mode={:preview} cart_count={2} />
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move the footer from ThemeLive.PreviewPages to the shared ShopComponents
module. Add mode attribute (:live vs :preview) for navigation behavior.
Preview mode uses phx-click handlers, live mode uses real URLs.
Also makes copyright year dynamic.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move the search modal from ThemeLive.PreviewPages to the shared
ShopComponents module. Add optional hint_text attribute - preview
pages pass demo hint text while real stores can omit it.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move the accessibility skip link from ThemeLive.PreviewPages to the
shared ShopComponents module for reuse on public storefront pages.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move announcement_bar from ThemeLive.PreviewPages to a new shared
SimpleshopThemeWeb.ShopComponents module. This establishes the pattern
for Phase 9 storefront integration where components need to work in
both the admin theme preview and public storefront pages.
Changes:
- Create lib/simpleshop_theme_web/components/shop_components.ex
- Add optional message attribute (defaults to "Free delivery over £40")
- Import ShopComponents in html_helpers for global availability
- Import ShopComponents in PreviewPages for embedded template access
- Update all 7 preview templates to use short-form <.announcement_bar>
- Remove original announcement_bar/1 from PreviewPages (now unused)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
