diff --git a/README.md b/README.md index f8b05cc..310aca8 100644 --- a/README.md +++ b/README.md @@ -112,10 +112,37 @@ assets/css/ | `/dev/errors/404` | Preview 404 page (dev only) | | `/dev/errors/500` | Preview 500 page (dev only) | +## Generating Mockups + +The project includes a Printify integration for generating product mockups. This is useful for creating sample product images from Unsplash artwork. + +### Prerequisites + +1. A Printify account with API access +2. Set the `PRINTIFY_API_TOKEN` environment variable + +### Usage + +```bash +# Generate all mockups (saves to priv/static/mockups/) +export PRINTIFY_API_TOKEN="your-token" +mix generate_mockups + +# Generate mockups and delete products from Printify afterwards +mix generate_mockups --cleanup + +# Search for available blueprints +mix generate_mockups --search "poster" + +# List all blueprints +mix generate_mockups --list-blueprints +``` + +Product definitions are in `lib/simpleshop_theme/printify/mockup_generator.ex`. + ## Documentation - [ROADMAP.md](ROADMAP.md) - Future features and improvements -- [docs/spec.md](docs/spec.md) - Theme system specification - [docs/plans/](docs/plans/) - Feature plans - [docs/research/](docs/research/) - Design research and guidelines diff --git a/docs/plans/sample-content.md b/docs/plans/sample-content.md deleted file mode 100644 index 949254a..0000000 --- a/docs/plans/sample-content.md +++ /dev/null @@ -1,335 +0,0 @@ -# Plan: POD Sample Content Refresh - "Curated Mix" Approach - -## Goal -Replace the current mixed sample data with a POD-focused "curated mix" that: -1. Covers all types of POD sellers (art prints, apparel, homewares, accessories) -2. Uses nature/natural as the primary vibe but includes variety -3. Shows different "artist styles" to demonstrate theme versatility -4. Uses realistic product mockups generated via Printify - -## Design Concept - -**Shop Identity:** "Wildprint Studio" -- Primary vibe: Nature/organic/botanical -- Secondary styles: Bold/graphic, minimalist geometric (to show versatility) -- UK-focused (prices in £, UK shipping references) - -### Categories (5 POD-relevant) -1. **Art Prints** - Wall art, posters, framed prints -2. **Apparel** - T-shirts, hoodies, tote bags -3. **Homewares** - Mugs, cushions, blankets -4. **Stationery** - Notebooks, cards, calendars -5. **Accessories** - Phone cases, laptop sleeves - -### Products (16 total, varied styles) - -**Nature Style (10 products):** -- Mountain Sunrise Art Print -- Wildflower Meadow Tote Bag -- Fern Leaf Mug -- Ocean Waves Cushion -- Autumn Leaves Notebook -- Forest Silhouette T-Shirt -- Night Sky Throw Blanket -- Monstera Leaf Phone Case -- Botanical Illustration Art Print (NEW) -- Forest Light Hoodie (NEW) - -**Minimalist/Geometric Style (3 products):** -- Geometric Abstract Art Print -- Abstract Shapes Notebook -- Blue Waves Laptop Sleeve (NEW) - -**Bold/Graphic Style (3 products):** -- Tropical Leaves Poster -- Mountain Peaks Print -- Sunset Gradient Tote Bag (NEW) - ---- - -## Artwork for Printify Mockups (VERIFIED URLs) - -### Art Prints (to render on: Premium Matte Poster) - -| Design Name | Unsplash URL | Description | -|-------------|--------------|-------------| -| Mountain Sunrise | https://unsplash.com/photos/mountain-range-under-golden-hour-UweNcthlmDc | Mountain range at golden hour by Alice Donovan Rouse | -| Ocean Waves | https://unsplash.com/photos/the-sun-is-setting-over-the-ocean-with-waves-XRhUTUVuXAE | Sunset over ocean waves | -| Wildflower Meadow | https://unsplash.com/photos/a-field-of-flowers-with-a-mountain-in-the-background-6hPfsDGtBgI | Field of flowers with mountain backdrop | -| Geometric Abstract | https://unsplash.com/photos/abstract-geometric-shapes-form-a-minimalist-pattern--6GvTDpkkPU | Abstract geometric shapes by Pawel Czerwinski | - -### Apparel (to render on: Unisex T-Shirt, Tote Bag) - -| Design Name | Unsplash URL | Product Type | Description | -|-------------|--------------|--------------|-------------| -| Forest Silhouette | https://unsplash.com/photos/silhouette-photography-of-trees-EhvMzMRO4_o | T-Shirt | Trees silhouette at dawn | -| Wildflower Meadow | (same as above) | Tote Bag | Field of flowers | - -### Homewares (to render on: Mug, Cushion, Blanket) - -| Design Name | Unsplash URL | Product Type | Description | -|-------------|--------------|--------------|-------------| -| Fern Leaf | https://unsplash.com/photos/close-up-of-vibrant-green-fern-leaves-in-soft-light-bYiJojtkHnc | Mug | Vibrant green fern by Aaron Burden | -| Ocean Waves | (same as above) | Cushion | Ocean sunset | -| Night Sky | https://unsplash.com/photos/milky-way-and-stars-in-a-dark-night-sky-oQR1B87HsNs | Blanket | Milky way stars by Tobias Rademacher | - -### Stationery (to render on: Hardcover Journal/Notebook) - -| Design Name | Unsplash URL | Description | -|-------------|--------------|-------------| -| Autumn Leaves | https://unsplash.com/photos/selective-focus-photography-of-orange-leaves-Aa3ALtIxEGY | Orange autumn leaves by Aaron Burden | -| Monstera Leaf | https://unsplash.com/photos/green-monstera-leaves-with-water-droplets-hETU8_b2IM0 | Monstera with water droplets | - -### Accessories (to render on: Phone Case, Laptop Sleeve) - -| Design Name | Unsplash URL | Description | -|-------------|--------------|-------------| -| Monstera Leaf | (same as above) | Tropical monstera | -| Blue Waves | https://unsplash.com/photos/blue-waves-form-a-soft-abstract-gradient-dYksH3vHorc | Blue abstract gradient waves | - -### Additional Artwork for 16 Products - -| Design Name | Unsplash URL | Description | -|-------------|--------------|-------------| -| Botanical Illustration | https://unsplash.com/photos/a-drawing-of-a-plant-with-roots-and-flowers-FNtNIDQWUZY | Vintage botanical drawing | -| Forest Light | https://unsplash.com/photos/sunlight-filters-through-a-peaceful-forest-clearing-FwVkxITt8Bg | Sunlight through forest clearing | -| Sunset Gradient | https://unsplash.com/photos/the-sun-is-setting-over-the-ocean-with-waves-XRhUTUVuXAE | (reuse Ocean Waves for gradient effect) | - -### About Page Image (NOT a product - just for about page) - -| Design Name | Unsplash URL | Description | -|-------------|--------------|-------------| -| Forest Clearing | https://unsplash.com/photos/sunlight-filters-through-a-peaceful-forest-clearing-FwVkxITt8Bg | Peaceful forest with sunlight (no road) | -| OR White Flowers Golden Hour | https://unsplash.com/photos/auXdimpx7K8 | White flowers in field at golden hour | - ---- - -## Printify Product Mapping (for mockup generation) - 16 PRODUCTS - -| Product Name | Printify Product | Artwork to Use | -|--------------|------------------|----------------| -| Mountain Sunrise Art Print | Premium Matte Poster (A3/A4) | Mountain Sunrise | -| Ocean Waves Art Print | Premium Matte Poster | Ocean Waves | -| Wildflower Meadow Art Print | Premium Matte Poster | Wildflower Meadow | -| Geometric Abstract Art Print | Premium Matte Poster | Geometric Abstract | -| Botanical Illustration Print | Premium Matte Poster | Botanical Illustration | -| Forest Silhouette T-Shirt | Bella+Canvas 3001 Unisex Tee | Forest Silhouette | -| Forest Light Hoodie | Gildan 18500 Heavy Blend Hoodie | Forest Light | -| Wildflower Meadow Tote Bag | Cotton Canvas Tote | Wildflower Meadow | -| Sunset Gradient Tote Bag | Cotton Canvas Tote | Ocean Waves (cropped) | -| Fern Leaf Mug | White Glossy Mug 11oz | Fern Leaf | -| Ocean Waves Cushion | Spun Polyester Pillow | Ocean Waves | -| Night Sky Blanket | Sherpa Fleece Blanket | Night Sky | -| Autumn Leaves Notebook | Hardcover Journal | Autumn Leaves | -| Monstera Leaf Notebook | Hardcover Journal | Monstera Leaf | -| Monstera Leaf Phone Case | iPhone Tough Case | Monstera Leaf | -| Blue Waves Laptop Sleeve | Laptop Sleeve | Blue Waves | - ---- - -## Files to Update - -### 1. Core Data Source -**File:** `lib/simpleshop_theme/theme/preview_data.ex` - -Changes: -- Replace `mock_products/0` with 12 new POD products -- Update `mock_categories/0` with 5 POD categories -- Update `mock_cart_items/0` to reference new products -- Update `cart_drawer_items/0` with new product names -- Update `mock_testimonials/0` with POD-relevant reviews - -### 2. Preview Page Templates - -**File:** `lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex` -- Update hero title/subtitle to be inclusive of all POD types -- Update about section text (make it generic to all creators, not botanical-specific) - -**File:** `lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex` -- Rewrite entire narrative for generic POD creator -- Keep UK focus but remove Yorkshire/botanical specifics -- Update sustainability/process sections - -**File:** `lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex` -- Update review examples (make them product-agnostic) -- Keep structure, just refresh content - -**File:** `lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex` -- Minor updates to timings if needed -- Keep generic email placeholder - -### 3. Shared Components -**File:** `lib/simpleshop_theme_web/live/theme_live/preview_pages.ex` -- Update newsletter CTA: "Join the studio" -> more generic -- Update search hints from "fern, roses, botanical" to relevant terms - -### 4. Static Demo File -**File:** `priv/static/demo.html` -- **SKIP** - Leave as-is (legacy reference file) - ---- - -## Image Strategy - -Use Unsplash for realistic POD product photography: -- Art prints: framed prints on walls, print mockups -- Apparel: t-shirts, tote bags worn/styled -- Homewares: mugs, cushions in lifestyle settings -- Nature-themed but showing actual products - -Example Unsplash search terms: -- "framed art print wall" -- "t-shirt flat lay" -- "ceramic mug coffee" -- "cushion sofa" -- "tote bag canvas" - ---- - -## Content Examples - -### Hero Section (home page) -**Before:** "Nature-inspired art prints" -**After:** "Original designs, printed on demand" -Subtitle: "From art prints to apparel - unique products created by independent artists and delivered straight to your door." - -### About Section (home page preview) -**Before:** "Made with care in Yorkshire" -**After:** "Made with passion, printed with care" -Text: "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." - -### About Page (full) -Generic creative studio narrative: -- Passion for design -- Quality print partners -- Sustainable practices -- UK-based small business - -### Testimonials -POD-relevant reviews: -- "The print quality is amazing - colours are exactly as shown" -- "My new favourite mug! Great packaging too" -- "The tote bag is so sturdy, I use it every day" -- etc. - ---- - -## Implementation Order - -1. **preview_data.ex** - Core data (products, categories, cart, testimonials) -2. **home.html.heex** - Hero and about preview section -3. **about.html.heex** - Full about page narrative -4. **pdp.html.heex** - Product page reviews -5. **preview_pages.ex** - Shared components (newsletter, search hints) -6. **contact.html.heex** - Minor updates if needed -7. **demo.html** - Align static demo with new content - ---- - -## Workflow - -### Phase 1: Automated Mockup Generation (via Printify API) - -We'll create an Elixir module + Mix task to automate mockup generation. - -#### Implementation Plan - -**New files to create:** -1. `lib/simpleshop_theme/printify/client.ex` - HTTP client wrapper for Printify API -2. `lib/simpleshop_theme/printify/mockup_generator.ex` - Core logic module -3. `lib/mix/tasks/generate_mockups.ex` - Mix task entry point - -**API Workflow:** -1. Fetch shop ID via `GET /v1/shops.json` -2. For each product type, look up blueprint_id via `GET /v1/catalog/blueprints.json` -3. Get print provider and placeholder dimensions via `GET /v1/catalog/blueprints/{id}/print_providers/{id}/variants.json` -4. Download Unsplash image at highest resolution -5. Upload image to Printify via `POST /v1/uploads/images.json` (using URL) -6. Create product via `POST /v1/shops/{shop_id}/products.json` with centered artwork -7. Extract mockup URLs from response `images` array -8. Download mockups to `priv/static/mockups/` directory - -**Image Handling:** -- Printify API returns placeholder dimensions (width x height in pixels) for each product -- We'll calculate scale factor to fit artwork within print area while maintaining aspect ratio -- Center position: x=0.5, y=0.5 with appropriate scale -- Unsplash provides high-res downloads (typically 4000+ pixels) - should exceed 300 DPI requirements -- Printify auto-enhances low-res images, but we'll use highest quality available - -**Configuration:** -- API token stored in environment variable `PRINTIFY_API_TOKEN` -- Product definitions in the module (blueprint IDs, provider IDs) - -**Usage:** -```bash -# Generate mockups (keeps products in Printify) -mix generate_mockups - -# Generate mockups and delete products from Printify afterwards -mix generate_mockups --cleanup -``` - -**Blueprint IDs to look up:** -- Premium Matte Poster -- Bella+Canvas 3001 Unisex Tee -- Gildan 18500 Heavy Blend Hoodie -- Cotton Canvas Tote Bag -- White Glossy Mug 11oz -- Spun Polyester Pillow -- Sherpa Fleece Blanket -- Hardcover Journal -- iPhone Tough Case -- Laptop Sleeve - -### Phase 2: Code Updates -Once mockup images are generated: -1. Update `preview_data.ex` with new products pointing to local mockup images -2. Update preview page templates (home, about, pdp, etc.) -3. Update shared components (footer, announcement bar, search hints) -4. Test all preview pages work correctly - -### Phase 3: About Page Image -Download directly from Unsplash (no Printify needed): -- Forest Clearing: https://unsplash.com/photos/sunlight-filters-through-a-peaceful-forest-clearing-FwVkxITt8Bg -- Save to `priv/static/images/about-hero.jpg` - ---- - -## Final Decisions - -1. **Shop name** - "Wildprint Studio" -2. **Product count** - 16 products -3. **About page image** - Forest Clearing: https://unsplash.com/photos/sunlight-filters-through-a-peaceful-forest-clearing-FwVkxITt8Bg -4. **About page narrative** - Humble, British, personal tone. Single person who takes lovely nature photos and prints them on products. - -## About Page Content Direction - -**Tone:** Personal, humble, British, warm - -**Example narrative:** -> I'm [Name], 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. -> -> 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. -> -> 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. -> -> Thank you for visiting. It means a lot that you're here. - -**Key themes:** -- Personal photography journey -- UK-based -- Nature and peaceful moments -- Quality print partners (POD) -- Gratitude for customers - ---- - -## Validation - -After implementation: -- Browse all preview pages in theme editor -- Verify images load correctly -- Check content makes sense for "any POD seller" -- Ensure prices/currency consistent (£) -- Test that theme presets still work with new content -- Verify mockup images display at correct sizes