SimpleshopTheme

A customisable e-commerce theme system built with Phoenix LiveView. Designed for print-on-demand sellers who want beautiful, professional shops without design expertise.

Features

Theme Editor (/admin/theme)

• 8 curated presets - Gallery, Studio, Boutique, Bold, Playful, Minimal, Night, Classic
• Real-time preview - See changes instantly across 7 page types
• Comprehensive customisation:
  • Mood (Neutral, Warm, Cool, Dark)
  • Typography (Clean, Editorial, Modern, Classic, Friendly, Minimal)
  • Shape (Sharp, Soft, Round, Pill)
  • Density (Compact, Balanced, Spacious)
  • Accent colours with automatic contrast
  • Layout options (grid columns, header style, width)
  • Feature toggles (announcement bar, sticky header, etc.)
• Logo upload with optional SVG recolouring
• Header image with zoom and position controls

Public Storefront

• Home page with hero, categories, featured products, testimonials
• Products listing with grid layout
• Product detail pages with image gallery
• Shopping cart page
• About and Contact pages
• Themed 404/500 error pages

Technical Highlights

• CSS custom properties for instant theme switching
• Three-layer CSS architecture (primitives → attributes → semantic)
• ETS-based CSS caching for performance
• SQLite database with BLOB storage for images
• Shared PageTemplates between preview and live shop

Getting Started

Prerequisites

• Elixir 1.17+
• Erlang 27+
• Node.js 20+ (for assets)

Setup

# Clone the repository
git clone <repo-url>
cd simpleshop_theme

# Install dependencies
mix setup

# Start the server
mix phx.server

Visit:

• Shop: http://localhost:4000
• Theme Editor: http://localhost:4000/admin/theme

Running Tests

mix test

Project Structure

lib/
├── simpleshop_theme/           # Core business logic
│   ├── settings.ex             # Theme settings context
│   ├── settings/
│   │   └── theme_settings.ex   # Theme settings schema
│   ├── media.ex                # Image upload handling
│   └── theme/
│       ├── css_generator.ex    # Generates CSS from settings
│       ├── css_cache.ex        # ETS cache for generated CSS
│       ├── presets.ex          # 8 theme presets
│       └── preview_data.ex     # Mock data for previews
│
├── simpleshop_theme_web/       # Web layer
│   ├── components/
│   │   ├── layouts/            # App and shop layouts
│   │   ├── page_templates/     # Shared page templates (*.heex)
│   │   ├── page_templates.ex   # PageTemplates module
│   │   └── shop_components.ex  # Reusable shop UI components
│   ├── live/
│   │   ├── theme_live/         # Theme editor LiveView
│   │   └── shop_live/          # Public shop LiveViews
│   └── controllers/
│       └── error_html.ex       # Themed error pages

assets/css/
├── app.css                     # Main stylesheet
├── theme-layer1-primitives.css # Design tokens
├── theme-layer2-attributes.css # Theme-specific values
└── theme-layer3-semantic.css   # Component styles

Routes

Path	Description
/	Shop home page
/products	Products listing
/products/:id	Product detail page
/cart	Shopping cart
/about	About page
/contact	Contact page
/admin/theme	Theme editor (requires auth)
/dev/errors/404	Preview 404 page (dev only)
/dev/errors/500	Preview 500 page (dev only)

Documentation

• ROADMAP.md - Future features and improvements
• docs/spec.md - Theme system specification
• docs/plans/ - Feature plans
• docs/research/ - Design research and guidelines

Design Philosophy

1. "One theme, infinite variations" - Rather than multiple themes, one solid foundation with curated customisation
2. Constrained creativity - Limit choices to prevent poor design outcomes
3. No professional photography required - Works with product mockups
4. Mobile-first - All features work on touch devices
5. Ethical design - No dark patterns or fake urgency

License

MIT